[material-ui][Alert] Deprecate components and componentsProps props

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

@@ -15,11 +15,15 @@
         "name": "shape",
         "description": "{ CloseButton?: elementType, CloseIcon?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7."
     },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ closeButton?: object, closeIcon?: object }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7."
     },
     "icon": { "type": { "name": "node" } },
     "iconMapping": {
@@ -44,7 +48,10 @@
       "default": "'success'"
     },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ closeButton?: object, closeIcon?: object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ closeButton?: func<br>&#124;&nbsp;object, closeIcon?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {

docs/translations/api-docs/alert/alert.json

@@ -12,11 +12,9 @@
     "color": {
       "description": "The color of the component. Unless provided, the value is taken from the <code>severity</code> prop. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#custom-colors\">palette customization guide</a>."
     },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "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.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "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 <code>severity</code> prop. Set to <code>false</code> to remove the <code>icon</code>."
@@ -33,11 +31,9 @@
       "description": "The severity of the alert. This defines the color and icon used."
     },
     "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future."
-    },
-    "slots": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
+    "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."
     },

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

@@ -4,13 +4,18 @@ import { SxProps } from '@mui/system';
 import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { AlertClasses } from './alertClasses';
+import { SlotProps } from '../utils/types';
 
 export type AlertColor = 'success' | 'info' | 'warning' | 'error';
 
 export interface AlertPropsVariantOverrides {}
 
 export interface AlertPropsColorOverrides {}
 
+export interface AlertCloseButtonSlotPropsOverrides {}
+
+export interface AlertCloseIconSlotPropsOverrides {}
+
 export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   /**
    * The action to display. It renders after the message, at the end of the alert.
@@ -36,8 +41,7 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7.
    *
    * @default {}
    */
@@ -49,8 +53,7 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7.
    *
    * @default {}
    */
@@ -98,19 +101,23 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slotProps?: {
-    closeButton?: IconButtonProps;
-    closeIcon?: SvgIconProps;
+    closeButton?: SlotProps<
+      React.ElementType<IconButtonProps>,
+      AlertCloseButtonSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    closeIcon?: SlotProps<
+      React.ElementType<SvgIconProps>,
+      AlertCloseIconSlotPropsOverrides,
+      AlertOwnerState
+    >;
   };
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots?: {
@@ -123,6 +130,8 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   sx?: SxProps<Theme>;
 }
 
+export interface AlertOwnerState extends AlertProps {}
+
 /**
  *
  * Demos:

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

@@ -6,6 +6,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas
 import { darken, lighten } from '@mui/system';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import alertClasses, { getAlertUtilityClass } from './alertClasses';
@@ -167,11 +168,29 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
-  const AlertCloseButton = slots.closeButton ?? components.CloseButton ?? IconButton;
-  const AlertCloseIcon = slots.closeIcon ?? components.CloseIcon ?? CloseIcon;
+  const externalForwardedProps = {
+    slots: {
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon,
+      ...slots,
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps,
+    },
+  };
+
+  const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
+    elementType: IconButton,
+    externalForwardedProps,
+    ownerState,
+  });
 
-  const closeButtonProps = slotProps.closeButton ?? componentsProps.closeButton;
-  const closeIconProps = slotProps.closeIcon ?? componentsProps.closeIcon;
+  const [CloseIconSlot, closeIconProps] = useSlot('closeIcon', {
+    elementType: CloseIcon,
+    externalForwardedProps,
+    ownerState,
+  });
 
   return (
     <AlertRoot
@@ -197,16 +216,16 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
       ) : null}
       {action == null && onClose ? (
         <AlertAction ownerState={ownerState} className={classes.action}>
-          <AlertCloseButton
+          <CloseButtonSlot
             size="small"
             aria-label={closeText}
             title={closeText}
             color="inherit"
             onClick={onClose}
             {...closeButtonProps}
           >
-            <AlertCloseIcon fontSize="small" {...closeIconProps} />
-          </AlertCloseButton>
+            <CloseIconSlot fontSize="small" {...closeIconProps} />
+          </CloseButtonSlot>
         </AlertAction>
       ) : null}
     </AlertRoot>
@@ -253,8 +272,7 @@ Alert.propTypes /* remove-proptypes */ = {
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7.
    *
    * @default {}
    */
@@ -266,8 +284,7 @@ Alert.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7.
    *
    * @default {}
    */
@@ -316,19 +333,15 @@ Alert.propTypes /* remove-proptypes */ = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slotProps: PropTypes.shape({
-    closeButton: PropTypes.object,
-    closeIcon: PropTypes.object,
+    closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

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

@@ -20,13 +20,14 @@ describe('<Alert />', () => {
     testDeepOverrides: { slotName: 'message', slotClassName: classes.message },
     testLegacyComponentsProp: true,
     slots: {
-      closeButton: {},
-      closeIcon: {},
+      closeButton: {
+        expectedClassName: classes.closeButton,
+      },
+      closeIcon: {
+        expectedClassName: classes.closeIcon,
+      },
     },
-    skip: [
-      'componentsProp',
-      'slotPropsCallback', // not supported yet
-    ],
+    skip: ['componentsProp'],
   }));
 
   describe('prop: square', () => {