From 5d524db5ffa5899c02f797da3eb53f576d5e2af9 Mon Sep 17 00:00:00 2001
From: Vincent Teo <vincent.teo@adslot.com>
Date: Wed, 1 Mar 2023 13:50:01 +1100
Subject: [PATCH] fix: allow checkbox group within radio group

---
 src/components/Checkbox/index.jsx       |   3 +-
 src/components/Checkbox/styles.css      |   8 +-
 src/components/CheckboxGroup/styles.css | 121 ++++++++++++++++++++++++
 src/components/Radio/index.jsx          |   3 +-
 src/components/Radio/styles.css         |   8 +-
 src/components/RadioGroup/style.css     |  72 ++++++--------
 www/examples/CheckboxGroup.mdx          |   8 +-
 7 files changed, 167 insertions(+), 56 deletions(-)

diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx
index 7287a2441..a55a140f2 100644
--- a/src/components/Checkbox/index.jsx
+++ b/src/components/Checkbox/index.jsx
@@ -74,8 +74,9 @@ const Checkbox = ({
       onKeyDown={onCheckboxKeyDown}
       {...expandDts(dts)}
     >
-      <label htmlFor={id}>
+      <label className="aui--checkbox-label-container" htmlFor={id}>
         <input
+          className="aui--checkbox-input"
           data-testid="checkbox-input"
           type="checkbox"
           name={name}
diff --git a/src/components/Checkbox/styles.css b/src/components/Checkbox/styles.css
index 53d293203..38d6ddc30 100644
--- a/src/components/Checkbox/styles.css
+++ b/src/components/Checkbox/styles.css
@@ -7,19 +7,19 @@ $label-gap: 8px;
   cursor: pointer;
   display: block;
 
-  & label {
+  & .aui--checkbox-label-container {
     cursor: pointer;
     font-weight: $font-weight-normal;
     margin-bottom: 0;
     display: flex;
   }
 
-  & input {
+  & .aui--checkbox-input {
     display: none;
   }
 
   &.is-reverse {
-    & label {
+    & .aui--checkbox-label-container {
       flex-direction: row-reverse;
       justify-content: space-between;
     }
@@ -99,7 +99,7 @@ $label-gap: 8px;
   &.disabled {
     cursor: not-allowed;
 
-    & label {
+    & .aui--checkbox-label-container {
       cursor: not-allowed;
     }
 
diff --git a/src/components/CheckboxGroup/styles.css b/src/components/CheckboxGroup/styles.css
index 3c42912b3..4722033f6 100644
--- a/src/components/CheckboxGroup/styles.css
+++ b/src/components/CheckboxGroup/styles.css
@@ -1,9 +1,15 @@
 @import url('../../styles/variable');
 
 $spacing: 24px;
+$border-radius: 6px;
+$gap: 12px;
+$focus-ring: 0 0 0 2px #fff, 0 0 0 4px $color-grey-700;
 
 .aui--checkbox-group {
   position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  gap: $gap;
 
   &.is-indented {
     left: $spacing;
@@ -16,4 +22,119 @@ $spacing: 24px;
       margin-left: calc($spacing * -1);
     }
   }
+
+  &.is-default {
+    align-items: flex-start;
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+  }
+
+  & > .aui--checkbox-box {
+    &:focus-visible {
+      outline: none;
+      box-shadow: $focus-ring;
+
+      & .aui--radio-input-icon,
+      & .aui--checkbox-input-icon {
+        box-shadow: none;
+      }
+    }
+  }
+
+  & > .aui--checkbox-default {
+    &:focus-visible {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  & div.aui--checkbox-box {
+    flex: 1;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    text-align: left;
+    border-radius: $border-radius;
+
+    & .aui--checkbox-label-container {
+      height: 100%;
+      padding: calc($grid-base-space * 1.5);
+      border-radius: $border-radius;
+      border-width: 1px;
+      border-style: solid;
+      border-color: $color-grey-300;
+      transition: 150ms ease;
+      background-color: $color-white;
+      gap: 10px;
+    }
+
+    &.is-disabled {
+      & .aui--checkbox-label-container {
+        cursor: default;
+        border-color: $color-grey-300;
+      }
+    }
+
+    &.is-selected {
+      & .aui--checkbox-label-container {
+        border-color: $color-grey-600;
+      }
+    }
+
+    & .aui--checkbox-label {
+      margin-left: 0;
+      display: flex;
+      align-items: flex-start;
+      gap: $grid-base-space;
+    }
+
+    & .aui--checkbox-label-text {
+      margin-bottom: 9px;
+      margin-top: 0;
+      font-size: $font-size-medium;
+      font-weight: bold;
+    }
+
+    &:not(.has-text) {
+      & .aui--checkbox-label-container {
+        align-items: center;
+      }
+
+      & .aui--checkbox-label-text {
+        margin-bottom: 0;
+      }
+
+      & .aui--checkbox-label {
+        align-items: center;
+      }
+    }
+
+    &.is-disabled:not(.is-selected) {
+      & .aui--checkbox-label-container {
+        background-color: $color-grey-200;
+      }
+    }
+
+    &:hover:not(.is-disabled) {
+      & .aui--checkbox-label-container {
+        background-color: $color-grey-200;
+      }
+    }
+
+    &:active:not(.is-disabled) {
+      & .aui--checkbox-label-container {
+        border-color: $color-grey-400;
+      }
+    }
+
+    & .aui--checkbox {
+      height: 100%;
+    }
+
+    & .aui--checkbox-icon {
+      display: flex;
+    }
+  }
 }
diff --git a/src/components/Radio/index.jsx b/src/components/Radio/index.jsx
index 10ec26956..8a09ebfc2 100644
--- a/src/components/Radio/index.jsx
+++ b/src/components/Radio/index.jsx
@@ -69,10 +69,11 @@ const Radio = ({
       }}
       {...expandDts(dts)}
     >
-      <label htmlFor={id}>
+      <label className="aui--radio-label-container" htmlFor={id}>
         <div className="aui--radio-input-container">
           <span className={iconClassName} />
           <input
+            className="aui--radio-input"
             data-testid="radio-input"
             type="radio"
             name={radioName}
diff --git a/src/components/Radio/styles.css b/src/components/Radio/styles.css
index a4c5130e8..d679f1643 100644
--- a/src/components/Radio/styles.css
+++ b/src/components/Radio/styles.css
@@ -2,7 +2,7 @@
 $label-gap: 8px;
 
 .aui--radio {
-  & label {
+  & .aui--radio-label-container {
     line-height: 16px;
     font-weight: $font-weight-normal;
     cursor: pointer;
@@ -11,14 +11,14 @@ $label-gap: 8px;
   }
 
   &.is-reverse {
-    & label {
+    & .aui--radio-label-container {
       flex-direction: row-reverse;
       justify-content: space-between;
     }
   }
 
   &.disabled {
-    & label {
+    & .aui--radio-label-container {
       cursor: not-allowed;
     }
   }
@@ -41,7 +41,7 @@ $label-gap: 8px;
       vertical-align: baseline;
     }
 
-    & input {
+    & .aui--radio-input {
       display: none;
     }
   }
diff --git a/src/components/RadioGroup/style.css b/src/components/RadioGroup/style.css
index 2a92fd947..6ab937911 100644
--- a/src/components/RadioGroup/style.css
+++ b/src/components/RadioGroup/style.css
@@ -1,12 +1,10 @@
 @import url('../../styles/variable');
 
 $border-radius: 6px;
-$border-width: 1px;
 $gap: 12px;
 $focus-ring: 0 0 0 2px #fff, 0 0 0 4px $color-grey-700;
 
-.aui--radio-group,
-.aui--checkbox-group {
+.aui--radio-group {
   display: flex;
   flex-flow: row wrap;
   gap: $gap;
@@ -19,29 +17,25 @@ $focus-ring: 0 0 0 2px #fff, 0 0 0 4px $color-grey-700;
     flex-direction: column;
   }
 
-  & > .aui--radio-box,
-  & > .aui--checkbox-box {
+  & > .aui--radio-box {
     &:focus-visible {
       outline: none;
       box-shadow: $focus-ring;
 
-      & .aui--radio-input-icon,
-      & .aui--checkbox-input-icon {
+      & .aui--radio-input-icon {
         box-shadow: none;
       }
     }
   }
 
-  & > .aui--radio-default,
-  & > .aui--checkbox-default {
+  & > .aui--radio-default {
     &:focus-visible {
       outline: none;
       box-shadow: none;
     }
   }
 
-  & .aui--radio-box,
-  & .aui--checkbox-box {
+  & div.aui--radio-box {
     flex: 1;
     margin: 0;
     border: 0;
@@ -49,7 +43,7 @@ $focus-ring: 0 0 0 2px #fff, 0 0 0 4px $color-grey-700;
     text-align: left;
     border-radius: $border-radius;
 
-    & label {
+    & .aui--radio-label-container {
       height: 100%;
       padding: calc($grid-base-space * 1.5);
       border-radius: $border-radius;
@@ -62,76 +56,70 @@ $focus-ring: 0 0 0 2px #fff, 0 0 0 4px $color-grey-700;
     }
 
     &.is-disabled {
-      & label {
+      & .aui--radio-label-container {
         cursor: default;
         border-color: $color-grey-300;
       }
     }
 
     &.is-selected {
-      & label {
+      & .aui--radio-label-container {
         border-color: $color-grey-600;
       }
     }
 
+    & .aui--radio-label {
+      margin-left: 0;
+      display: flex;
+      align-items: flex-start;
+      gap: $grid-base-space;
+    }
+
+    & .aui--radio-label-text {
+      margin-bottom: 9px;
+      margin-top: 0;
+      font-size: $font-size-medium;
+      font-weight: bold;
+    }
+
     &:not(.has-text) {
-      & label {
+      & .aui--radio-label-container {
         align-items: center;
       }
 
-      & .aui--radio-label-text,
-      & .aui--checkbox-label-text {
+      & .aui--radio-label-text {
         margin-bottom: 0;
       }
 
-      & .aui--radio-label,
-      & .aui--checkbox-label {
+      & .aui--radio-label {
         align-items: center;
       }
     }
 
     &.is-disabled:not(.is-selected) {
-      & label {
+      & .aui--radio-label-container {
         background-color: $color-grey-200;
       }
     }
 
     &:hover:not(.is-disabled) {
-      & label {
+      & .aui--radio-label-container {
         background-color: $color-grey-200;
       }
     }
 
     &:active:not(.is-disabled) {
-      & label {
+      & .aui--radio-label-container {
         border-color: $color-grey-400;
       }
     }
 
-    & .aui--radio,
-    & .aui--checkbox {
+    & .aui--radio {
       height: 100%;
     }
 
-    & .aui--radio-label,
-    & .aui--checkbox-label {
-      margin-left: 0;
-      display: flex;
-      align-items: flex-start;
-      gap: $grid-base-space;
-    }
-
-    & .aui--radio-icon,
-    & .aui--checkbox-icon {
+    & .aui--radio-icon {
       display: flex;
     }
-
-    & .aui--radio-label-text,
-    & .aui--checkbox-label-text {
-      margin-bottom: 9px;
-      margin-top: 0;
-      font-size: $font-size-medium;
-      font-weight: bold;
-    }
   }
 }
diff --git a/www/examples/CheckboxGroup.mdx b/www/examples/CheckboxGroup.mdx
index 18794dcd9..fbfd4b549 100644
--- a/www/examples/CheckboxGroup.mdx
+++ b/www/examples/CheckboxGroup.mdx
@@ -67,13 +67,13 @@ const Example = () => {
         name="hobbies"
         value={hobbies}
         onChange={handleGroupChange}
-        dts="radio-group-dts"
+        dts="checkbox-group-dts"
         style={{ width: 300 }}
       >
         <CheckboxGroup.Item
           value="swimming"
           label="Swimming"
-          dts="radio-dts"
+          dts="checkbox-dts"
           icon={<SvgSymbol href="./assets/svg-symbols.svg#list" />}
           text="this is a text description"
         />
@@ -99,10 +99,10 @@ const Example = () => {
         orientation="horizontal"
         value={hobbies}
         onChange={handleGroupChange}
-        dts="radio-group-dts"
+        dts="checkbox-group-dts"
         style={{ width: 600 }}
       >
-        <CheckboxGroup.Item value="swimming" label="Swimming" dts="radio-dts" />
+        <CheckboxGroup.Item value="swimming" label="Swimming" dts="checkbox-dts" />
         <CheckboxGroup.Item value="soccer" label="Soccer" />
         <CheckboxGroup.Item value="badminton" label="Badminton" />
       </CheckboxGroup>