-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🪟 🎨 Add color variants to PillSelect
component
#18687
Conversation
* Add disabled, variant props * Update $transition-out var to not use `all` and fix users of the var
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code LGTM 👍
Not tested locally would be great to update our storybook, since <PillSelect />
it's already has some stories 😁
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, just some non-blocking comments
@include theme("grey", colors.$grey-50, colors.$grey-600, colors.$grey-100); | ||
@include theme("blue", colors.$blue-50, colors.$blue-600, colors.$blue-100); | ||
@include theme("green", colors.$green-50, colors.$green-600, colors.$green-100); | ||
@include theme("red", colors.$red-50, colors.$red-600, colors.$red-100); | ||
@include theme("strongRed", colors.$red, colors.$white, colors.$red-400); | ||
|
||
@include theme("disabled", colors.$grey-50, colors.$grey, colors.$grey-50); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice mixin!
export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) => { | ||
const { isMulti } = props; | ||
const { isMulti, variant, disabled } = props; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nitpick: could destructure everything on line 12 instead
What
Closes #18186
Adds color variants to the
PillSelect
component: grey (default), blue, green, red, and strong-red. It also adds a disabled state.How