[material-ui][Badge] Deprecate components and componentsProps (#41655)

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

@@ -271,6 +271,36 @@ The Backdrop's `TransitionComponent` prop was deprecated in favor of `slots.tran
 +  slots={{ transition: CustomTransition }}
 ```
 
+## Badge
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#badge-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/badge-props <path>
+```
+
+### components
+
+The Badge's `components` was deprecated in favor of `slots`:
+
+```diff
+ <Badge
+-  components={{ root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+ />
+```
+
+### componentsProps
+
+The Badge's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Badge
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
 ## Button
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections:

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

@@ -20,14 +20,18 @@
     "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: 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": "{ badge?: 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. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "invisible": { "type": { "name": "bool" }, "default": "false" },
     "max": { "type": { "name": "number" }, "default": "99" },

docs/translations/api-docs/badge/badge.json

@@ -11,11 +11,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."
     },
     "invisible": { "description": "If <code>true</code>, the badge is invisible." },
     "max": { "description": "Max count to show." },

packages/mui-codemod/README.md

@@ -287,6 +287,32 @@ npx @mui/codemod@next deprecations/alert-props <path>
 npx @mui/codemod@next deprecations/backdrop-props <path>
 ```
 
+#### `badge-props`
+
+```diff
+ <Badge
+-  components={{ Root: CustomRoot }}
++  slots={{ root: CustomRoot }}
+-  componentsProps={{ root: { testid: 'test-id' } }}
++  slotProps={{ root: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiBadge: {
+   defaultProps: {
+-    components: { Root: CustomRoot }
++    slots: { root: CustomRoot },
+-    componentsProps: { root: { testid: 'test-id' }}
++    slotProps: { root: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/badge-props <path>
+```
+
 #### `button-classes`
 
 JS transforms:

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

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

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './badge-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('badge-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] badge-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false } },
+        );
+
+        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/badge-props/index.js

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

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

@@ -0,0 +1,24 @@
+import { Badge } from '@mui/material';
+
+<Badge components={{ root: ComponentsRoot }} componentsProps={{ root: componentsRootProps }} />;
+
+<Badge
+  slots={{ badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps, badge: componentsBadgeProps }}
+/>;

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

@@ -0,0 +1,32 @@
+import { Badge } from '@mui/material';
+
+<Badge slots={{
+  root: ComponentsRoot
+}} slotProps={{ root: componentsRootProps }} />;
+
+<Badge
+  slots={{
+    badge: SlotsBadge,
+    root: ComponentsRoot
+  }}
+  slotProps={{
+    badge: slotsBadgeProps,
+    root: componentsRootProps
+  }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  slotProps={{ badge: slotsBadgeProps, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  }, badge: {
+    ...componentsBadgeProps,
+    ...slotsBadgeProps
+  } }} />;

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

@@ -0,0 +1,42 @@
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      slots: { badge: SlotsBadge },
+      componentsProps: { root: componentsRootProps },
+      slotProps: { badge: slotsBadgeProps },
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      slots: { badge: SlotsBadge, root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+      slotProps: { root: slotsRootProps, badge: slotsBadgeProps },
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      slots: { badge: SlotsBadge, root: SlotsRoot },
+      componentsProps: { root: componentsRootProps, badge: componentsBadgeProps },
+      slotProps: { badge: slotsBadgeProps, root: slotsRootProps },
+    },
+  },
+});
+

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

@@ -0,0 +1,73 @@
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot,
+        badge: SlotsBadge
+      },
+
+      slotProps: {
+        root: componentsRootProps,
+        badge: slotsBadgeProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot,
+        badge: SlotsBadge
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        },
+
+        badge: slotsBadgeProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot,
+        badge: SlotsBadge
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        },
+
+        badge: {
+          ...componentsBadgeProps,
+          ...slotsBadgeProps
+        }
+      }
+    },
+  },
+});
+

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

@@ -72,17 +72,15 @@ export interface BadgeOwnProps {
    * 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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
   componentsProps?: BadgeOwnProps['slotProps'];
   /**
    * 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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */

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

@@ -398,8 +398,7 @@ Badge.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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -411,8 +410,7 @@ Badge.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. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */