chore: address pr review

dequelabs · Jul 21, 2023 · 41fd61b · 41fd61b
1 parent 5993768
commit 41fd61b
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 9 deletions.
diff --git a/docs/pages/components/Checkbox.mdx b/docs/pages/components/Checkbox.mdx
@@ -86,6 +86,48 @@ import { Checkbox } from '@deque/cauldron-react'
 </FieldWrap>
 ```
 
+### Checkbox List
+
+```jsx example
+<FieldWrap>
+  <Checkbox
+    id="checkbox-list-unchecked"
+    label="Unchecked Checkbox"
+    name="unchecked-checkbox-list"
+    value="1"
+  />
+  <Checkbox
+    checked
+    id="checkbox-list-checked"
+    label="Checked Checkbox"
+    name="checked-checkbox-list"
+    value="1"
+  />
+  <Checkbox
+    disabled
+    id="checkbox-list-checkbox-disabled-unchecked"
+    label="Checked Disabled Checkbox"
+    name="disabled-checkbox-list-unchecked"
+    value="1"
+  />
+  <Checkbox
+    disabled
+    checked
+    id="checkbox-list-checkbox-disabled-checked"
+    label="Unchecked Disabled Checkbox"
+    name="disabled-checkbox-list-checked"
+    value="1"
+  />
+  <Checkbox
+    error="You must check this checkbox to continue"
+    id="checkbox-error"
+    label="Error Checkbox"
+    name="error-checkbox"
+    value="1"
+  />
+</FieldWrap>
+```
+
 ### Checkbox with Description
 
 ```jsx example

diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
@@ -101,7 +101,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             {...other}
           />
           <label
-            className={classNames('Field__label', {
+            className={classNames('Field__label', 'Checkbox__label', {
               'Field__label--disabled': disabled
             })}
             htmlFor={id}

diff --git a/packages/react/src/components/RadioGroup/index.tsx b/packages/react/src/components/RadioGroup/index.tsx
@@ -98,7 +98,7 @@ const RadioGroup = ({
           />
           <label
             htmlFor={id}
-            className={classNames('Field__label', {
+            className={classNames('Field__label', 'Radio__label', {
               'Field__label--disabled': disabled
             })}
           >

diff --git a/packages/styles/forms.css b/packages/styles/forms.css
@@ -145,7 +145,7 @@ textarea.Field--has-error,
   color: var(--field-border-color-error);
 }
 
-.Checkbox__overlay:active.Field--has-error:not(.Checkbox__overlay--disabled) {
+.Icon--checkbox-unchecked.Checkbox__overlay:active.Field--has-error:not(.Checkbox__overlay--disabled) {
   background-color: var(--icon-error-active-color);
 }
 
@@ -192,6 +192,7 @@ textarea.Field--has-error:focus:hover,
   color: var(--error-text-color);
   border-top: 1px solid var(--error-border-color);
   text-align: left;
+  font-weight: var(--font-weight-normal);
   font-size: var(--text-size-smallest);
   margin-top: var(--space-half);
   margin-left: calc(var(--icon-size) + 2px + var(--space-half));
@@ -219,6 +220,11 @@ textarea.Field--has-error:focus:hover,
   margin-bottom: var(--space-smallest);
 }
 
+.Checkbox__wrap:last-of-type,
+.Radio__wrap:last-of-type {
+  margin-bottom: 0;
+}
+
 .Radio--inline .Radio__wrap {
   margin-bottom: 0;
 }
@@ -239,11 +245,6 @@ textarea.Field--has-error:focus:hover,
   gap: var(--space-small);
 }
 
-.Checkbox__wrap:last-of-type,
-.Radio__wrap:last-of-type {
-  margin-bottom: 0;
-}
-
 .Checkbox .Field__label,
 .Radio .Field__label {
   margin-bottom: 0;
@@ -252,7 +253,13 @@ textarea.Field--has-error:focus:hover,
 
 .Checkbox + .Field__labelDescription,
 .Radio + .Field__labelDescription {
-  margin-top: var(--space-smallest);
+  margin-top: var(--space-half);
+  margin-bottom: var(--space-small);
+}
+
+.Checkbox__wrap:last-of-type .Checkbox + .Field__labelDescription,
+.Radio__wrap:last-of-type .Radio + .Field__labelDescription {
+  margin-bottom: 0;
 }
 
 .Field__label {
@@ -261,10 +268,16 @@ textarea.Field--has-error:focus:hover,
   text-align: left;
   color: var(--field-label-text-color);
   font-size: var(--text-size-small);
+  font-weight: var(--font-weight-medium);
   margin-bottom: var(--space-smallest);
   cursor: default;
 }
 
+.Field__label .Checkbox__label,
+.Field__label .Radio__label {
+  margin-bottom: var(--space-smallest);
+}
+
 .Field__required-text {
   flex: 1;
   text-align: right;
@@ -324,6 +337,7 @@ textarea.Field--has-error:focus:hover,
   flex-basis: 100%;
   color: var(--field-label-description-text-color);
   font-size: var(--text-size-small);
+  font-weight: var(--font-weight-normal);
   line-height: 1;
   margin-top: var(--space-half);
   margin-left: calc(24px + 2px + var(--space-half));