[material-ui][AvatarGroup] deprecate componentsProps for v6

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

@@ -253,6 +253,28 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`:
  />;
 ```
 
+## AvatarGroup
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-group-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/avatar-group-props <path>
+```
+
+### componentsProps
+
+The AvatarGroup's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <AvatarGroup
+-  componentsProps={{
+-    additionalAvatar: {color: "red"}
++  slotProps={{
++    additionalAvatar: {color: "red"}
+   }}
+ />;
+```
+
 ## Backdrop
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#backdrop-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/avatar-group.json

@@ -5,7 +5,8 @@
     "component": { "type": { "name": "elementType" } },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
-      "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>."
     },
     "max": { "type": { "name": "custom", "description": "number" }, "default": "5" },
     "renderSurplus": {

docs/translations/api-docs/avatar-group/avatar-group.json

@@ -7,7 +7,7 @@
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
     "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.<br>This prop is an alias for the <code>slotProps</code> prop."
     },
     "max": { "description": "Max avatars to show before +x." },
     "renderSurplus": {

packages/mui-codemod/README.md

@@ -259,6 +259,18 @@ npx @mui/codemod@next deprecations/alert-classes <path>
 npx @mui/codemod@next deprecations/alert-props <path>
 ```
 
+#### `avatar-group-props`
+
+```diff
+ <AvatarGroup
+-  componentsProps={{
+-    additionalAvatar: {color: "red"}
++  slotProps={{
++    additionalAvatar: {color: "red"}
+   }}
+ />;
+```
+
 #### `avatar-props`
 
 ```diff

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

@@ -1,5 +1,6 @@
 import transformAccordionProps from '../accordion-props';
 import transformFormControlLabelProps from '../form-control-label-props';
+import transformAvatarGroupProps from '../avatar-group-props';
 import transformAvatarProps from '../avatar-props';
 import transformDividerProps from '../divider-props';
 import transformAccordionClasses from '../accordion-summary-classes';
@@ -21,6 +22,7 @@ import transformSpeedDialProps from '../speed-dial-props';
 export default function deprecationsAll(file, api, options) {
   file.source = transformAccordionProps(file, api, options);
   file.source = transformFormControlLabelProps(file, api, options);
+  file.source = transformAvatarGroupProps(file, api, options);
   file.source = transformAvatarProps(file, api, options);
   file.source = transformDividerProps(file, api, options);
   file.source = transformAccordionClasses(file, api, options);

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

packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js

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

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

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

@@ -0,0 +1,28 @@
+import AvatarGroup from '@mui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@mui/material';
+
+<AvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"}
+  }}
+/>;
+<MyAvatarGroup
+componentsProps={{
+  additionalAvatar: {color: "red"}
+}}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"}
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"}
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"}
+  }}
+/>;

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

@@ -0,0 +1,27 @@
+import AvatarGroup from '@mui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@mui/material';
+
+<AvatarGroup
+  slotProps={{
+    additionalAvatar: {color: "red"}
+  }}
+/>;
+<MyAvatarGroup
+slotProps={{
+  additionalAvatar: {color: "red"}
+}}
+/>;
+<MyAvatarGroup
+  slotProps={{
+    additionalAvatar: {
+      ...{color: "red"},
+      ...{color: "blue"}
+    }
+  }} />;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"}
+  }}
+/>;

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

@@ -0,0 +1,22 @@
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"}
+      },
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"}
+      },
+      slotProps: {
+        additionalAvatar: {color: "blue"}
+      }
+    },
+  },
+});

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

@@ -0,0 +1,22 @@
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        additionalAvatar: {color: "red"}
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        additionalAvatar: {
+          ...{color: "red"},
+          ...{color: "blue"}
+        }
+      }
+    },
+  },
+});

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

@@ -27,9 +27,8 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * 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.
    *
-   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps?: {
     additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &

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

@@ -57,7 +57,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
     children: childrenProp,
     className,
     component = 'div',
-    componentsProps = {},
+    componentsProps,
     max = 5,
     renderSurplus,
     slotProps = {},
@@ -105,7 +105,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
 
-  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
+  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps?.additionalAvatar;
 
   const marginValue =
     ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined
@@ -173,9 +173,8 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    * 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.
    *
-   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps: PropTypes.shape({
     additionalAvatar: PropTypes.object,