Add clear all example to ComboBox docs (#3378)

packages/core/stories/combo-box/combo-box.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import {
   FormField,
+  Button,
   FormFieldHelperText,
   FormFieldLabel,
   StackLayout,
@@ -11,6 +12,7 @@ import {
   Text,
   Avatar,
 } from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
 import {
   CountryCode,
   countryMetaMap,
@@ -843,3 +845,58 @@ export const FreeText: StoryFn<ComboBoxProps> = (args) => {
     </ComboBox>
   );
 };
+
+export const ClearSelection: StoryFn<ComboBoxProps> = (args) => {
+  const [value, setValue] = useState(getTemplateDefaultValue(args));
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setValue(value);
+  };
+
+  const handleSelectionChange = (
+    event: SyntheticEvent,
+    newSelected: string[]
+  ) => {
+    setSelected(newSelected);
+    args.onSelectionChange?.(event, newSelected);
+    setValue("");
+  };
+
+  const filteredOptions = usStates.filter((state) =>
+    state.toLowerCase().includes(value.trim().toLowerCase())
+  );
+
+  const handleClear = () => {
+    setValue("");
+    setSelected([]);
+  };
+
+  return (
+    <ComboBox
+      {...args}
+      multiselect
+      endAdornment={
+        (value || selected.length > 0) && (
+          <Button
+            onClick={handleClear}
+            aria-label="Clear value"
+            variant="secondary"
+          >
+            <CloseIcon aria-hidden />
+          </Button>
+        )
+      }
+      selected={selected}
+      onChange={handleChange}
+      onSelectionChange={handleSelectionChange}
+      value={value}
+      style={{ width: "266px" }}
+    >
+      {filteredOptions.map((state) => (
+        <Option value={state} key={state} />
+      ))}
+    </ComboBox>
+  );
+};

site/docs/components/combo-box/examples.mdx

@@ -176,5 +176,13 @@ When the `value` prop is an object, the `valueToString` prop must be provided to
 
 Use the `truncate` prop when you are limited on space and want to prevent the multi-select combobox from spanning multiple lines.
 
+</LivePreview>
+
+<LivePreview componentName="combo-box" exampleName="ClearSelection" >
+
+## Clear Selection
+
+In order to clear all the selections, you can pass a [`Button`](../button) to the `endAdornment` prop of the `ComboBox`.
+
 </LivePreview>
 </LivePreviewControls>

site/src/examples/combo-box/ClearSelection.tsx

@@ -0,0 +1,57 @@
+import { ChangeEvent, ReactElement, useState, SyntheticEvent } from "react";
+import { ComboBox, Button, Option } from "@salt-ds/core";
+import { shortColorData } from "./exampleData";
+import { CloseIcon } from "@salt-ds/icons";
+
+export const ClearSelection = (): ReactElement => {
+  const [value, setValue] = useState("");
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setValue(value);
+  };
+
+  const handleSelectionChange = (
+    event: SyntheticEvent,
+    newSelected: string[]
+  ) => {
+    setSelected(newSelected);
+    setValue("");
+  };
+
+  const filteredOptions = shortColorData.filter((data) =>
+    data.toLowerCase().includes(value.trim().toLowerCase())
+  );
+
+  const handleClear = () => {
+    setValue("");
+    setSelected([]);
+  };
+
+  return (
+    <ComboBox
+      multiselect
+      selected={selected}
+      onChange={handleChange}
+      onSelectionChange={handleSelectionChange}
+      value={value}
+      style={{ width: "266px" }}
+      endAdornment={
+        (value || selected.length > 0) && (
+          <Button
+            onClick={handleClear}
+            aria-label="Clear value"
+            variant="secondary"
+          >
+            <CloseIcon aria-hidden />
+          </Button>
+        )
+      }
+    >
+      {filteredOptions.map((state) => (
+        <Option value={state} key={state} />
+      ))}
+    </ComboBox>
+  );
+};

site/src/examples/combo-box/index.ts

@@ -14,3 +14,4 @@ export * from "./CustomFiltering";
 export * from "./ServerSideData";
 export * from "./ObjectValues";
 export * from "./Truncation";
+export * from "./ClearSelection";