🪟 🧹 Update ListBox styling according to the DropDown component

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: 4px;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  min-height: 36px;
+
+  &:hover {
+    border: 1px solid colors.$grey-100;
+  }
 }
 
 .optionsContainer {
@@ -29,10 +42,25 @@
   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;
+  display: flex;
+  align-items: center;
 }
 
 .active {

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

@@ -2,6 +2,7 @@ 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> {
@@ -15,6 +16,7 @@ const DefaultControlButton = <T,>({ selectedOption }: ListBoxControlButtonProps<
 export interface Option<T> {
   label: string;
   value: T;
+  icon?: React.ReactNode;
 }
 
 interface ListBoxProps<T> {
@@ -44,17 +46,19 @@ export const ListBox = <T,>({
       <Listbox value={selectedValue} onChange={onSelect}>
         <Listbox.Button className={classNames(buttonClassName, styles.button)}>
           <ControlButton selectedOption={selectedOption} />
+          <CaretDownIcon />
         </Listbox.Button>
         {/* 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} />;
+};