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

[lhilgert9]

Part of #41279
@DiegoAndai

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 88703af

[DiegoAndai]

Hey @lhilgert9, thanks for working on this!

[DiegoAndai]

Should we implement the additionalAvatar slot properly? I think surplus is a better name. This would mean:

• Providing slots.surplus and slotProps.surplus
• Using useSlot hook
• Adding tests for the slot

What do you think @lhilgert9?

@mnajdova tagging you as the owner of the Avatar component.

[lhilgert9]

Sounds logical to me and would also ensure uniformity for all components and offer the end user more customization options.👍🏼

[DiegoAndai]

Let's implement it 🙌🏼

[lhilgert9]

@DiegoAndai I have added surplus as slots and slotProps prop. I have marked slotProps.additionalAvatar as @deprecated. I also modified the codemod to change additionalAvatar to surplus. I just didn't know which tests you wanted to implement. If you tell me which ones we need there, I'll implement them too.

[lhilgert9]

The surplus slot has the same problem with overwriting the ownerState as described in #42184. These lines were only inserted to solve the problem in the short term, but would have to be removed again.

[DiegoAndai]

Thanks for implementing the suggestion @lhilgert9!

May I ask you to add the slot test for the surplus slot, it should be something like:

diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
index b646ad3fcf..0d9a26e7e7 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
@@ -22,14 +22,28 @@ describe('<AvatarGroup />', () => {
       refInstanceof: window.HTMLDivElement,
       testVariantProps: { max: 10, spacing: 'small', variant: 'square' },
       testLegacyComponentsProp: true,
+      slots: {
+        surplus: { expectedClassName: classes.avatar },
+      },
+      skip: ['componentsProp'],
+    }),
+  );
+
+  // test additionalAvatar slot separately
+  describeConformance(
+    <AvatarGroup max={2}>
+      <Avatar src="/fake.png" />
+      <Avatar src="/fake.png" />
+      <Avatar src="/fake.png" />
+    </AvatarGroup>,
+    () => ({
+      classes,
+      render,
+      muiName: 'MuiAvatarGroup',
       slots: {
         additionalAvatar: { expectedClassName: classes.avatar },
       },
-      skip: [
-        'componentsProp',
-        'slotsProp',
-        'slotPropsCallback', // not supported yet
-      ],
+      only: ['slotPropsProp'],
     }),
   );

We have to separate additionalAvatar as it's only supported in slotProps and not slots.

[lhilgert9]

@DiegoAndai everything should be implemented. Tests failed because docker was down and the test images could not be pulled.