[material-ui][Radio] Add slots and slotProps

docs/pages/material-ui/api/radio.json

@@ -32,6 +32,14 @@
       },
       "default": "'medium'"
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ root?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -43,6 +51,14 @@
   },
   "name": "Radio",
   "imports": ["import Radio from '@mui/material/Radio';", "import { Radio } from '@mui/material';"],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "SwitchBase",
+      "class": "MuiRadio-root"
+    }
+  ],
   "classes": [
     {
       "key": "checked",
@@ -68,12 +84,6 @@
       "description": "State class applied to the root element if `disabled={true}`.",
       "isGlobal": true
     },
-    {
-      "key": "root",
-      "className": "MuiRadio-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "sizeSmall",
       "className": "MuiRadio-sizeSmall",

docs/translations/api-docs/radio/radio.json

@@ -28,6 +28,8 @@
     "size": {
       "description": "The size of the component. <code>small</code> is equivalent to the dense radio styling."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -54,11 +56,11 @@
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
-    "root": { "description": "Styles applied to the root element." },
     "sizeSmall": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     }
-  }
+  },
+  "slotDescriptions": { "root": "The component that renders the root slot." }
 }

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

@@ -1,16 +1,47 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import {
+  CreateSlotsAndSlotProps,
+  SlotProps,
+  InternalStandardProps as StandardProps,
+  Theme,
+} from '..';
 import { SwitchBaseProps } from '../internal/SwitchBase';
 import { RadioClasses } from './radioClasses';
 
+export interface RadioRootSlotPropsOverrides {}
+
+export interface RadioSlots {
+  /**
+   * The component that renders the root slot.
+   * @default SwitchBase
+   */
+  root: React.ElementType;
+}
+
+export type RadioSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  RadioSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the SwitchBase.
+     */
+    root: SlotProps<
+      React.ElementType<SwitchBaseProps>,
+      RadioRootSlotPropsOverrides,
+      RadioOwnerState
+    >;
+  }
+>;
+
 export interface RadioPropsSizeOverrides {}
 
 export interface RadioPropsColorOverrides {}
 
 export interface RadioProps
-  extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type'> {
+  extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type'>,
+    RadioSlotsAndSlotProps {
   /**
    * The icon to display when the component is checked.
    * @default <RadioButtonIcon checked />
@@ -51,6 +82,8 @@ export interface RadioProps
   sx?: SxProps<Theme>;
 }
 
+export interface RadioOwnerState extends RadioProps {}
+
 /**
  *
  * Demos:

packages/mui-material/src/Radio/Radio.js

@@ -18,6 +18,7 @@ import memoTheme from '../utils/memoTheme';
 import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
 
 import { useDefaultProps } from '../DefaultPropsProvider';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, color, size } = ownerState;
@@ -125,6 +126,8 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     className,
     disabled: disabledProp,
     disableRipple = false,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -164,22 +167,33 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     }
   }
 
+  const externalForwardedProps = {
+    ...other,
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: RadioRoot,
+    ref,
+    className: clsx(classes.root, className),
+    ownerState,
+    externalForwardedProps,
+  });
+
   return (
-    <RadioRoot
+    <RootSlot
       type="radio"
       icon={React.cloneElement(icon, { fontSize: defaultIcon.props.fontSize ?? size })}
       checkedIcon={React.cloneElement(checkedIcon, {
         fontSize: defaultCheckedIcon.props.fontSize ?? size,
       })}
       disabled={disabled}
-      ownerState={ownerState}
       classes={classes}
       name={name}
       checked={checked}
       onChange={onChange}
-      ref={ref}
-      className={clsx(classes.root, className)}
-      {...other}
+      {...rootProps}
     />
   );
 });
@@ -268,6 +282,20 @@ Radio.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['medium', 'small']),
     PropTypes.string,
   ]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-material/src/Radio/Radio.test.js

@@ -18,6 +18,12 @@ describe('<Radio />', () => {
     testVariantProps: { color: 'secondary' },
     refInstanceof: window.HTMLSpanElement,
     skip: ['componentProp', 'componentsProp'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+        testWithElement: null,
+      },
+    },
   }));
 
   describe('styleSheet', () => {