changed example to clear all for combobox

Author: ThusharaJ07

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,
@@ -844,14 +846,11 @@ export const FreeText: StoryFn<ComboBoxProps> = (args) => {
   );
 };
 
-export const SelectAll: StoryFn<ComboBoxProps> = (args) => {
+export const ClearAll: StoryFn<ComboBoxProps> = (args) => {
   const [value, setValue] = useState(getTemplateDefaultValue(args));
   const [selected, setSelected] = useState<string[]>([]);
-  const allSelectedOptionValue = "all";
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // React 16 backwards compatibility
-    event.persist();
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setValue(value);
   };
@@ -860,72 +859,41 @@ export const SelectAll: StoryFn<ComboBoxProps> = (args) => {
     event: SyntheticEvent,
     newSelected: string[]
   ) => {
-    let newOptionsSelected = [...newSelected];
-    const wasAllSelected = selected.includes(allSelectedOptionValue);
-    const isAllSelected = newOptionsSelected.includes(allSelectedOptionValue);
-
-    if (wasAllSelected) {
-      if (isAllSelected) {
-        newOptionsSelected = newOptionsSelected.filter(
-          (el) => el !== allSelectedOptionValue
-        );
-      } else {
-        newOptionsSelected = [];
-      }
-    } else if (
-      isAllSelected ||
-      (!isAllSelected && newOptionsSelected.length === usStates.length)
-    ) {
-      newOptionsSelected = [...usStates, allSelectedOptionValue];
-    }
-    setSelected(newOptionsSelected);
-    args.onSelectionChange?.(event, newOptionsSelected);
-
+    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.length > 1 && (
-        <div
-          style={{
-            position: "sticky",
-            top: 0,
-            zIndex: 9,
-            background: !selected.includes(allSelectedOptionValue)
-              ? "var(--salt-color-white)"
-              : "",
-          }}
-        >
-          <Option
-            style={{
-              borderBottom: "solid",
-              borderWidth: "1px",
-              borderColor:
-                selected.includes(filteredOptions[0]) ||
-                selected.includes(allSelectedOptionValue)
-                  ? "transparent"
-                  : "var(--salt-separable-tertiary-borderColor)",
-            }}
-            value={"all"}
-            key={"all"}
-          >
-            Select All
-          </Option>
-        </div>
-      )}
       {filteredOptions.map((state) => (
         <Option value={state} key={state} />
       ))}

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

@@ -178,11 +178,11 @@ Use the `truncate` prop when you are limited on space and want to prevent the mu
 
 </LivePreview>
 
-<LivePreview componentName="combo-box" exampleName="SelectAll" >
+<LivePreview componentName="combo-box" exampleName="ClearAll" >
 
-## Select All
+## Clear All
 
-In order to achieve the select all functionality, you can pass the first Option as Select All and pass in the logic to handleSelectionChange prop.
+In order to achieve the clear all functionality, you can pass a close icon in endAdornment prop.
 
 </LivePreview>
 </LivePreviewControls>

site/src/examples/combo-box/ClearAll.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 ClearAll = (): 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/SelectAll.tsx

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