Allow the option to format the value of extraAvatars in AvatarGroup

[NaamanTsur]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I am using the AvatarGroup component with the total prop. In my case, the total is a very large number (in the thousands) so I want to format it so it would look like this: 4K instead of +4012.

The solution can be in the form of a formatter prop which accepts the number and returns the formatted value.

Examples 🌈

No response

Motivation 🔦

The lack of this feature causes me to implement the total prop logic by myself, which is unfortunate considering the only thing I need is formatting the value.

[sujalcodes3]

Can you please describe the feature that you want in detail. if you can show an example of your total prop logic. @NaamanTsur

[siriwatknp]

I think the extraAvatar element should be customizable. I see 2 options:

• [non-breaking change] adding a new prop called renderSurplus: (surplus: number) => React.ReactElement to let developer control the text.
• [breaking] Follow Joy and deprecate the total and max props.

cc @DiegoAndai

[DiegoAndai]

@siriwatknp for v5, the non-breaking change option is the only viable one, so we should go with that one if we want to support this use case.

for v6, we can contemplate following Joy 👍🏼 I will write it down so we remember