CheckboxMultiSelect: add variant option to CheckboxMultiSelect.Item (#…

…503)
ClickHouse · Dec 3, 2024 · 5962d3d · 5962d3d
1 parent be544dd
commit 5962d3d
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 2 deletions.
diff --git a/src/components/Select/CheckboxMultiSelect.stories.tsx b/src/components/Select/CheckboxMultiSelect.stories.tsx
@@ -133,3 +133,48 @@ ${
     },
   },
 };
+
+export const CheckboxMultiSelectVariants = {
+  render: () => {
+    const [selectedCount, setSetlectedCount] = useState<number>(0);
+
+    const label = `Selected (${selectedCount})`;
+
+    const handleSelect = (selectedVariants: Array<string>) => {
+      setSetlectedCount(selectedVariants.length);
+    };
+
+    return (
+      <CheckboxMultiSelect
+        onSelect={handleSelect}
+        placeholder={label}
+        selectLabel={label}
+      >
+        <CheckboxMultiSelect.Item
+          value="variant 1"
+          variant="var1"
+        >
+          Variant 1
+        </CheckboxMultiSelect.Item>
+        <CheckboxMultiSelect.Item
+          value="variant 2"
+          variant="var2"
+        >
+          Variant 2
+        </CheckboxMultiSelect.Item>
+        <CheckboxMultiSelect.Item
+          value="variant 4"
+          variant="var4"
+        >
+          Variant 4
+        </CheckboxMultiSelect.Item>
+        <CheckboxMultiSelect.Item
+          value="variant 6"
+          variant="var6"
+        >
+          Variant 6
+        </CheckboxMultiSelect.Item>
+      </CheckboxMultiSelect>
+    );
+  },
+};
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
@@ -22,7 +22,14 @@ import {
 } from "./types";
 import { Error, FormElementContainer, FormRoot } from "@/components/commonElement";
 import { Portal } from "@radix-ui/react-popover";
-import { Checkbox, Icon, IconButton, Label, Separator } from "@/components";
+import {
+  Checkbox,
+  CheckboxVariants,
+  Icon,
+  IconButton,
+  Label,
+  Separator,
+} from "@/components";
 import {
   SelectPopoverContent,
   SearchBar,
@@ -594,9 +601,16 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
   }
 );
 
+export type MultiSelectCheckboxItemProps = SelectItemProps & {
+  variant?: CheckboxVariants;
+};
+
 SelectItem.displayName = "Select.Item";
 
-export const MultiSelectCheckboxItem = forwardRef<HTMLDivElement, SelectItemProps>(
+export const MultiSelectCheckboxItem = forwardRef<
+  HTMLDivElement,
+  MultiSelectCheckboxItemProps
+>(
   (
     {
       disabled = false,
@@ -608,6 +622,7 @@ export const MultiSelectCheckboxItem = forwardRef<HTMLDivElement, SelectItemProp
       onSelect: onSelectProp,
       separator,
       value = "",
+      variant,
       ...props
     },
     forwardedRef
@@ -678,6 +693,7 @@ export const MultiSelectCheckboxItem = forwardRef<HTMLDivElement, SelectItemProp
                 )
               }
               onClick={onChange}
+              variant={variant ?? "default"}
             />
           )}
           {icon && iconDir === "end" && (
@@ -691,6 +707,7 @@ export const MultiSelectCheckboxItem = forwardRef<HTMLDivElement, SelectItemProp
                 disabled={disabled}
                 label={label ?? children}
                 onClick={onChange}
+                variant={variant ?? "default"}
               />
             </IconWrapper>
           )}
@@ -701,6 +718,7 @@ export const MultiSelectCheckboxItem = forwardRef<HTMLDivElement, SelectItemProp
               disabled={disabled}
               label={label ?? children}
               onClick={onChange}
+              variant={variant ?? "default"}
             />
           )}
         </GenericMenuItem>