RadioItem: Add disabled support

seek-oss · May 13, 2022 · 157df4b · 157df4b
1 parent 56124d0
commit 157df4b
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 4 deletions.
diff --git a/.changeset/forty-coins-unite.md b/.changeset/forty-coins-unite.md
@@ -0,0 +1,21 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - RadioItem
+---
+
+**RadioItem:** Add `disabled` support
+
+Provide support for disabling individual `RadioItem`s within a `RadioGroup`.
+
+**EXAMPLE USAGE:**
+```jsx
+<RadioGroup>
+  <RadioItem label="One" value="1" />
+  <RadioItem label="Two" value="2" />
+  <RadioItem label="Three" value="3" disabled={true} />
+</RadioGroup>
+```
diff --git a/generate-component-docs/__snapshots__/contract.test.ts.snap b/generate-component-docs/__snapshots__/contract.test.ts.snap
@@ -6673,6 +6673,7 @@ Object {
     children?: ReactNode
     data?: DataAttributeMap
     description?: ReactNode
+    disabled?: boolean
     label: ReactNode
     ref?: 
         | (instance: HTMLInputElement | null) => void

diff --git a/lib/components/RadioGroup/RadioGroup.docs.tsx b/lib/components/RadioGroup/RadioGroup.docs.tsx
@@ -157,8 +157,8 @@ const docs: ComponentDocs = {
       label: 'Disabled field',
       description: (
         <Text>
-          Mark the field as disabled by passing <Strong>true</Strong> to the{' '}
-          <Strong>disabled</Strong> prop.
+          Mark the entire <Strong>RadioGroup</Strong> as disabled by passing{' '}
+          <Strong>true</Strong> to the <Strong>disabled</Strong> prop.
         </Text>
       ),
       Example: ({ id }) =>
@@ -176,6 +176,30 @@ const docs: ComponentDocs = {
           </RadioGroup>,
         ),
     },
+    {
+      label: 'Disabling at item-level',
+      description: (
+        <Text>
+          Mark an individual <Strong>RadioItem</Strong> as disabled by passing{' '}
+          <Strong>true</Strong> to its <Strong>disabled</Strong> prop.
+        </Text>
+      ),
+      Example: ({ id, getState, setState }) =>
+        source(
+          <RadioGroup
+            id={id}
+            value={getState('radio')}
+            onChange={({ currentTarget: { value } }) =>
+              setState('radio', value)
+            }
+            label="Label"
+          >
+            <RadioItem label="One" value="1" />
+            <RadioItem label="Two" value="2" />
+            <RadioItem label="Three" value="3" disabled={true} />
+          </RadioGroup>,
+        ),
+    },
     {
       label: 'Item-level descriptions',
       description: (

diff --git a/lib/components/RadioGroup/RadioGroup.screenshots.tsx b/lib/components/RadioGroup/RadioGroup.screenshots.tsx
@@ -163,5 +163,21 @@ export const screenshots: ComponentScreenshot = {
         );
       },
     },
+    {
+      label: 'When disabled item',
+      Example: ({ handler }) => (
+        <RadioGroup
+          id="disableditem"
+          value="2"
+          onChange={handler}
+          label="Experience"
+        >
+          <RadioItem label="Less than one year" value="0" />
+          <RadioItem label="1 year" value="1" />
+          <RadioItem label="2 years" value="2" disabled />
+          <RadioItem label="3+ years " value="3" />
+        </RadioGroup>
+      ),
+    },
   ],
 };
diff --git a/lib/components/RadioGroup/RadioItem.tsx b/lib/components/RadioGroup/RadioItem.tsx
@@ -18,7 +18,6 @@ export interface RadioItemProps
     | 'required'
     | 'onChange'
     | 'id'
-    | 'disabled'
     | 'tone'
     | 'size'
   > {
@@ -59,7 +58,7 @@ export const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(
             : undefined
         }
         size={radioGroupContext.size}
-        disabled={radioGroupContext.disabled}
+        disabled={radioGroupContext.disabled || props.disabled}
         aria-describedby={radioGroupContext['aria-describedby']}
         tabIndex={tababble ? 0 : -1}
         inList={true}