[AvatarGroup] Add the possibility to show a tooltip when using a group

[nifaliana]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

[AvatarGroup] When hovering on the +2 avatar icon (the last avatar component) , It should show a tooltip or another customizable component to show the extra avatars.

Examples 🌈

Motivation 🔦

We need more possiblity and flexibility with the Avatar Group component

[danilo-leal]

Hey @nifaliana, thanks for dropping this suggestion! It does sounds like a good idea, I wonder if it is already possible to pull this off by using the Tooltip component. cc @siriwatknp, something to think about for Joy as well.

[danilo-leal]

@siriwatknp do you think it is already possible to pull this off?

[siriwatknp]

It is not out-of-the box (I don't think you can use Tooltip because the extra element is wrapped inside the AvatarGroup) but you can compose the popper by yourself like this: https://codesandbox.io/s/groupavatars-material-demo-forked-o1skt9?file=/demo.tsx

[siriwatknp]

In my opinion, the AvartarGroup should not be this complicated. It should be like this:

<AvatarGroup>
  <Avatar />
  <Avatar />
  <Avatar>+4</Avatar> // I think it is more convenient to let developers compose this by themselves
</AvatarGroup>

We will be able to

• get rid of props max, total, componentsProps
• close [AvatarGroup] Add a prop for configuring the overlap #30789
• close [AvatarGroup] Clickable "ellipsis" #27677

[oliviertassinari]

props max

Introduced in #19853

props total

Introduced in #29649

In my opinion, the AvartarGroup should not be this complicated. It should be like this:

@siriwatknp I think that the initial incentive for the max prop was that if a developer queries the avatars from an API, then it can keep his source simple. We can compare the API between Joy UI and Material UI.

What is sold on #31980 is IMHO not in sync with what would happen in production:

// Material
<AvatarGroup max={4}>
  {items.map(() => <Avatar />}
</AvatarGroup>

// Joy
<AvatarGroup>
  {items.slice(0, 5).map(() => <Avatar />}
  <Avatar>+4</Avatar>
</AvatarGroup>

In #19853, the assumption is that the API returns all the editors, it would then looks something like this:

// Material
<AvatarGroup max={4}>
  {items.map(() => <Avatar />}
</AvatarGroup>

// Joy
<AvatarGroup>
  {items.length <= 4 ? items.slice(0, 4).map(() => <Avatar /> : null}
  {items.length > 4 ? items.slice(0, 3).map(() => <Avatar /> : null}
  {items.length > 4 ? <Avatar>{`+${items.length - 3}`}</Avatar> : null}
</AvatarGroup>

in #29649, the assumption is that the API would return the total number, and only the first 4 avatars, it would then look something like this:

// Material
<AvatarGroup max={4} total={TOTAL}>
  {items.map(() => <Avatar />}
</AvatarGroup>

// Joy
<AvatarGroup>
  {TOTAL <= 4 ? items.slice(0, 4).map(() => <Avatar /> : null}
  {TOTAL > 4 ? items.slice(0, 3).map(() => <Avatar /> : null}
  {TOTAL > 4 ? <Avatar>{`+${TOTAL - 3}`}</Avatar> : null}
</AvatarGroup>

So, I would argue what's simpler depends 😁. Added a few benchmark source for the avatar component in https://www.notion.so/mui-org/Avatar-f2899e05654b43748793148dc8a0a39e.

[siriwatknp]

So, I would argue what's simpler depends 😁

I still favor Joy's approach because you can create a plain function abstraction like this:

// showExtra is the same logic as in Material UI
import { showExtra } from '@mui/joy/AvatarGroup';

<AvatarGroup>
  {showExtra({
    data: items,
    max: ...,
    total: ...,
  }, (item) => <Avatar src={...} />)}
</AvatarGroup>