feat: add disable property and styles to toggle radio component (#8460)

* feat: add disable property and styles to toggle radio component * feat: removed forHtml attr when not required * chore: bump version in changelog, existing version in PR --------- Co-authored-by: Will McVay <[email protected]>
reapit · Feb 7, 2023 · aa4e2bc · aa4e2bc
1 parent 24eade3
commit aa4e2bc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
diff --git a/packages/elements/src/components/toggle/__styles__/index.ts b/packages/elements/src/components/toggle/__styles__/index.ts
@@ -97,6 +97,10 @@ export const ElToggleRadio = styled.input`
     background: var(--intent-primary);
     color: var(--color-white);
   }
+
+  &:disabled + label ${ElToggleRadioItem} {
+    opacity: 0.35;
+  }
 `
 
 export const ElToggleRadioLabel = styled.label`

diff --git a/packages/elements/src/components/toggle/toggle.stories.mdx b/packages/elements/src/components/toggle/toggle.stories.mdx
@@ -134,3 +134,37 @@ Where rendering a toggle on a white background, you should apply the hasGreyBg p
 </Canvas>
 
 <RenderHtmlMarkup component="Toggle" story="Toggle RadioSelectProps - Grey Bg" />
+
+## Toggle Disabled
+
+
+<Canvas>
+  <Story name="Toggle Radio - Disabled">
+    <ToggleRadio
+      name="my-cool-toggle-radio"
+      disabled={true}
+      options={[
+        {
+          id: 'option-1',
+          value: 'option-1',
+          text: 'Option 1',
+          isChecked: true,
+        },
+        {
+          id: 'option-2',
+          value: 'option-2',
+          text: 'Option 2',
+          isChecked: false,
+        },
+        {
+          id: 'option-3',
+          value: 'option-3',
+          text: 'Option 3',
+          isChecked: false,
+        },
+      ]}
+    />
+  </Story>
+</Canvas>
+
+<RenderHtmlMarkup component="Toggle" story="Toggle Radio - Disabled" />
diff --git a/packages/elements/src/components/toggle/toggle.tsx b/packages/elements/src/components/toggle/toggle.tsx
@@ -34,6 +34,7 @@ export interface ToggleRadioOption {
 export interface ToggleRadioProps extends HTMLAttributes<HTMLInputElement> {
   options: ToggleRadioOption[]
   name: string
+  disabled?: boolean
   isFullWidth?: boolean
   hasGreyBg?: boolean
 }
@@ -70,7 +71,7 @@ export const Toggle: ToggleWrapped = forwardRef(
 
 export const ToggleRadio: ToggleRadioWrapped = forwardRef(
   (
-    { className, isFullWidth, hasGreyBg, name, options, ...rest },
+    { className, isFullWidth, hasGreyBg, name, options, disabled, ...rest },
     ref: ForwardedRef<InputHTMLAttributes<HTMLInputElement>>,
   ) => {
     if (isFullWidth) {
@@ -85,11 +86,15 @@ export const ToggleRadio: ToggleRadioWrapped = forwardRef(
               name={name}
               value={value}
               type="radio"
+              disabled={disabled}
               {...rest}
               defaultChecked={isChecked}
               ref={(ref as unknown) as LegacyRef<HTMLInputElement>}
             />
-            <ElToggleRadioLabel htmlFor={id} className={cx(hasGreyBg && elHasGreyBg, isFullWidth && elToggleFullWidth)}>
+            <ElToggleRadioLabel
+              htmlFor={!disabled ? id : undefined}
+              className={cx(hasGreyBg && elHasGreyBg, isFullWidth && elToggleFullWidth)}
+            >
               <ElToggleRadioItem>{text}</ElToggleRadioItem>
             </ElToggleRadioLabel>
           </Fragment>

diff --git a/packages/elements/src/storybook/changelog.stories.mdx b/packages/elements/src/storybook/changelog.stories.mdx
@@ -14,6 +14,10 @@ We will publish release version history and changes here. Where possible, we wil
 
 Beta versions should be relatively stable but subject to occssional breaking changes.
 
+### **3.10.2 - 07/02/23**
+
+- Add disabled styling and property to `ToggleRadio` component
+
 ### **3.10.1 - 07/02/23**
 
 - `ButtonGroup` now has correct 12px spacing between buttons