diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index d57546094ee714..1742e1e49a5f42 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -603,6 +603,27 @@ The following deprecated `Backdrop` props have been removed: - TransitionComponent={CustomTransition} + slots={{ root: CustomRoot, transition: CustomTransition }} + slotProps={{ root: { className: 'my-class' } }} +``` + +#### Badge deprecated props removed + +Use the [badge-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#badge-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/badge-props +``` + +The following deprecated props have been removed from the `Badge` component: + +- `components` → use `slots` +- `componentsProps` → use `slotProps` + +```diff + ``` diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json index 1aed013e28736c..36606a98ec7776 100644 --- a/docs/pages/material-ui/api/badge.json +++ b/docs/pages/material-ui/api/badge.json @@ -18,21 +18,6 @@ "default": "'default'" }, "component": { "type": { "name": "elementType" } }, - "components": { - "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, - "default": "{}", - "deprecated": true, - "deprecationInfo": "use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, - "componentsProps": { - "type": { - "name": "shape", - "description": "{ badge?: func
| object, root?: func
| object }" - }, - "default": "{}", - "deprecated": true, - "deprecationInfo": "use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "invisible": { "type": { "name": "bool" }, "default": "false" }, "max": { "type": { "name": "number" }, "default": "99" }, "overlap": { diff --git a/docs/translations/api-docs/badge/badge.json b/docs/translations/api-docs/badge/badge.json index f07adda4983707..fcfb40155fd6da 100644 --- a/docs/translations/api-docs/badge/badge.json +++ b/docs/translations/api-docs/badge/badge.json @@ -11,10 +11,6 @@ "component": { "description": "The component used for the root node. Either a string to use a HTML element or a component." }, - "components": { "description": "The components used for each slot inside." }, - "componentsProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones." - }, "invisible": { "description": "If true, the badge is invisible." }, "max": { "description": "Max count to show." }, "overlap": { "description": "Wrapped shape the badge should overlap." }, diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index f6ea29b49b3a73..32ee91a64a5393 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -99,28 +99,6 @@ export interface BadgeOwnProps extends BadgeSlotsAndSlotProps { BadgePropsColorOverrides > | undefined; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * - * @default {} - */ - componentsProps?: BadgeOwnProps['slotProps'] | undefined; - /** - * The components used for each slot inside. - * - * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * - * @default {} - */ - components?: - | { - Root?: React.ElementType | undefined; - Badge?: React.ElementType | undefined; - } - | undefined; /** * If `true`, the badge is invisible. * @default false diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 56d7c8f7d86c65..5c5711c948f039 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -154,8 +154,6 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { className, classes: classesProp, component, - components = {}, - componentsProps = {}, children, overlap: overlapProp = 'rectangular', color: colorProp = 'default', @@ -216,16 +214,9 @@ const Badge = React.forwardRef(function Badge(inProps, ref) { const classes = useUtilityClasses(ownerState); - // support both `slots` and `components` for backward compatibility const externalForwardedProps = { - slots: { - root: slots?.root ?? components.Root, - badge: slots?.badge ?? components.Badge, - }, - slotProps: { - root: slotProps?.root ?? componentsProps.root, - badge: slotProps?.badge ?? componentsProps.badge, - }, + slots, + slotProps, }; const [RootSlot, rootProps] = useSlot('root', { @@ -304,29 +295,6 @@ Badge.propTypes /* remove-proptypes */ = { * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, - /** - * The components used for each slot inside. - * - * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * - * @default {} - */ - components: PropTypes.shape({ - Badge: PropTypes.elementType, - Root: PropTypes.elementType, - }), - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * - * @default {} - */ - componentsProps: PropTypes.shape({ - badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - }), /** * If `true`, the badge is invisible. * @default false diff --git a/packages/mui-material/src/Badge/Badge.test.js b/packages/mui-material/src/Badge/Badge.test.js index 6937375c4fc953..ac3e0d70d7cbae 100644 --- a/packages/mui-material/src/Badge/Badge.test.js +++ b/packages/mui-material/src/Badge/Badge.test.js @@ -43,6 +43,7 @@ describe('', () => { expectedClassName: classes.badge, }, }, + skip: ['componentsProp'], }), ); @@ -303,30 +304,7 @@ describe('', () => { }); }); - describe('prop: components / slots', () => { - it('allows overriding the slots using the components prop', () => { - const CustomRoot = React.forwardRef((props, ref) => { - const { ownerState, ...other } = props; - return ; - }); - - const CustomBadge = React.forwardRef((props, ref) => { - const { ownerState, ...other } = props; - return ; - }); - - render( - , - ); - - screen.getByTestId('custom-root'); - screen.getByTestId('custom-badge'); - }); - + describe('prop: slots', () => { it('allows overriding the slots using the slots prop', () => { const CustomRoot = React.forwardRef((props, ref) => { const { ownerState, ...other } = props; @@ -351,23 +329,7 @@ describe('', () => { }); }); - describe('prop: componentsProps / slotProps', () => { - it('allows modifying slots props using the componentsProps prop', () => { - render( - , - ); - - screen.getByTestId('custom-root'); - screen.getByTestId('custom-badge'); - }); - + describe('prop: slotProps', () => { it('allows modifying slots props using the slotProps prop', () => { render(