fix: allow className on CheckboxGroup

appfolio · Mar 25, 2024 · cada747 · cada747
1 parent ca261fa
commit cada747
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/Checkbox/CheckboxGroup.stories.js b/src/components/Checkbox/CheckboxGroup.stories.js
@@ -47,3 +47,21 @@ export const SomeDisabled = () => {
     <CheckboxGroup options={optionsSomeDisabled} onChange={handleChange} selected={selected} />
   );
 };
+
+export const Horizontal = () => {
+  const [selected, setSelected] = useState([]);
+
+  const handleChange = (values) => {
+    setSelected(values);
+    action('onChange')(values);
+  };
+
+  return (
+    <CheckboxGroup
+      className="d-flex gap-3"
+      options={options}
+      onChange={handleChange}
+      selected={selected}
+    />
+  );
+};
diff --git a/src/components/Checkbox/CheckboxGroup.tsx b/src/components/Checkbox/CheckboxGroup.tsx
@@ -12,12 +12,13 @@ interface Option {
 }
 
 export interface CheckboxGroupProps {
+  className?: string;
   options: Option[];
   selected: Value[];
   onChange: (values: Value[]) => void;
 }
 
-const CheckboxGroup = ({ options, selected, onChange }: CheckboxGroupProps) => {
+const CheckboxGroup = ({ className, options, selected, onChange }: CheckboxGroupProps) => {
   const [groupId] = useState(uuidv4());
 
   const handleCheckboxChange = (checked: boolean, value: Value) => {
@@ -33,7 +34,7 @@ const CheckboxGroup = ({ options, selected, onChange }: CheckboxGroupProps) => {
   };
 
   return (
-    <FormGroup>
+    <FormGroup className={className}>
       {options.map((option, index) => {
         const id = `option-${option.label}-${groupId}`;
         const dataTestId = `react-gears-checkboxgroup-${groupId}-${index}`;