feat: revamp ComboBox to support sections, labels, icons, and non-cus…

…tom values (#13659) Co-authored-by: Ben Church <ben@airbyte.io>
airbytehq · Aug 23, 2024 · 460a218 · 460a218
1 parent 4706365
commit 460a218
Show file tree

Hide file tree

Showing 3 changed files with 259 additions and 52 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
@@ -317,6 +317,7 @@ const InnerBuilderField: React.FC<BuilderFieldProps> = ({
           }}
           filterOptions={false}
           disabled={isDisabled}
+          allowCustomValue
         />
       )}
       {props.type === "multicombobox" && (

diff --git a/airbyte-webapp/src/components/ui/ComboBox/ComboBox.stories.tsx b/airbyte-webapp/src/components/ui/ComboBox/ComboBox.stories.tsx
@@ -2,6 +2,9 @@ import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
 
 import { ComboBox, ComboBoxProps, MultiComboBox, MultiComboBoxProps } from "./ComboBox";
+import { FlexContainer } from "../Flex";
+import { Icon } from "../Icon";
+import { Text } from "../Text";
 
 export default {
   title: "Ui/ComboBox",
@@ -10,7 +13,12 @@ export default {
 
 const SingleValueTemplate: StoryFn<typeof ComboBox> = (args: Omit<ComboBoxProps, "onChange">) => {
   const [selectedValue, setSelectedValue] = useState(args.value);
-  return <ComboBox {...args} value={selectedValue} onChange={setSelectedValue} />;
+  return (
+    <FlexContainer direction="column" gap="lg">
+      <ComboBox {...args} value={selectedValue} onChange={setSelectedValue} />
+      <Text>Selected value: {selectedValue}</Text>
+    </FlexContainer>
+  );
 };
 
 export const SingleValue = SingleValueTemplate.bind({});
@@ -29,8 +37,89 @@ SingleValue.args = {
       description: "the third value",
     },
   ],
-  value: "s",
+  value: "",
   error: false,
+  filterOptions: true,
+  allowCustomValue: true,
+};
+
+export const WithDifferingLabels = SingleValueTemplate.bind({});
+WithDifferingLabels.args = {
+  options: [
+    {
+      value: "a1b2c3",
+      label: "small",
+    },
+    {
+      value: "d4e5f6",
+      label: "medium",
+    },
+    {
+      value: "g7h8i9",
+      label: "large",
+    },
+  ],
+  value: "",
+  error: false,
+  filterOptions: true,
+  allowCustomValue: false,
+};
+
+export const WithOptionSections = SingleValueTemplate.bind({});
+WithOptionSections.args = {
+  options: [
+    {
+      sectionTitle: "Databases",
+      innerOptions: [
+        {
+          value: "postgres",
+        },
+        {
+          value: "mysql",
+        },
+        {
+          value: "mssql",
+        },
+      ],
+    },
+    {
+      sectionTitle: "APIs",
+      innerOptions: [
+        {
+          value: "slack",
+        },
+        {
+          value: "salesforce",
+        },
+      ],
+    },
+  ],
+  value: "",
+  error: false,
+  filterOptions: true,
+  allowCustomValue: false,
+};
+
+export const WithIcons = SingleValueTemplate.bind({});
+WithIcons.args = {
+  options: [
+    {
+      value: "success",
+      icon: <Icon type="statusSuccess" size="sm" color="success" />,
+    },
+    {
+      value: "warning",
+      icon: <Icon type="statusWarning" size="sm" color="warning" />,
+    },
+    {
+      value: "error",
+      icon: <Icon type="statusError" size="sm" color="error" />,
+    },
+  ],
+  value: "",
+  error: false,
+  filterOptions: true,
+  allowCustomValue: false,
 };
 
 const MultiValueTemplate: StoryFn<typeof MultiComboBox> = (args: Omit<MultiComboBoxProps, "onChange">) => {