diff --git a/docs/pages/material-ui/api/checkbox.json b/docs/pages/material-ui/api/checkbox.json index 231480e02ad07a..b3c7c83575f0b3 100644 --- a/docs/pages/material-ui/api/checkbox.json +++ b/docs/pages/material-ui/api/checkbox.json @@ -34,6 +34,14 @@ }, "default": "'medium'" }, + "slotProps": { + "type": { "name": "shape", "description": "{ root?: func
| object }" }, + "default": "{}" + }, + "slots": { + "type": { "name": "shape", "description": "{ root?: elementType }" }, + "default": "{}" + }, "sx": { "type": { "name": "union", @@ -48,6 +56,14 @@ "import Checkbox from '@mui/material/Checkbox';", "import { Checkbox } from '@mui/material';" ], + "slots": [ + { + "name": "root", + "description": "The component that renders the root slot.", + "default": "SwitchBase", + "class": "MuiCheckbox-root" + } + ], "classes": [ { "key": "checked", @@ -79,12 +95,6 @@ "description": "State class applied to the root element if `indeterminate={true}`.", "isGlobal": false }, - { - "key": "root", - "className": "MuiCheckbox-root", - "description": "Class name applied to the root element.", - "isGlobal": false - }, { "key": "sizeMedium", "className": "MuiCheckbox-sizeMedium", diff --git a/docs/translations/api-docs/checkbox/checkbox.json b/docs/translations/api-docs/checkbox/checkbox.json index b12f47326deb34..286c2c90396203 100644 --- a/docs/translations/api-docs/checkbox/checkbox.json +++ b/docs/translations/api-docs/checkbox/checkbox.json @@ -36,6 +36,8 @@ "size": { "description": "The size of the component. small is equivalent to the dense checkbox 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." }, @@ -69,7 +71,6 @@ "nodeName": "the root element", "conditions": "indeterminate={true}" }, - "root": { "description": "Class name applied to the root element." }, "sizeMedium": { "description": "State class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -80,5 +81,6 @@ "nodeName": "the root element", "conditions": "size=\"small\"" } - } + }, + "slotDescriptions": { "root": "The component that renders the root slot." } } diff --git a/packages/mui-material/src/Checkbox/Checkbox.d.ts b/packages/mui-material/src/Checkbox/Checkbox.d.ts index 9d9d6ffca56d24..a0af0d6b7dac26 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.d.ts +++ b/packages/mui-material/src/Checkbox/Checkbox.d.ts @@ -1,7 +1,12 @@ 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 { CheckboxClasses } from './checkboxClasses'; @@ -9,8 +14,36 @@ export interface CheckboxPropsSizeOverrides {} export interface CheckboxPropsColorOverrides {} +export interface CheckboxRootSlotPropsOverrides {} + +export interface CheckboxSlots { + /** + * The component that renders the root slot. + * @default SwitchBase + */ + root: React.ElementType; +} + +export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps< + CheckboxSlots, + { + /** + * Props forwarded to the root slot. + * By default, the available props are based on the SwitchBase. + */ + root: SlotProps< + React.ElementType, + CheckboxRootSlotPropsOverrides, + CheckboxOwnerState + >; + } +>; + +export interface CheckboxOwnerState extends CheckboxProps {} + export interface CheckboxProps - extends StandardProps { + extends StandardProps, + CheckboxSlotsAndSlotProps { /** * If `true`, the component is checked. */ diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index e5a19e4f1333e5..afcb8cd7736b24 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -17,6 +17,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, indeterminate, color, size } = ownerState; @@ -123,6 +124,8 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) { size = 'medium', disableRipple = false, className, + slots = {}, + slotProps = {}, ...other } = props; @@ -139,8 +142,22 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) { const classes = useUtilityClasses(ownerState); + const externalForwardedProps = { + ...other, + slots, + slotProps, + }; + + const [RootSlot, rootProps] = useSlot('root', { + elementType: CheckboxRoot, + ref, + className: clsx(classes.root, className), + ownerState, + externalForwardedProps, + }); + return ( - ); @@ -259,6 +273,20 @@ Checkbox.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. */ diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js index 63d95bfe3b7438..aa88aab53437ff 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.test.js +++ b/packages/mui-material/src/Checkbox/Checkbox.test.js @@ -21,6 +21,12 @@ describe('', () => { testStateOverrides: { prop: 'color', value: 'secondary', styleKey: 'colorSecondary' }, refInstanceof: window.HTMLSpanElement, skip: ['componentProp', 'componentsProp', 'rootClass'], + slots: { + root: { + testWithElement: null, + expectedClassName: classes.root, + }, + }, })); it('should have the classes required for Checkbox', () => {