Skip to content
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

Merged
merged 2 commits into from
Nov 2, 2022

Conversation

edmundito
Copy link
Contributor

What

Closes #18186

Adds color variants to the PillSelect component: grey (default), blue, green, red, and strong-red. It also adds a disabled state.

Screen Shot 2022-10-31 at 09 48 47

How

  • Adds color variants via SCSS mixins
  • Adds the expected transition and fixes a variable usage

* Add disabled, variant props
* Update $transition-out var to not use `all` and fix users of the var
@edmundito edmundito requested a review from a team as a code owner October 31, 2022 13:51
@github-actions github-actions bot added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Oct 31, 2022
Copy link
Contributor

@dizel852 dizel852 left a 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 😁

Copy link
Contributor

@josephkmh josephkmh left a 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

Comment on lines 34 to 40
@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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice mixin!

Comment on lines 12 to +13
export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) => {
const { isMulti } = props;
const { isMulti, variant, disabled } = props;
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp area/platform issues related to the platform team/platform-move
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create new dropdowns components for new connection new streams table
3 participants