[material-ui][Badge] Deprecated components and componentsProps props for v6

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

@@ -239,6 +239,36 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`:
  />;
 ```
 
+## 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@latest deprecations/badge-props <path>
+```
+
+### components
+
+The Badge's `components` was deprecated in favor of `slots`:
+
+```diff
+ <Badge
+-  components={{ Badge: CustomBadge }}
++  slots={{ badge: CustomBadge }}
+ />
+```
+
+### componentsProps
+
+The Badge's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Badge
+-  componentsProps={{ badge: { testid: 'test-id' } }}
++  slotProps={{ badge: { 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>slotProps</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" },
@@ -64,6 +68,20 @@
   },
   "name": "Badge",
   "imports": ["import Badge from '@mui/material/Badge';", "import { Badge } from '@mui/material';"],
+  "slots": [
+    {
+      "name": "badge",
+      "description": "",
+      "default": "",
+      "class": null
+    },
+    {
+      "name": "root",
+      "description": "",
+      "default": "",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "anchorOriginBottomLeft",

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

@@ -12,20 +12,20 @@
       "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."
+      "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." },
     "overlap": { "description": "Wrapped shape the badge should overlap." },
     "showZero": {
       "description": "Controls whether the badge is hidden when <code>badgeContent</code> is zero."
     },
-    "slotProps": { "description": "The props used for each slot inside the Badge." },
+    "slotProps": { "description": "The props used for each slot inside." },
     "slots": {
-      "description": "The components used for each slot inside the Badge. Either a string to use a HTML element or a component."
+      "description": "The components used for each slot inside."
     },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
@@ -153,5 +153,9 @@
       "nodeName": "the badge <code>span</code> element",
       "conditions": "<code>variant=\"standard\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "badge": "",
+    "root": ""
   }
 }

packages/mui-codemod/README.md

@@ -274,6 +274,19 @@ npx @mui/codemod@latest deprecations/alert-props <path>
  />;
 ```
 
+#### `badge-props`
+
+```diff
+ <Badge
+- components={{Badge:CustomBadge}}
+- componentsProps={{ badge: { testid: 'test-id' } }}
++ slots={{badge:CustomBadge}}
++ slotsProps={{ badge:{ testid:'test-id'} }}
+ />
+```
+
+```bash
+npx @mui/codemod@latest deprecations/badge-props <path>
 #### `button-classes`
 
 JS transforms:

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

@@ -0,0 +1,14 @@
+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 transform from './badge-props';
+import { jscodeshift } from '../../../testUtils';
+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/excepted.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const excepted = read('./test-cases/excepted.js');
+        expect(actual).to.equal(excepted, '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,17 @@
+import { Badge } from '@mui/material';
+
+<Badge components={{ root: ComponentsRoot }} componentsProps={{ root: componentsProps }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot, badge: ComponentsBadge }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot, badge: ComponentsBadge }}
+  slotsProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+/>;

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

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

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

@@ -0,0 +1,30 @@
+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 },
+    },
+  },
+});

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

@@ -0,0 +1,49 @@
+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,
+      },
+    },
+  },
+});

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

@@ -75,6 +75,7 @@ export interface BadgeOwnProps {
    * 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'];
@@ -83,7 +84,7 @@ export interface BadgeOwnProps {
    *
    * 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 {}
    */
   components?: {

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

@@ -401,6 +401,7 @@ Badge.propTypes /* remove-proptypes */ = {
    * 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 {}
    */
   components: PropTypes.shape({
@@ -413,7 +414,7 @@ Badge.propTypes /* remove-proptypes */ = {
    *
    * 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: PropTypes.shape({

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

@@ -1,5 +1,4 @@
 'use client';
 export { default } from './Badge';
-
 export { default as badgeClasses } from './badgeClasses';
 export * from './badgeClasses';