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

packages/mui-material/src/RadioGroup/RadioGroup.d.ts

@@ -25,8 +25,6 @@ export interface RadioGroupProps extends Omit<FormGroupProps, 'onChange'> {
   value?: any;
 }
 
-export type RadioGroupClassKey = keyof NonNullable<RadioGroupProps['classes']>;
-
 /**
  *
  * Demos:

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 (
     <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>
@@ -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.
    */

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('<RadioGroup />', () => {
@@ -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);
+  });
 });

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';

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';

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;

packages/mui-material/src/styles/components.d.ts

@@ -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'];

packages/mui-material/src/styles/createTheme.spec.ts

@@ -148,6 +148,13 @@ const theme = createTheme();
           },
         },
       },
+      MuiRadioGroup: {
+        styleOverrides: {
+          row: {
+            justifyContent: 'space-between',
+          },
+        },
+      },
     },
   });
 }

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;