🪟 🎨 Add color variants to PillSelect component (#18687)

* Add color variants to PillSelect * Add disabled, variant props * Update $transition-out var to not use `all` and fix users of the var * Add strong-blue variant to PillButton
airbytehq · Nov 2, 2022 · 33194df · 33194df
1 parent 87d79f7
commit 33194df
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 15 deletions.
diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss b/airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss
@@ -1,23 +1,44 @@
 @use "scss/colors";
 @use "scss/variables";
 
+@mixin theme($name, $background, $text, $hover) {
+  &.#{$name} {
+    background-color: $background;
+    color: $text;
+
+    .text {
+      color: $text;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &.active {
+        background: $hover;
+      }
+    }
+  }
+}
+
 .button {
   max-width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 3px 10px;
   gap: variables.$spacing-sm;
+  border: none;
   border-radius: 20px;
   cursor: pointer;
-  background: colors.$grey-50;
-  border: variables.$border-thin solid colors.$grey-50;
-  color: colors.$grey-600;
+  transition: background-color variables.$transition-out, color variables.$transition-out;
 
-  &:hover,
-  &.active {
-    background: colors.$grey-100;
-  }
+  @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("strongBlue", colors.$blue-300, colors.$white, colors.$blue-200);
+  @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-300, colors.$white, colors.$red-400);
+
+  @include theme("disabled", colors.$grey-50, colors.$grey, colors.$grey-50);
 }
 
 .text {

diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx
@@ -5,20 +5,34 @@ import classNames from "classnames";
 import { Text } from "../Text";
 import styles from "./PillButton.module.scss";
 
+export type PillButtonVariant = "grey" | "blue" | "green" | "red" | "strong-red" | "strong-blue";
+
+const STYLES_BY_VARIANT: Readonly<Record<PillButtonVariant, string>> = {
+  grey: styles.grey,
+  blue: styles.blue,
+  green: styles.green,
+  red: styles.red,
+  "strong-red": styles.strongRed,
+  "strong-blue": styles.strongBlue,
+};
+
 interface PillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
+  variant?: PillButtonVariant;
 }
 
 export const PillButton: React.FC<React.PropsWithChildren<PillButtonProps>> = ({
   children,
   active,
+  variant = "grey",
   ...buttonProps
 }) => {
   const buttonClassName = classNames(
     styles.button,
     {
       [styles.active]: active,
     },
+    buttonProps.disabled ? styles.disabled : STYLES_BY_VARIANT[variant],
     buttonProps.className
   );
 

diff --git a/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx b/airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx
@@ -1,15 +1,21 @@
 import { Popout, PopoutProps } from "../Popout";
 import { Tooltip } from "../Tooltip";
-import { PillButton } from "./PillButton";
+import { PillButton, PillButtonVariant } from "./PillButton";
 
-type PillSelectProps = Pick<PopoutProps, "value" | "options" | "isMulti" | "onChange" | "className">;
+type PickedPopoutProps = Pick<PopoutProps, "value" | "options" | "isMulti" | "onChange" | "className">;
+
+interface PillSelectProps extends PickedPopoutProps {
+  variant?: PillButtonVariant;
+  disabled?: boolean;
+}
 
 export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) => {
-  const { isMulti } = props;
+  const { isMulti, variant, disabled } = props;
 
   return (
     <Popout
       {...props}
+      isDisabled={disabled}
       targetComponent={({ onOpen, isOpen, value }) => {
         const label = value
           ? isMulti
@@ -21,6 +27,8 @@ export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) =
           <Tooltip
             control={
               <PillButton
+                variant={variant}
+                disabled={disabled}
                 onClick={(event) => {
                   event.stopPropagation();
                   onOpen();

diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss
@@ -1,5 +1,5 @@
 $transition: 0.3s;
-$transition-out: all $transition ease-out;
+$transition-out: $transition ease-out;
 
 $border-thin: 1px;
 $border-thick: 2px;

diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
@@ -58,19 +58,19 @@
   &:hover,
   &:focus-visible {
     background: colors.$dark-blue-800;
-    transition: variables.$transition-out;
+    transition: all variables.$transition-out;
   }
 
   &.active {
     color: colors.$white;
     background: colors.$blue-400;
-    transition: variables.$transition-out;
+    transition: all variables.$transition-out;
 
     &:hover,
     &:focus-visible {
       color: colors.$white;
       background: colors.$blue-300;
-      transition: variables.$transition-out;
+      transition: all variables.$transition-out;
     }
   }
 

diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.module.scss b/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.module.scss
@@ -19,7 +19,7 @@
   border-radius: variables.$border-radius-md;
   color: colors.$grey-30;
   text-decoration: none;
-  transition: variables.$transition-out;
+  transition: all variables.$transition-out;
 
   .text {
     margin-top: 7px;