fix(styles): fix overflow styling on Radio Group and Checkbox and ali…

…gn styles with Pattern Library (#1110) * fix: fix overfllow bug * fix: fix overflow bug * chore: fix label * chore: address pr review * feat: sync up radio and checkbox styles with uxpin pattern library * chore: change wrapper classed to Checbox__wrap and Radio__wrap * Update packages/styles/forms.css Co-authored-by: Jason <jason@scurker.com> * Update packages/styles/forms.css Co-authored-by: Jason <jason@scurker.com> * chore: address pr review * feat: revise form.css to use more component-level variables * chore: address pr review * chore: address pr review * chore: address pr review * chore: address pr review * chore: address pr review * chore: fix a11y job * chore: address pr review * chore: address pr review * chore: address pr review * chore: address pr review * chore: address pr review * chore: address pr review * chore: address pr review * Update packages/styles/forms.css Co-authored-by: Jason <jason@scurker.com> * chore: revert change --------- Co-authored-by: Jason <jason@scurker.com>
dequelabs · Jul 21, 2023 · 4f8a9ba · 4f8a9ba
1 parent 720bc9b
commit 4f8a9ba
Show file tree

Hide file tree

Showing 4 changed files with 239 additions and 122 deletions.
diff --git a/docs/pages/components/Checkbox.mdx b/docs/pages/components/Checkbox.mdx
@@ -86,6 +86,49 @@ import { Checkbox } from '@deque/cauldron-react'
 </FieldWrap>
 ```
 
+### Checkbox List
+
+```jsx example
+<FieldWrap>
+<div className="Field__label" id="checkbox-list-label">Checkbox List Label</div>
+  <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="Unchecked Disabled Checkbox"
+    name="disabled-checkbox-list-unchecked"
+    value="1"
+  />
+  <Checkbox
+    disabled
+    checked
+    id="checkbox-list-checkbox-disabled-checked"
+    label="Checked Disabled Checkbox"
+    name="disabled-checkbox-list-checked"
+    value="1"
+  />
+  <Checkbox
+    error="You must check this checkbox to continue"
+    id="checkbox-error-list"
+    label="Error Checkbox"
+    name="error-checkbox-list"
+    value="1"
+  />
+</FieldWrap>
+```
+
 ### Checkbox with Description
 
 ```jsx example
@@ -115,6 +158,54 @@ import { Checkbox } from '@deque/cauldron-react'
 </FieldWrap>
 ```
 
+### Checkbox with Description List
+
+```jsx example
+<FieldWrap>
+<div className="Field__label" id="checkbox-list-with-description-label">Checkbox with Description List Label</div>
+  <Checkbox
+    id="description-checkbox-list-unchecked"
+    label="Description Checkbox Unchecked"
+    labelDescription="Additional text to describe the checkbox"
+    name="description-checkbox-list-unchecked"
+    value="1"
+  />
+  <Checkbox
+  checked
+    id="description-checkbox-list-checked"
+    label="Description Checkbox Checked"
+    labelDescription="Additional text to describe the checkbox"
+    name="description-checkbox-list-checked"
+    value="1"
+  />
+  <Checkbox
+    disabled
+    id="description-checkbox-list-disabled-unchecked"
+    label="Description Checkbox Disabled Unchecked"
+    labelDescription="Additional text to describe the checkbox"
+    name="description-checkbox-list-disabled-unchecked"
+    value="1"
+  />
+  <Checkbox
+    disabled
+    checked
+    id="description-checkbox-list-disabled-checked"
+    label="Description Checkbox Disabled Checked"
+    labelDescription="Additional text to describe the checkbox"
+    name="description-checkbox-list-disabled-checked"
+    value="1"
+  />
+  <Checkbox
+    error="You must check this checkbox to continue"
+    id="description-error-checkbox-list"
+    label="Description Error Checkbox"
+    labelDescription="Additional text to describe the checkbox"
+    name="description-error-checkbox-list"
+    value="1"
+  />
+</FieldWrap>
+```
+
 ## Props
 
 <ComponentProps

diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
@@ -71,7 +71,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     }
 
     return (
-      <>
+      <div className="Checkbox__wrap">
         <div className={classNames('Checkbox is--flex-row', className)}>
           <input
             id={id}
@@ -101,7 +101,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             {...other}
           />
           <label
-            className={classNames('Field__label', {
+            className={classNames('Checkbox__label', {
               'Field__label--disabled': disabled
             })}
             htmlFor={id}
@@ -124,18 +124,18 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               }
             }}
           />
-          {labelDescription && (
-            <span id={labelDescriptionId} className="Field__labelDescription">
-              {labelDescription}
-            </span>
-          )}
-          {error && (
-            <div id={errorId} className="Error">
-              {error}
-            </div>
-          )}
         </div>
-      </>
+        {labelDescription && (
+          <span id={labelDescriptionId} className="Field__labelDescription">
+            {labelDescription}
+          </span>
+        )}
+        {error && (
+          <div id={errorId} className="Error">
+            {error}
+          </div>
+        )}
+      </div>
     );
   }
 );

diff --git a/packages/react/src/components/RadioGroup/index.tsx b/packages/react/src/components/RadioGroup/index.tsx
@@ -71,47 +71,49 @@ const RadioGroup = ({
     const isFocused = focusIndex === index;
 
     return (
-      <div className={classNames('Radio is--flex-row', className)} key={id}>
-        <input
-          type="radio"
-          name={name}
-          value={radioValue}
-          id={id}
-          ref={input => {
-            if (!input) {
-              return;
-            }
-
-            inputs.current.push(input);
-          }}
-          onFocus={() => onRadioFocus(index)}
-          onBlur={() => onRadioBlur()}
-          onChange={() => {
-            handleChange(radioValue);
-            onChange(radio, inputs.current?.[index]);
-          }}
-          disabled={disabled}
-          checked={isChecked}
-          aria-describedby={labelDescription ? `${id}Desc` : undefined}
-          {...other}
-        />
-        <label
-          htmlFor={id}
-          className={classNames('Field__label', {
-            'Field__label--disabled': disabled
-          })}
-        >
-          {label}
-        </label>
-        <Icon
-          className={classNames('Radio__overlay', {
-            'Radio__overlay--focused': isFocused,
-            'Radio__overlay--disabled': disabled
-          })}
-          type={isChecked ? 'radio-checked' : 'radio-unchecked'}
-          aria-hidden="true"
-          onClick={() => onRadioClick(index)}
-        />
+      <div className="Radio__wrap" key={id}>
+        <div className={classNames('Radio is--flex-row', className)}>
+          <input
+            type="radio"
+            name={name}
+            value={radioValue}
+            id={id}
+            ref={input => {
+              if (!input) {
+                return;
+              }
+
+              inputs.current.push(input);
+            }}
+            onFocus={() => onRadioFocus(index)}
+            onBlur={() => onRadioBlur()}
+            onChange={() => {
+              handleChange(radioValue);
+              onChange(radio, inputs.current?.[index]);
+            }}
+            disabled={disabled}
+            checked={isChecked}
+            aria-describedby={labelDescription ? `${id}Desc` : undefined}
+            {...other}
+          />
+          <label
+            htmlFor={id}
+            className={classNames('Radio__label', {
+              'Field__label--disabled': disabled
+            })}
+          >
+            {label}
+          </label>
+          <Icon
+            className={classNames('Radio__overlay', {
+              'Radio__overlay--focused': isFocused,
+              'Radio__overlay--disabled': disabled
+            })}
+            type={isChecked ? 'radio-checked' : 'radio-unchecked'}
+            aria-hidden="true"
+            onClick={() => onRadioClick(index)}
+          />
+        </div>
         {labelDescription && (
           <span
             id={`${id}Desc`}