fix: allow checkbox group within radio group

Adslot · Mar 2, 2023 · 5d524db · 5d524db
1 parent 96a71b2
commit 5d524db
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,37 +17,33 @@ $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;
     padding: 0;
     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;
-    }
   }
 }