From 98be46d984eb7f715937505403c629f37a832486 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 9 Sep 2024 17:19:55 +0200 Subject: [PATCH] [Radio] Fix disabled state styling regression (#43592) --- packages/mui-material/src/Radio/Radio.js | 23 ++++++++++++-- .../fixtures/Radio/RadioDisabledState.js | 31 +++++++++++++++++++ 2 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 test/regressions/fixtures/Radio/RadioDisabledState.js diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 40e47b90100cc1..d3707e7bffaa96 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -9,6 +9,7 @@ import SwitchBase from '../internal/SwitchBase'; import RadioButtonIcon from './RadioButtonIcon'; import capitalize from '../utils/capitalize'; import createChainedFunction from '../utils/createChainedFunction'; +import useFormControl from '../FormControl/useFormControl'; import useRadioGroup from '../RadioGroup/useRadioGroup'; import radioClasses, { getRadioUtilityClass } from './radioClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; @@ -51,7 +52,7 @@ const RadioRoot = styled(SwitchBase, { }, variants: [ { - props: { color: 'default', disableRipple: false }, + props: { color: 'default', disabled: false, disableRipple: false }, style: { '&:hover': { backgroundColor: theme.vars @@ -63,7 +64,7 @@ const RadioRoot = styled(SwitchBase, { ...Object.entries(theme.palette) .filter(([, palette]) => palette && palette.main) .map(([color]) => ({ - props: { color, disableRipple: false }, + props: { color, disabled: false, disableRipple: false }, style: { '&:hover': { backgroundColor: theme.vars @@ -75,7 +76,7 @@ const RadioRoot = styled(SwitchBase, { ...Object.entries(theme.palette) .filter(([, palette]) => palette && palette.main) .map(([color]) => ({ - props: { color }, + props: { color, disabled: false }, style: { [`&.${radioClasses.checked}`]: { color: (theme.vars || theme).palette[color].main, @@ -121,11 +122,26 @@ const Radio = React.forwardRef(function Radio(inProps, ref) { onChange: onChangeProp, size = 'medium', className, + disabled: disabledProp, disableRipple = false, ...other } = props; + + const muiFormControl = useFormControl(); + + let disabled = disabledProp; + + if (muiFormControl) { + if (typeof disabled === 'undefined') { + disabled = muiFormControl.disabled; + } + } + + disabled ??= false; + const ownerState = { ...props, + disabled, disableRipple, color, size, @@ -154,6 +170,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) { checkedIcon={React.cloneElement(checkedIcon, { fontSize: defaultCheckedIcon.props.fontSize ?? size, })} + disabled={disabled} ownerState={ownerState} classes={classes} name={name} diff --git a/test/regressions/fixtures/Radio/RadioDisabledState.js b/test/regressions/fixtures/Radio/RadioDisabledState.js new file mode 100644 index 00000000000000..617d4181f6117c --- /dev/null +++ b/test/regressions/fixtures/Radio/RadioDisabledState.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import Radio from '@mui/material/Radio'; + +export default function RadioButtonsDisabled() { + const [selectedValue, setSelectedValue] = React.useState('a'); + + const handleChange = (event) => { + setSelectedValue(event.target.value); + }; + + return ( +
+ + +
+ ); +}