[material-ui][Alert] Deprecate components and componentsProps props (#…

…40681)

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -90,6 +90,36 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com
  },
 ```
 
+## Alert
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/alert-props <path>
+```
+
+### components
+
+The Alert's `components` was deprecated in favor of `slots`:
+
+```diff
+ <Alert
+-  components={{ CloseButton: CustomButton }}
++  slots={{ closeButton: CustomButton }}
+ />
+```
+
+### componentsProps
+
+The Alert's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Alert
+-  componentsProps={{ closeButton: { testid: 'test-id' } }}
++  slotProps={{ closeButton: { testid: 'test-id' } }}
+ />
+```
+
 ## Avatar
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections:

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. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "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. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "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": {
@@ -71,6 +78,20 @@
   },
   "name": "Alert",
   "imports": ["import Alert from '@mui/material/Alert';", "import { Alert } from '@mui/material';"],
+  "slots": [
+    {
+      "name": "closeButton",
+      "description": "The component that renders the close button.",
+      "default": "IconButton",
+      "class": null
+    },
+    {
+      "name": "closeIcon",
+      "description": "The component that renders the close icon.",
+      "default": "svg",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "action",

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>."
@@ -32,12 +30,8 @@
     "severity": {
       "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."
-    },
+    "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."
     },
@@ -133,5 +127,9 @@
       "nodeName": "the root element",
       "conditions": "<code>variant=\"standard\"</code> and <code>color=\"warning\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "closeButton": "The component that renders the close button.",
+    "closeIcon": "The component that renders the close icon."
   }
 }

packages/mui-codemod/README.md

@@ -136,6 +136,32 @@ CSS transforms:
 npx @mui/codemod@latest deprecations/accordion-summary-classes <path>
 ```
 
+#### `alert-props`
+
+```diff
+ <Alert
+-  components={{ CloseButton: CustomButton }}
++  slots={{ closeButton: CustomButton }}
+-  componentsProps={{ closeButton: { testid: 'test-id' } }}
++  slotProps={{ closeButton: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiAlert: {
+   defaultProps: {
+-    components: { CloseButton: CustomButton }
++    slots: { closeButton: CustomButton },
+-    componentsProps: { closeButton: { testid: 'test-id' }}
++    slotProps: { closeButton: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@latest deprecations/alert-props <path>
+```
+
 #### `avatar-props`
 
 ```diff

packages/mui-codemod/src/deprecations/alert-props/alert-props.js

@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Alert' });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './alert-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('alert-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] alert-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: true } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/alert-props/index.js

@@ -0,0 +1 @@
+export { default } from './alert-props';

packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js

@@ -0,0 +1,18 @@
+import Alert from '@mui/material/Alert';
+
+<Alert
+  components={{ CloseButton: ComponentsButton }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;

packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js

@@ -0,0 +1,20 @@
+import Alert from '@mui/material/Alert';
+
+<Alert
+  slots={{
+    closeButton: ComponentsButton
+  }}
+  slotProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{
+    closeIcon: SlotsIcon,
+    closeButton: ComponentsButton
+  }}
+  slotProps={{
+    closeIcon: slotsIconProps,
+    closeButton: componentsButtonProps
+  }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }} />;

packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js

@@ -0,0 +1,30 @@
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      componentsProps: { closeButton: componentsButtonProps },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon },
+      componentsProps: { closeButton: componentsButtonProps },
+      slotProps: { closeIcon: slotsIconProps },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon, closeButton: SlotsButton },
+      componentsProps: { closeButton: componentsButtonProps },
+      slotProps: { closeIcon: slotsIconProps, closeButton: slotsButtonProps },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js

@@ -0,0 +1,45 @@
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: ComponentsButton,
+      },
+
+      slotProps: {
+        closeButton: componentsButtonProps,
+      },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: ComponentsButton,
+        closeIcon: SlotsIcon,
+      },
+
+      slotProps: {
+        closeButton: componentsButtonProps,
+        closeIcon: slotsIconProps,
+      },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon,
+      },
+
+      slotProps: {
+        closeButton: slotsButtonProps,
+        closeIcon: slotsIconProps,
+      },
+    },
+  },
+});