[material-ui][Modal] Deprecate components and componentsProps (#4…

…2469)

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

@@ -1242,6 +1242,36 @@ The Grid's `wrap` prop was deprecated in favor of `flexWrap` MUI System prop:
  />;
 ```
 
+## Modal
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#modal-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/modal-props <path>
+```
+
+### components
+
+The Modal's `components` prop was deprecated in favor of `slots`:
+
+```diff
+ <Modal
+-  components={{ Root: CustomRoot, Backdrop: CustomBackdrop }}
++  slots={{ root: CustomRoot, backdrop: CustomBackdrop }}
+ />
+```
+
+### componentsProps
+
+The Modal's `componentsProps` prop was deprecated in favor of `slotProps`:
+
+```diff
+ <Modal
+-  componentsProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
++  slotProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
+ />
+```
+
 ## OutlinedInput
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#outlined-input-props) below to migrate the code as described in the following sections:

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

@@ -18,14 +18,18 @@
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Backdrop?: elementType, Root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "componentsProps": {
       "type": {
         "name": "shape",
         "description": "{ backdrop?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/modal/modal.json

@@ -15,11 +15,9 @@
     "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.<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."
     },
     "container": {
       "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."

packages/mui-codemod/README.md

@@ -1168,6 +1168,32 @@ npx @mui/codemod@next deprecations/input-base-props <path>
 npx @mui/codemod@next deprecations/input-props <path>
 ```
 
+#### `modal-props`
+
+```diff
+ <Modal
+-  components={{ Root: CustomRoot, Backdrop: CustomBackdrop }}
++  slots={{ root: CustomRoot, backdrop: CustomBackdrop }}
+-  componentsProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
++  slotProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
+ />
+```
+
+```diff
+ MuiModal: {
+   defaultProps: {
+-    components: { Root: CustomRoot, Backdrop: CustomBackdrop }
++    slots: { root: CustomRoot, backdrop: CustomBackdrop },
+-    componentsProps: { root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' }}
++    slotProps: { root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/modal-props <path>
+```
+
 #### `pagination-item-classes`
 
 JS transforms:

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -15,6 +15,7 @@ import transformFormControlLabelProps from '../form-control-label-props';
 import transformGridProps from '../grid-props';
 import transformInputBaseProps from '../input-base-props';
 import transformInputProps from '../input-props';
+import transformModalProps from '../modal-props';
 import transformOutlinedInputProps from '../outlined-input-props';
 import transformPaginationItemClasses from '../pagination-item-classes';
 import transformSpeedDialProps from '../speed-dial-props';
@@ -45,6 +46,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformGridProps(file, api, options);
   file.source = transformInputBaseProps(file, api, options);
   file.source = transformInputProps(file, api, options);
+  file.source = transformModalProps(file, api, options);
   file.source = transformOutlinedInputProps(file, api, options);
   file.source = transformPaginationItemClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);

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

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

packages/mui-codemod/src/deprecations/modal-props/modal-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: 'Modal' });
+
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './modal-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'modal-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,20 @@
+import Modal from '@mui/material/Modal';
+
+<Modal
+  components={{ Root: ComponentsRoot }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+<Modal
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+/>;
+<Modal
+  slots={{ root: SlotsRoot }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+<Modal
+  slots={{ root: SlotsRoot }}
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;

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

@@ -0,0 +1,24 @@
+import Modal from '@mui/material/Modal';
+
+<Modal
+  slots={{
+    root: ComponentsRoot
+  }}
+  slotProps={{ root: componentsRootProps }}
+/>;
+<Modal
+  slotProps={{ root: slotsRootProps }}
+  slots={{
+    root: ComponentsRoot
+  }}
+/>;
+<Modal
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: componentsRootProps }}
+/>;
+<Modal
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;

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

@@ -0,0 +1,37 @@
+fn({
+  MuiModal: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+      components: { Root: ComponentsRoot },
+      slotProps: { root: slotsRootProps },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});

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

@@ -0,0 +1,54 @@
+fn({
+  MuiModal: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      slotProps: { root: slotsRootProps },
+
+      slots: {
+        root: ComponentsRoot
+      }
+    },
+  },
+});
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiModal: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});

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

@@ -67,8 +67,7 @@ export interface ModalOwnProps {
   /**
    * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -80,8 +79,7 @@ export interface ModalOwnProps {
    * 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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

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

@@ -275,8 +275,7 @@ Modal.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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -288,8 +287,7 @@ Modal.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. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */