From 89907dab2aa60340ed9826af6b26f8a27869dec0 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Date: Tue, 28 May 2024 23:29:12 +0530
Subject: [PATCH]  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 <alisonejoseph@Gmail.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  9 +++++++
 .../components/Checkbox/Checkbox.stories.js   | 18 +++++++++++++
 .../CheckboxGroup/CheckboxGroup-test.js       | 13 ++++++++++
 .../components/CheckboxGroup/CheckboxGroup.js |  8 ++++++
 .../scss/components/checkbox/_checkbox.scss   | 25 +++++++++++++++++++
 5 files changed, 73 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 3fb61718ecb1..94fb3a79a572 100644
--- 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
index 17d0cc2559ad..c556daff677b 100644
--- 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
index 46b0f6c7d439..3426a611efe3 100644
--- 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
index 5c94d70fea6c..68d587e3a789 100644
--- 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
index 5a35d1373a67..65e4e2b821f4 100644
--- 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;
+    }
+  }
 }