Adds horizontal variant in CheckboxGroup (#16583)

* feat(16486): adds horizontal variant in CheckboxGroup * feat(16486): add prop to playground & styles on validation messages * Update packages/react/src/components/CheckboxGroup/CheckboxGroup.js * Update packages/styles/scss/components/checkbox/_checkbox.scss * Update packages/styles/scss/components/checkbox/_checkbox.scss * Update packages/styles/scss/components/checkbox/_checkbox.scss * fix: updates flex styles --------- Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · May 28, 2024 · 89907da · 89907da
1 parent f7065bc
commit 89907da
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 0 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -544,6 +544,15 @@ Map {
         "isRequired": true,
         "type": "node",
       },
+      "orientation": Object {
+        "args": Array [
+          Array [
+            "horizontal",
+            "vertical",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "readOnly": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -43,6 +43,19 @@ export const Default = () => {
   );
 };
 
+export const Horizontal = () => {
+  return (
+    <CheckboxGroup
+      orientation="horizontal"
+      {...fieldsetCheckboxProps()}
+      helperText="Helper text goes here">
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
+      <Checkbox labelText={`Checkbox label`} id="checkbox-label-3" />
+    </CheckboxGroup>
+  );
+};
+
 export const Single = () => {
   return (
     <>
@@ -186,4 +199,9 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  orientation: {
+    description: 'Provide how checkbox should be displayed',
+    control: 'select',
+    options: ['horizontal', 'vertical'],
+  },
 };
diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js
@@ -161,4 +161,17 @@ describe('CheckboxGroup', () => {
 
     expect(container.firstChild).toHaveClass(`${prefix}--checkbox-group--slug`);
   });
+  it('should render checkboxes horizontally', () => {
+    const { container } = render(
+      <CheckboxGroup orientation="horizontal" legendText="test-horizental-prop">
+        <Checkbox labelText="Checkbox label 1" id="checkbox-label-1" />
+        <Checkbox labelText="Checkbox label 2" id="checkbox-label-2" />
+        <Checkbox labelText="Checkbox label 3" id="checkbox-label-3" />
+      </CheckboxGroup>
+    );
+
+    expect(container.firstChild).toHaveClass(
+      `${prefix}--checkbox-group--horizontal`
+    );
+  });
 });
diff --git a/packages/react/src/components/CheckboxGroup/CheckboxGroup.js b/packages/react/src/components/CheckboxGroup/CheckboxGroup.js
@@ -26,6 +26,7 @@ function CheckboxGroup({
   warn,
   warnText,
   slug,
+  orientation = 'vertical',
   ...rest
 }) {
   const prefix = usePrefix();
@@ -46,6 +47,7 @@ function CheckboxGroup({
   ) : null;
 
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
+    [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
@@ -67,6 +69,7 @@ function CheckboxGroup({
       data-invalid={invalid ? true : undefined}
       aria-labelledby={rest['aria-labelledby'] || legendId}
       aria-readonly={readOnly}
+      orientation="vertical"
       aria-describedby={!invalid && !warn && helper ? helperId : undefined}
       {...rest}>
       <legend
@@ -134,6 +137,11 @@ CheckboxGroup.propTypes = {
    */
   legendText: PropTypes.node.isRequired,
 
+  /**
+   * Provide the orientation for how the checkbox should be displayed
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
   /**
    * Whether the CheckboxGroup should be read-only
    */

diff --git a/packages/styles/scss/components/checkbox/_checkbox.scss b/packages/styles/scss/components/checkbox/_checkbox.scss
@@ -385,4 +385,29 @@
     line-height: inherit;
     margin-block-start: convert.to-rem(-1px);
   }
+
+  // horizontal checkbox group
+  .#{$prefix}--checkbox-group--horizontal {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    .#{$prefix}--form-item {
+      flex: none;
+      margin-block-end: 0;
+
+      &:not(:last-of-type) {
+        margin-inline-end: $spacing-05;
+      }
+    }
+
+    .#{$prefix}--checkbox-label-text {
+      padding-inline-start: $spacing-03;
+    }
+
+    .#{$prefix}--label + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper {
+      margin-block-start: 0;
+    }
+  }
 }