Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][RadioGroup] Apply classnames #41681

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/mui-material/src/RadioGroup/RadioGroup.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ export interface RadioGroupProps extends Omit<FormGroupProps, 'onChange'> {
value?: any;
}

export type RadioGroupClassKey = keyof NonNullable<RadioGroupProps['classes']>;

/**
*
* Demos:
Expand Down
27 changes: 26 additions & 1 deletion packages/mui-material/src/RadioGroup/RadioGroup.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -66,7 +82,12 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {

return (
<RadioGroupContext.Provider value={contextValue}>
<FormGroup role="radiogroup" ref={handleRef} {...other}>
<FormGroup
role="radiogroup"
ref={handleRef}
className={clsx(classes.root, className)}
{...other}
>
{children}
</FormGroup>
</RadioGroupContext.Provider>
Expand All @@ -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.
*/
Expand Down
16 changes: 15 additions & 1 deletion packages/mui-material/src/RadioGroup/RadioGroup.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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('<RadioGroup />', () => {
Expand Down Expand Up @@ -413,4 +413,18 @@ describe('<RadioGroup />', () => {
);
});
});

it('should apply the classnames', () => {
render(
<RadioGroup name="group" row>
<Radio value={1} />
<Radio value={2} />
</RadioGroup>,
);

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);
});
});
3 changes: 3 additions & 0 deletions packages/mui-material/src/RadioGroup/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
3 changes: 3 additions & 0 deletions packages/mui-material/src/RadioGroup/index.js
Original file line number Diff line number Diff line change
@@ -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';
19 changes: 19 additions & 0 deletions packages/mui-material/src/RadioGroup/radioGroupClasses.ts
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 5 additions & 0 deletions packages/mui-material/src/styles/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,11 @@ export interface Components<Theme = unknown> {
styleOverrides?: ComponentsOverrides<Theme>['MuiRadio'];
variants?: ComponentsVariants<Theme>['MuiRadio'];
};
MuiRadioGroup?: {
defaultProps?: ComponentsProps['MuiRadioGroup'];
styleOverrides?: ComponentsOverrides<Theme>['MuiRadioGroup'];
variants?: ComponentsVariants<Theme>['MuiRadioGroup'];
};
MuiRating?: {
defaultProps?: ComponentsProps['MuiRating'];
styleOverrides?: ComponentsOverrides<Theme>['MuiRating'];
Expand Down
7 changes: 7 additions & 0 deletions packages/mui-material/src/styles/createTheme.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,13 @@ const theme = createTheme();
},
},
},
MuiRadioGroup: {
styleOverrides: {
row: {
justifyContent: 'space-between',
},
},
},
},
});
}
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-material/src/styles/overrides.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -222,6 +223,7 @@ export interface ComponentNameToClassKey {
MuiPopover: PopoverClassKey;
MuiPopper: PopperClassKey;
MuiRadio: RadioClassKey;
MuiRadioGroup: RadioGroupClassKey;
MuiRating: RatingClassKey;
MuiScopedCssBaseline: ScopedCssBaselineClassKey;
MuiSelect: SelectClassKey;
Expand Down
Loading