Skip to content

[avatargroup] Remove deprecated props #47968

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
silviuaavram wants to merge 3 commits into
base: master
Choose a base branch
from
+26 −84
Open

[avatargroup] Remove deprecated props #47968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c2b554
[avatargroup] Remove deprecated props
silviuaavram Mar 13, 2026
382eadb
docs:api
silviuaavram Mar 13, 2026
45eef01
update guide
silviuaavram Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,3 +471,26 @@ If you render a `TextField` from `Autocomplete`, the `params` shape also changed
)}
/>
```

#### AvatarGroup deprecated props removed

Use the [avatar-group-props 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 section:

```bash
npx @mui/codemod@latest deprecations/avatar-group-props <path>
```

The deprecated `AvatarGroup` props have been removed.
Use the `slotProps` prop instead. The `additionalAvatar` key has been renamed to `surplus`:

```diff
-<AvatarGroup componentsProps={{ additionalAvatar: { className: 'my-class' } }}>
+<AvatarGroup slotProps={{ surplus: { className: 'my-class' } }}>
```

If you were already using the `surplus` key via `componentsProps`, move it to `slotProps`:

```diff
-<AvatarGroup componentsProps={{ surplus: { className: 'my-class' } }}>
+<AvatarGroup slotProps={{ surplus: { className: 'my-class' } }}>
```
11 changes: 2 additions & 9 deletions docs/pages/material-ui/api/avatar-group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,6 @@
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"component": { "type": { "name": "elementType" } },
"componentsProps": {
"type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
"deprecated": true,
"deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"max": { "type": { "name": "custom", "description": "number" }, "default": "5" },
"renderSurplus": {
"type": { "name": "func" },
Expand All @@ -18,10 +13,7 @@
}
},
"slotProps": {
"type": {
"name": "shape",
"description": "{ additionalAvatar?: object, surplus?: func<br>&#124;&nbsp;object }"
},
"type": { "name": "shape", "description": "{ surplus?: func<br>&#124;&nbsp;object }" },
"default": "{}"
},
"slots": {
Expand Down Expand Up @@ -74,6 +66,7 @@
"spread": true,
"themeDefaultProps": true,
"muiName": "MuiAvatarGroup",
"forwardsRefTo": "HTMLDivElement",
"filename": "/packages/mui-material/src/AvatarGroup/AvatarGroup.js",
"inheritance": null,
"demos": "<ul><li><a href=\"/material-ui/react-avatar/\">Avatar</a></li></ul>",
Expand Down
3 changes: 0 additions & 3 deletions docs/translations/api-docs/avatar-group/avatar-group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@
"component": {
"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."
},
"max": { "description": "Max avatars to show before +x." },
"renderSurplus": {
"description": "custom renderer of extraAvatars",
Expand Down
20 changes: 0 additions & 20 deletions packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,6 @@ export interface AvatarGroupSlots {
export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<
AvatarGroupSlots,
{
/**
* @deprecated use `slotProps.surplus` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* */
additionalAvatar: React.ComponentPropsWithRef<typeof Avatar> &
AvatarGroupComponentsPropsOverrides;
surplus: SlotProps<
React.ElementType<React.ComponentPropsWithRef<typeof Avatar>>,
AvatarGroupComponentsPropsOverrides,
Expand All @@ -48,21 +43,6 @@ export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
* Either a string to use a HTML element or a component.
*/
component?: React.ElementType | undefined;
/**
* 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.
*
* @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
componentsProps?:
| {
additionalAvatar?:
| (React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides)
| undefined;
}
| undefined;
/**
* Max avatars to show before +x.
* @default 5
Expand Down
19 changes: 1 addition & 18 deletions packages/mui-material/src/AvatarGroup/AvatarGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
children: childrenProp,
className,
component = 'div',
componentsProps,
max = 5,
renderSurplus,
slotProps = {},
Expand Down Expand Up @@ -120,11 +119,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {

const externalForwardedProps = {
slots,
slotProps: {
surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
...componentsProps,
...slotProps,
},
slotProps,
};

const [SurplusSlot, surplusProps] = useSlot('surplus', {
Expand Down Expand Up @@ -185,17 +180,6 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
* Either a string to use a HTML element or a component.
*/
component: PropTypes.elementType,
/**
* 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.
*
* @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
componentsProps: PropTypes.shape({
additionalAvatar: PropTypes.object,
}),
/**
* Max avatars to show before +x.
* @default 5
Expand Down Expand Up @@ -223,7 +207,6 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
* @default {}
*/
slotProps: PropTypes.shape({
additionalAvatar: PropTypes.object,
surplus: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
}),
/**
Expand Down
34 changes: 0 additions & 34 deletions packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,24 +27,6 @@ describe('<AvatarGroup />', () => {
}),
);

// 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 },
Copy link
Member

@siriwatknp siriwatknp Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why this test is removed?

},
only: ['slotPropsProp'],
}),
);

it('should render avatars with spacing of 0px when spacing is 0', () => {
const { container } = render(
<AvatarGroup spacing={0}>
Expand Down Expand Up @@ -99,22 +81,6 @@ describe('<AvatarGroup />', () => {
expect(container.textContent).to.equal('%2');
});

it('should pass props from componentsProps.additionalAvatar to the slot component', () => {
const componentsProps = { additionalAvatar: { className: 'additional-avatar-test' } };

const { container } = render(
<AvatarGroup max={3} componentsProps={componentsProps}>
<Avatar src="/fake.png" />
<Avatar src="/fake.png" />
<Avatar src="/fake.png" />
<Avatar src="/fake.png" />
</AvatarGroup>,
);

const additionalAvatar = container.querySelector('.additional-avatar-test');
expect(additionalAvatar.classList.contains('additional-avatar-test')).to.equal(true);
});

it('should respect total', () => {
const { container } = render(
<AvatarGroup total={10}>
Expand Down
Loading