AvatarGroup improvements

We’d need to enhance the AvatarGroup a bit by truncating its children. By default, we would display a maximum of 4 avatars. If there is an avatars prop passed in with length > 4, the last element is replaced with a circle in the primary color, containing +${avatar.length -3} that invokes whatever the onMoreClick prop tells it to.

Proposed API

<AvatarGroup
  avatars={[]} 
  renderTooltip={avatar => <>{avatar.name}</>}
  onMoreClick={() => doSomething()}
/>

What happens onClick of an Avatar?

Nothing, for now.

What happens onMouseEnter of an Avatar?

We display whatever the renderTooltip says.

What happens onClick of (+5)?

We do whatever onMoreClick says.

Should the list expand?

No.

[micha-f]

I like it! - that’s what I had in mind 😃

[TejasQ]

I think hardcoding is flawed by design and ought to be avoided. If we want to provide a good, opinionated set of UI components, I think we ought to provide reasonable defaults with allowing a user to override it to suit whatever his/her use case or design may require.

This would mean avatarCount is a prop that defaults to 3 but can be overridden to whatever the user wants.

How does that sound?