Add user profile subheader components + button group#668
Conversation
f37c2e2 to
f22ba16
Compare
7c4bae2 to
751e6fe
Compare
751e6fe to
43b93d7
Compare
43b93d7 to
7bef8ed
Compare
| ], | ||
| variants: { | ||
| variant: { | ||
| orange: "bg-orange-200 text-orange-800 hover:bg-orange-300 not-first:border-orange-800/25", |
There was a problem hiding this comment.
There may be variants of this in other places. This orange one implements the styles for the "Compare favorites" button group
| orange: "bg-orange-200 text-orange-800 hover:bg-orange-300 not-first:border-orange-800/25", | ||
| }, | ||
| size: { | ||
| ...buttonSizes, |
There was a problem hiding this comment.
I think the button sizes are the same, so re-using the definitions from the styled buttons
| @@ -0,0 +1,55 @@ | |||
| import { | |||
There was a problem hiding this comment.
This isn't a brand new component. It's moved over from components into components/base with additional props like label, leftIcon, rightIcon, info, etc
| /> | ||
| ); | ||
|
|
||
| const GroupedButton = ({ |
There was a problem hiding this comment.
This is very similar to the styled Button component. There might be a chance to re-use the button component, and also parameterize groupedButtonStyles and buttonStyles as a function input?
|
Looks great! I made a few small tweaks. The last commit, 6b7c5b9, changes the User profile subheader so that the icon size relates to the component |
rachelekm
left a comment
There was a problem hiding this comment.
This looks great! Good to go on the development side, I really like the components dir structure so far and the CompareFavoritesButton and UserProfileSubheader component props will be nice to have upfront 👍
|
Thank you both for the reviews! The styling changes look awesome ✨ I updated changelog and will merge after CI |
Overview
This PR:
Tagging @philippschmitt here for design and styling care.
Checklist
fixup!commits have been squashedCHANGELOG.mdupdated with summary of features or fixes, followingKeep a Changelog guidelines
README.mdupdated if necessary to reflect the changes./scripts/formatto lint, format, and fix the application source code.Demo
Testing Instructions
Resolves #648