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 0e2cfdc73de838..826482b58127fa 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 @@ -469,5 +469,25 @@ If you render a `TextField` from `Autocomplete`, the `params` shape also changed }} /> )} +``` + +#### Alert deprecated props removed + +Use the [alert-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/alert-props +``` + +The deprecated `Alert` props have been removed. +Use the `slots` and `slotProps` props instead: + +```diff + ``` diff --git a/docs/pages/material-ui/api/alert.json b/docs/pages/material-ui/api/alert.json index 1234b13dcf57dc..3f310ab7e89600 100644 --- a/docs/pages/material-ui/api/alert.json +++ b/docs/pages/material-ui/api/alert.json @@ -10,21 +10,6 @@ "description": "'error'
| 'info'
| 'success'
| 'warning'
| string" } }, - "components": { - "type": { - "name": "shape", - "description": "{ CloseButton?: elementType, CloseIcon?: 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": "{ closeButton?: object, closeIcon?: 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." - }, "icon": { "type": { "name": "node" } }, "iconMapping": { "type": { diff --git a/docs/translations/api-docs/alert/alert.json b/docs/translations/api-docs/alert/alert.json index 1e904ee4b3e8a1..95ac74fb3bdbc0 100644 --- a/docs/translations/api-docs/alert/alert.json +++ b/docs/translations/api-docs/alert/alert.json @@ -12,10 +12,6 @@ "color": { "description": "The color of the component. Unless provided, the value is taken from the severity prop. It supports both default and custom theme colors, which can be added as shown in the palette customization guide." }, - "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." - }, "icon": { "description": "Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the severity prop. Set to false to remove the icon." }, diff --git a/packages/mui-material/src/Alert/Alert.d.ts b/packages/mui-material/src/Alert/Alert.d.ts index 0100b4b27fc76a..63e3f0c966cc26 100644 --- a/packages/mui-material/src/Alert/Alert.d.ts +++ b/packages/mui-material/src/Alert/Alert.d.ts @@ -124,33 +124,6 @@ export interface AlertProps extends StandardProps, AlertS * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). */ color?: OverridableStringUnion | 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?: - | { - CloseButton?: React.ElementType | undefined; - CloseIcon?: React.ElementType | undefined; - } - | 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?: - | { - closeButton?: IconButtonProps | undefined; - closeIcon?: SvgIconProps | undefined; - } - | undefined; /** * The severity of the alert. This defines the color and icon used. * @default 'success' diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index 0a5b987d184927..bbe0bb389907cf 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -163,8 +163,6 @@ const Alert = React.forwardRef(function Alert(inProps, ref) { className, closeText = 'Close', color, - components = {}, - componentsProps = {}, icon, iconMapping = defaultIconMapping, onClose, @@ -187,15 +185,8 @@ const Alert = React.forwardRef(function Alert(inProps, ref) { const classes = useUtilityClasses(ownerState); const externalForwardedProps = { - slots: { - closeButton: components.CloseButton, - closeIcon: components.CloseIcon, - ...slots, - }, - slotProps: { - ...componentsProps, - ...slotProps, - }, + slots, + slotProps, }; const [RootSlot, rootSlotProps] = useSlot('root', { @@ -311,29 +302,6 @@ Alert.propTypes /* remove-proptypes */ = { PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string, ]), - /** - * 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({ - CloseButton: PropTypes.elementType, - CloseIcon: 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({ - closeButton: PropTypes.object, - closeIcon: PropTypes.object, - }), /** * Override the icon displayed before the children. * Unless provided, the icon is mapped to the value of the `severity` prop. diff --git a/packages/mui-material/src/Alert/Alert.test.js b/packages/mui-material/src/Alert/Alert.test.js index 078a9b1b783953..5e2028e4ace275 100644 --- a/packages/mui-material/src/Alert/Alert.test.js +++ b/packages/mui-material/src/Alert/Alert.test.js @@ -20,7 +20,6 @@ describe('', () => { muiName: 'MuiAlert', testVariantProps: { variant: 'standard', color: 'success' }, testDeepOverrides: { slotName: 'message', slotClassName: classes.message }, - testLegacyComponentsProp: ['closeButton', 'closeIcon'], slots: { root: { expectedClassName: classes.root, @@ -96,14 +95,14 @@ describe('', () => { }); }); - describe('prop: components', () => { + describe('slots.closeButton and slots.closeIcon', () => { it('should override the default icon used in the close action', () => { function MyCloseIcon() { return
X
; } render( - {}} components={{ CloseIcon: MyCloseIcon }}> + {}} slots={{ closeIcon: MyCloseIcon }}> Hello World , ); @@ -117,7 +116,7 @@ describe('', () => { } render( - {}} components={{ CloseButton: MyCloseButton }}> + {}} slots={{ closeButton: MyCloseButton }}> Hello World , ); @@ -126,12 +125,12 @@ describe('', () => { }); }); - describe('prop: componentsProps', () => { + describe('slotProps.closeButton and slotProps.closeIcon', () => { it('should apply the props on the close IconButton component', () => { render( {}} - componentsProps={{ + slotProps={{ closeButton: { 'data-testid': 'closeButton', size: 'large', @@ -152,7 +151,7 @@ describe('', () => { render( {}} - componentsProps={{ + slotProps={{ closeIcon: { 'data-testid': 'closeIcon', fontSize: 'large',