fix(RadioButton): fixes v11 disabled styles and explicitly includes d…

…isabled prop (#10222) * fix: radio-btn disabled styles * fix: explicitly include disabled
carbon-design-system · Dec 7, 2021 · 02e4246 · 02e4246
1 parent 733b9ed
commit 02e4246
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/packages/react/src/components/RadioButton/next/RadioButton.js b/packages/react/src/components/RadioButton/next/RadioButton.js
@@ -9,6 +9,7 @@ import { Text } from '../../Text';
 const RadioButton = React.forwardRef(function RadioButton(
   {
     className,
+    disabled,
     hideLabel,
     id,
     labelPosition = 'right',
@@ -50,6 +51,7 @@ const RadioButton = React.forwardRef(function RadioButton(
         onChange={handleOnChange}
         id={uniqueId}
         ref={ref}
+        disabled={disabled}
       />
       <label htmlFor={uniqueId} className={`${prefix}--radio-button__label`}>
         <span className={`${prefix}--radio-button__appearance`} />

diff --git a/packages/react/src/components/RadioButton/next/RadioButton.stories.js b/packages/react/src/components/RadioButton/next/RadioButton.stories.js
@@ -17,7 +17,7 @@ export const Default = () => {
       legendText="Radio button heading"
       name="radio-button-group"
       defaultSelected="radio-1">
-      <RadioButton labelText="Option 1" value="radio-1" id="radio-1" />
+      <RadioButton labelText="Option 1" value="radio-1" id="radio-1" disabled />
       <RadioButton labelText="Option 2" value="radio-2" id="radio-2" />
       <RadioButton labelText="Option 3" value="radio-3" id="radio-3" />
     </RadioButtonGroup>

diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss
@@ -121,15 +121,15 @@ $radio-border-width: 1px !default;
     }
   }
 
-  .#{$prefix}--radio-button:button-disabled + .#{$prefix}--radio-button__label {
+  .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
     color: $button-disabled;
     cursor: not-allowed;
   }
 
-  .#{$prefix}--radio-button:button-disabled
+  .#{$prefix}--radio-button:disabled
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance,
-  .#{$prefix}--radio-button:button-disabled:checked
+  .#{$prefix}--radio-button:disabled:checked
     + .#{$prefix}--radio-button__label
     .#{$prefix}--radio-button__appearance {
     border-color: $border-disabled;