🪟 🧹 Update ListBox styling according to the DropDown component

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamSelector.tsx

@@ -1,5 +1,3 @@
-import { faSortDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import capitalize from "lodash/capitalize";
 import { useIntl } from "react-intl";
@@ -9,6 +7,7 @@ import { ListBox, ListBoxControlButtonProps } from "components/ui/ListBox";
 
 import { useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
+import { ReactComponent as CaretDownIcon } from "../../ui/ListBox/CaretDownIcon.svg";
 import styles from "./StreamSelector.module.scss";
 
 interface StreamSelectorProps {
@@ -21,7 +20,7 @@ const ControlButton: React.FC<ListBoxControlButtonProps<string>> = ({ selectedOp
       <Heading className={styles.label} as="h1" size="sm">
         {selectedOption.label}
       </Heading>
-      <FontAwesomeIcon className={styles.arrow} icon={faSortDown} />
+      <CaretDownIcon className={styles.arrow} />
     </>
   );
 };

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

@@ -0,0 +1,33 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { DropDown } from "./DropDown";
+
+const listOptions = [
+  {
+    label: "one",
+    value: "value",
+  },
+  {
+    label: "two",
+    value: "value",
+  },
+  {
+    label: "three",
+    value: "value",
+  },
+];
+
+export default {
+  title: "Ui/DropDown",
+  component: DropDown,
+  argTypes: {
+    options: listOptions,
+  },
+} as ComponentMeta<typeof DropDown>;
+
+const Template: ComponentStory<typeof DropDown> = (args) => <DropDown {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  options: listOptions,
+};

airbyte-webapp/src/components/ui/ListBox/ListBox.module.scss

@@ -3,8 +3,21 @@
 
 .button {
   width: 100%;
-  height: 100%;
   cursor: pointer;
+  border: 1px solid colors.$grey-50;
+  background-color: colors.$grey-50;
+  border-radius: variables.$border-radius-xs;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  min-height: 36px;
+
+  &:hover {
+    border-color: colors.$grey-100;
+  }
 }
 
 .optionsContainer {
@@ -25,15 +38,33 @@
   z-index: 1;
 }
 
+.caret {
+  color: colors.$grey-300;
+}
+
 .option {
   list-style-type: none;
 }
 
+.icon {
+  padding-right: variables.$spacing-md;
+
+  & svg {
+    max-width: 18px;
+    max-height: 18px;
+  }
+}
+
+.label {
+  padding: variables.$spacing-lg 0;
+}
+
 .optionValue {
-  padding: variables.$spacing-lg variables.$spacing-md;
-  border-radius: variables.$border-radius-lg;
+  padding: 0 variables.$spacing-md;
+  border-radius: variables.$border-radius-md;
   cursor: pointer;
-  overflow: auto;
+  display: flex;
+  align-items: center;
 }
 
 .active {

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

@@ -2,19 +2,26 @@ import { Listbox } from "@headlessui/react";
 import classNames from "classnames";
 import React from "react";
 
+import { ReactComponent as CaretDownIcon } from "./CaretDownIcon.svg";
 import styles from "./ListBox.module.scss";
 
 export interface ListBoxControlButtonProps<T> {
   selectedOption: Option<T>;
 }
 
 const DefaultControlButton = <T,>({ selectedOption }: ListBoxControlButtonProps<T>) => {
-  return <>{selectedOption.label}</>;
+  return (
+    <>
+      {selectedOption.label}
+      <CaretDownIcon className={styles.caret} />
+    </>
+  );
 };
 
 export interface Option<T> {
   label: string;
   value: T;
+  icon?: React.ReactNode;
 }
 
 interface ListBoxProps<T> {
@@ -48,13 +55,14 @@ export const ListBox = <T,>({
         {/* wrap in div to make `position: absolute` on Listbox.Options result in correct vertical positioning */}
         <div className={styles.optionsContainer}>
           <Listbox.Options className={classNames(styles.optionsMenu)}>
-            {options.map(({ label, value }) => (
+            {options.map(({ label, value, icon }) => (
               <Listbox.Option key={label} value={value} className={styles.option}>
                 {({ active, selected }) => (
                   <div
                     className={classNames(styles.optionValue, { [styles.active]: active, [styles.selected]: selected })}
                   >
-                    {label}
+                    {icon && <span className={styles.icon}>{icon}</span>}
+                    <span className={styles.label}>{label}</span>
                   </div>
                 )}
               </Listbox.Option>

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

@@ -0,0 +1,36 @@
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ComponentMeta } from "@storybook/react";
+import { useState } from "react";
+
+import { ListBox } from "./ListBox";
+
+const listOptions = [
+  {
+    label: "one",
+    value: 1,
+    icon: <FontAwesomeIcon icon={faEdit} size="2x" />,
+  },
+  {
+    label: "two",
+    value: 2,
+  },
+  {
+    label: "three",
+    value: 3,
+  },
+];
+
+export default {
+  title: "Ui/ListBox",
+  component: ListBox,
+  argTypes: {
+    options: listOptions,
+  },
+} as ComponentMeta<typeof ListBox>;
+
+export const Primary = () => {
+  const [selectedOption, setSelectedOption] = useState(1);
+
+  return <ListBox options={listOptions} selectedValue={selectedOption} onSelect={setSelectedOption} />;
+};