🪟 🎨 Updating styles for PillButton component according to new Figma design changes

airbyte-webapp/src/components/connection/CatalogTree/next/SyncModeSelect.tsx

@@ -31,13 +31,13 @@ export const SyncModeSelect: React.FC<SyncModeSelectProps> = ({ className, optio
     return options.map(({ value }) => {
       const { syncMode, destinationSyncMode } = value;
       return {
-        label: (
-          <>
-            <FormattedMessage id={`syncMode.${syncMode}`} />
-            {` | `}
-            <FormattedMessage id={`destinationSyncMode.${destinationSyncMode}`} />
-          </>
-        ),
+        label: [
+          <FormattedMessage key={`syncMode.${syncMode}`} id={`syncMode.${syncMode}`} />,
+          <FormattedMessage
+            key={`destinationSyncMode.${destinationSyncMode}`}
+            id={`destinationSyncMode.${destinationSyncMode}`}
+          />,
+        ],
         value,
       };
     });

airbyte-webapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap

@@ -78,9 +78,13 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   class="<removed-for-snapshot-test>"
                   type="button"
                 >
-                  <span
+                  <div
                     class="<removed-for-snapshot-test>"
-                  />
+                  >
+                    <span
+                      class="<removed-for-snapshot-test>"
+                    />
+                  </div>
                   <svg
                     aria-hidden="true"
                     class="<removed-for-snapshot-test>"
@@ -136,9 +140,13 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   disabled=""
                   type="button"
                 >
-                  <span
+                  <div
                     class="<removed-for-snapshot-test>"
-                  />
+                  >
+                    <span
+                      class="<removed-for-snapshot-test>"
+                    />
+                  </div>
                   <svg
                     aria-hidden="true"
                     class="<removed-for-snapshot-test>"
@@ -194,9 +202,13 @@ exports[`<BulkEditPanel /> should render 1`] = `
                   disabled=""
                   type="button"
                 >
-                  <span
+                  <div
                     class="<removed-for-snapshot-test>"
-                  />
+                  >
+                    <span
+                      class="<removed-for-snapshot-test>"
+                    />
+                  </div>
                   <svg
                     aria-hidden="true"
                     class="<removed-for-snapshot-test>"

airbyte-webapp/src/components/ui/DropDown/components/Option.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 
@@ -73,7 +73,11 @@ export const DropDownOption: React.FC<DropDownOptionProps> = (props) => {
               <CheckBox checked={props.isSelected} onChange={() => props.selectOption(props.data)} />{" "}
             </>
           )}
-          {props.label}
+          {Array.isArray(props.label)
+            ? props.label
+                .map<React.ReactNode>((node, index) => <Fragment key={index}>{node}</Fragment>)
+                .reduce((prev, curr) => [prev, " | ", curr])
+            : props.label}
         </DropDownText>
         {props.data.img || null}
       </OptionView>

airbyte-webapp/src/components/ui/PillSelect/PillButton.module.scss

@@ -19,13 +19,46 @@
   }
 }
 
+@mixin divider-theme($name, $background, $hover) {
+  &.#{$name} {
+    .divider {
+      background-color: $background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &.active {
+        .divider {
+          background: $hover;
+        }
+      }
+    }
+  }
+}
+
+@mixin disabled-theme($name, $background, $text) {
+  &.#{$name} {
+    &.disabled {
+      .icon {
+        visibility: hidden;
+      }
+
+      .text {
+        color: $text;
+      }
+
+      background-color: $background;
+    }
+  }
+}
+
 .button {
+  height: 19px;
   max-width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 3px 10px;
-  gap: variables.$spacing-sm;
+  padding: 0;
   border: none;
   border-radius: variables.$border-radius-pill;
   cursor: pointer;
@@ -38,11 +71,44 @@
   @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);
+  @include disabled-theme("grey", colors.$grey-50, colors.$grey-600);
+  @include disabled-theme("blue", colors.$blue-50, colors.$blue-600);
+  @include disabled-theme("strongBlue", colors.$blue-500, colors.$blue-200);
+  @include disabled-theme("green", colors.$green-50, colors.$green-600);
+  @include disabled-theme("red", colors.$red-50, colors.$red-600);
+  @include disabled-theme("strongRed", colors.$red-300, colors.$white);
+
+  @include divider-theme("grey", colors.$grey-100, colors.$grey-200);
+  @include divider-theme("blue", colors.$blue-100, colors.$blue-200);
+  @include divider-theme("strongBlue", colors.$blue-200, colors.$blue-100);
+  @include divider-theme("green", colors.$green-100, colors.$green-500);
+  @include divider-theme("red", colors.$red-100, colors.$red-200);
+  @include divider-theme("strongRed", colors.$red-100, colors.$red-100);
 }
 
 .text {
-  white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.icon {
+  margin-left: auto;
+  margin-right: variables.$spacing-md;
+}
+
+.labelContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: variables.$spacing-xs variables.$spacing-md;
+  justify-content: flex-start;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.divider {
+  height: 100%;
+  min-width: 1px;
+  transition: background-color variables.$transition-out, color variables.$transition-out;
 }

airbyte-webapp/src/components/ui/PillSelect/PillButton.tsx

@@ -1,6 +1,7 @@
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
+import { Children } from "react";
 
 import { Text } from "../Text";
 import styles from "./PillButton.module.scss";
@@ -21,27 +22,30 @@ interface PillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   variant?: PillButtonVariant;
 }
 
-export const PillButton: React.FC<React.PropsWithChildren<PillButtonProps>> = ({
-  children,
-  active,
-  variant = "grey",
-  ...buttonProps
-}) => {
+export const PillButton: React.FC<PillButtonProps> = ({ children, active, variant = "grey", ...buttonProps }) => {
   const buttonClassName = classNames(
     styles.button,
     {
       [styles.active]: active,
+      [styles.disabled]: buttonProps.disabled,
     },
-    buttonProps.disabled ? styles.disabled : STYLES_BY_VARIANT[variant],
+    STYLES_BY_VARIANT[variant],
     buttonProps.className
   );
-
+  const arrayChildren = Children.toArray(children);
   return (
     <button type="button" {...buttonProps} className={buttonClassName}>
-      <Text as="span" size="xs" className={styles.text}>
-        {children}
-      </Text>
-      <FontAwesomeIcon icon={faCaretDown} />
+      {Children.map(arrayChildren, (child, index) => (
+        <>
+          <div key={index} className={styles.labelContainer}>
+            <Text as="span" size="xs" className={styles.text}>
+              {child}
+            </Text>
+          </div>
+          {index !== arrayChildren?.length - 1 && <div className={styles.divider} />}
+        </>
+      ))}
+      <FontAwesomeIcon className={styles.icon} icon={faCaretDown} />
     </button>
   );
 };

airbyte-webapp/src/components/ui/PillSelect/PillSelect.tsx

@@ -11,18 +11,16 @@ interface PillSelectProps extends PickedPopoutProps {
 
 export const PillSelect: React.FC<PillSelectProps> = ({ className, ...props }) => {
   const { isMulti, variant, disabled } = props;
-
   return (
     <Popout
       {...props}
       isDisabled={disabled}
       targetComponent={({ onOpen, isOpen, value }) => {
         const label = value
           ? isMulti
-            ? value.map(({ label }: { label: string }) => label).join(", ")
+            ? value.map(({ label }: { label: string }) => (Array.isArray(label) ? label.join(" | ") : label)).join(", ")
             : value.label
           : "";
-
         return (
           <Tooltip
             control={

airbyte-webapp/src/components/ui/PillSelect/index.stories.tsx

@@ -8,7 +8,7 @@ export default {
 } as ComponentMeta<typeof PillSelect>;
 
 const Template: ComponentStory<typeof PillSelect> = (args) => (
-  <div style={{ width: "120px" }}>
+  <div style={{ width: "300px" }}>
     <PillSelect {...args} />
   </div>
 );
@@ -48,3 +48,35 @@ Multi.args = {
   isMulti: true,
   value: ["first_name", "last_name"],
 };
+
+const optionsWithTwoValues = [
+  {
+    value: "test1",
+    label: ["dog", "cat"],
+  },
+  {
+    value: "test2",
+    label: ["dog", "cat", "rat"],
+  },
+  {
+    value: "test3",
+    label: "dog",
+  },
+  {
+    value: "test4",
+    label: ["cat"],
+  },
+];
+
+export const PrimaryWithTwoValue = Template.bind({});
+PrimaryWithTwoValue.args = {
+  options: optionsWithTwoValues,
+  value: "test1",
+};
+
+export const PrimaryMultiWithTwoValue = Template.bind({});
+PrimaryMultiWithTwoValue.args = {
+  options: optionsWithTwoValues,
+  isMulti: true,
+  value: ["test1", "test2"],
+};