From f1d87cf31a26a84149e8992aaf22a2207c97c09f Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Wed, 27 Mar 2024 12:32:02 +0530 Subject: [PATCH] [material-ui][RadioGroup] Apply classnames (#41610) --- .../src/RadioGroup/RadioGroup.d.ts | 2 -- .../mui-material/src/RadioGroup/RadioGroup.js | 27 ++++++++++++++++++- .../src/RadioGroup/RadioGroup.test.js | 16 ++++++++++- .../mui-material/src/RadioGroup/index.d.ts | 3 +++ packages/mui-material/src/RadioGroup/index.js | 3 +++ .../src/RadioGroup/radioGroupClasses.ts | 19 +++++++++++++ .../mui-material/src/styles/components.d.ts | 5 ++++ .../src/styles/createTheme.spec.ts | 7 +++++ .../mui-material/src/styles/overrides.d.ts | 2 ++ 9 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 packages/mui-material/src/RadioGroup/radioGroupClasses.ts diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.d.ts b/packages/mui-material/src/RadioGroup/RadioGroup.d.ts index 7e82b72243c1b5..3cfdf5713537e9 100644 --- a/packages/mui-material/src/RadioGroup/RadioGroup.d.ts +++ b/packages/mui-material/src/RadioGroup/RadioGroup.d.ts @@ -25,8 +25,6 @@ export interface RadioGroupProps extends Omit { value?: any; } -export type RadioGroupClassKey = keyof NonNullable; - /** * * Demos: diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.js b/packages/mui-material/src/RadioGroup/RadioGroup.js index c463f791963914..244ec740904742 100644 --- a/packages/mui-material/src/RadioGroup/RadioGroup.js +++ b/packages/mui-material/src/RadioGroup/RadioGroup.js @@ -1,18 +1,32 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import composeClasses from '@mui/utils/composeClasses'; import FormGroup from '../FormGroup'; +import { getRadioGroupUtilityClass } from './radioGroupClasses'; import useForkRef from '../utils/useForkRef'; import useControlled from '../utils/useControlled'; import RadioGroupContext from './RadioGroupContext'; import useId from '../utils/useId'; +const useUtilityClasses = (props) => { + const { classes, row, error } = props; + + const slots = { + root: ['root', row && 'row', error && 'error'], + }; + + return composeClasses(slots, getRadioGroupUtilityClass, classes); +}; + const RadioGroup = React.forwardRef(function RadioGroup(props, ref) { const { // private // eslint-disable-next-line react/prop-types actions, children, + className, defaultValue, name: nameProp, onChange, @@ -21,6 +35,8 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) { } = props; const rootRef = React.useRef(null); + const classes = useUtilityClasses(props); + const [value, setValueState] = useControlled({ controlled: valueProp, default: defaultValue, @@ -66,7 +82,12 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) { return ( - + {children} @@ -82,6 +103,10 @@ RadioGroup.propTypes /* remove-proptypes */ = { * The content of the component. */ children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.test.js b/packages/mui-material/src/RadioGroup/RadioGroup.test.js index 1617ea18a89b57..ad9c3d2068eebe 100644 --- a/packages/mui-material/src/RadioGroup/RadioGroup.test.js +++ b/packages/mui-material/src/RadioGroup/RadioGroup.test.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import { act, createRenderer, fireEvent, screen } from '@mui-internal/test-utils'; import FormGroup from '@mui/material/FormGroup'; import Radio from '@mui/material/Radio'; -import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup'; +import RadioGroup, { useRadioGroup, radioGroupClasses as classes } from '@mui/material/RadioGroup'; import describeConformance from '../../test/describeConformance'; describe('', () => { @@ -413,4 +413,18 @@ describe('', () => { ); }); }); + + it('should apply the classnames', () => { + render( + + + + , + ); + + const radiogroup = screen.getByRole('radiogroup'); + expect(radiogroup).to.have.class(classes.root); + expect(radiogroup).to.have.class(classes.row); + expect(radiogroup).not.to.have.class(classes.error); + }); }); diff --git a/packages/mui-material/src/RadioGroup/index.d.ts b/packages/mui-material/src/RadioGroup/index.d.ts index 46f367a42ec10e..15b1fb160d9e73 100644 --- a/packages/mui-material/src/RadioGroup/index.d.ts +++ b/packages/mui-material/src/RadioGroup/index.d.ts @@ -2,3 +2,6 @@ export { default } from './RadioGroup'; export * from './RadioGroup'; export { default as useRadioGroup, RadioGroupState } from './useRadioGroup'; + +export { default as radioGroupClasses } from './radioGroupClasses'; +export * from './radioGroupClasses'; diff --git a/packages/mui-material/src/RadioGroup/index.js b/packages/mui-material/src/RadioGroup/index.js index 7836938d6aa275..9db6dab53515ea 100644 --- a/packages/mui-material/src/RadioGroup/index.js +++ b/packages/mui-material/src/RadioGroup/index.js @@ -1,3 +1,6 @@ 'use client'; export { default } from './RadioGroup'; export { default as useRadioGroup } from './useRadioGroup'; + +export { default as radioGroupClasses } from './radioGroupClasses'; +export * from './radioGroupClasses'; diff --git a/packages/mui-material/src/RadioGroup/radioGroupClasses.ts b/packages/mui-material/src/RadioGroup/radioGroupClasses.ts new file mode 100644 index 00000000000000..32214a26b5d344 --- /dev/null +++ b/packages/mui-material/src/RadioGroup/radioGroupClasses.ts @@ -0,0 +1,19 @@ +import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; +import generateUtilityClass from '@mui/utils/generateUtilityClass'; +import { FormGroupClasses } from '../FormGroup'; + +export type RadioGroupClassKey = keyof FormGroupClasses; + +export type RadioGroupClasses = FormGroupClasses; + +export function getRadioGroupUtilityClass(slot: string): string { + return generateUtilityClass('MuiRadioGroup', slot); +} + +const radioGroupClasses: RadioGroupClasses = generateUtilityClasses('MuiRadioGroup', [ + 'root', + 'row', + 'error', +]); + +export default radioGroupClasses; diff --git a/packages/mui-material/src/styles/components.d.ts b/packages/mui-material/src/styles/components.d.ts index 39570e05b6d3ed..6878793553cb0e 100644 --- a/packages/mui-material/src/styles/components.d.ts +++ b/packages/mui-material/src/styles/components.d.ts @@ -392,6 +392,11 @@ export interface Components { styleOverrides?: ComponentsOverrides['MuiRadio']; variants?: ComponentsVariants['MuiRadio']; }; + MuiRadioGroup?: { + defaultProps?: ComponentsProps['MuiRadioGroup']; + styleOverrides?: ComponentsOverrides['MuiRadioGroup']; + variants?: ComponentsVariants['MuiRadioGroup']; + }; MuiRating?: { defaultProps?: ComponentsProps['MuiRating']; styleOverrides?: ComponentsOverrides['MuiRating']; diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts index 7cccf54140adca..5ab7673a83aba0 100644 --- a/packages/mui-material/src/styles/createTheme.spec.ts +++ b/packages/mui-material/src/styles/createTheme.spec.ts @@ -148,6 +148,13 @@ const theme = createTheme(); }, }, }, + MuiRadioGroup: { + styleOverrides: { + row: { + justifyContent: 'space-between', + }, + }, + }, }, }); } diff --git a/packages/mui-material/src/styles/overrides.d.ts b/packages/mui-material/src/styles/overrides.d.ts index 49e09e5ec82f7b..408052a32e9cb5 100644 --- a/packages/mui-material/src/styles/overrides.d.ts +++ b/packages/mui-material/src/styles/overrides.d.ts @@ -77,6 +77,7 @@ import { PaginationItemClassKey } from '../PaginationItem'; import { PaperClassKey } from '../Paper'; import { PopoverClassKey } from '../Popover'; import { RadioClassKey } from '../Radio'; +import { RadioGroupClassKey } from '../RadioGroup'; import { RatingClassKey } from '../Rating'; import { ScopedCssBaselineClassKey } from '../ScopedCssBaseline'; import { SelectClassKey } from '../Select'; @@ -222,6 +223,7 @@ export interface ComponentNameToClassKey { MuiPopover: PopoverClassKey; MuiPopper: PopperClassKey; MuiRadio: RadioClassKey; + MuiRadioGroup: RadioGroupClassKey; MuiRating: RatingClassKey; MuiScopedCssBaseline: ScopedCssBaselineClassKey; MuiSelect: SelectClassKey;