Material-ui: Variants for AvatarGroup

[daniel-keller]

Mui's Avatar component has the variants squared, rounded, circle to transform the shape of the avatar. In an AvatarGroup when more than the max number of avatars are present an avatar displaying the remaining number of Avatars (+x) is appended. AvatarGroup has no property to change the shape of this appended Avatar. If I want this appended avatar to match the avatars in the group I have to do it manually through style overrides or css classes.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I think AvatarGroup's properties should be updated to give more control over how the +x Avatar appears

Examples 🌈

Motivation 🔦

It's not hard to work around using custom css but I think its an oversight. If we support alternative variants for Avatars will we shouldn't assume only the rounded variant will be used in AvatarGroup.

[mnajdova]

Thanks for reporting @daniel-keller I see two potential solutions to the problem.

1. We can add a variant prop on the AvatarGroup component and propagate that property to all children avatars as well as the extra avatars Avatar in the end.

2. We can add a property extraAvatarProps on the AvatarGroup and allow the users to customize the avatar for the extra avatars however they want.

Option 2 can bring more flexibility for customizing that specific avatar, in cases another similar request for change on the end avatar comes in the future...

[oliviertassinari]

Option 1. would likely best solve this very issue. It's what we do with the ButtonGroup or ToggleButtonGroup.

Regarding option 2. and edging for future requests, developers can render the last Avatar on their own. I also wonder if the generic components and componentsProps API we are bringing in v5 won't better solve this problem than a custom new prop.

[mnajdova]

I would then propose to go with option 1. as it anyway brings better DX - you need to specify the prop only once. With components and componentsProps we can extend the flexibility later, but still have the great DX for the most common usage

[hjades]

hi! can i take this issue? thanks~

[mnajdova]

@hjades sure feel free to :)