Add Menu to AvatarGroup when a max is set

Feature request

Is your feature request related to a problem? Please describe.

I want to show a menu showing the rest of the users that exceed the max limit set on the AvatarGroup component

Example

Describe the solution you’d like

We could add a way to wrap the remaining avatar label with a Menu component, maybe something like this

<AvatarGroup size="md" max={2}>
  <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
  <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
  <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
  <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
  <Avatar name="Christian Nwamba" src="https://bit.ly/code-beast" />
  <Menu>
     <MenuButton>
      <AvatarGroup.Remaining/>
     </MenuButton>
     <MenuList>
        { /* ... */ }
     </MenuList>
  </Menu>
</AvatarGroup>

or add Menu inside AvatarGroup component and we pass a prop remainingMenuOption on how to render the remaining avatars in the menu list

<AvatarGroup 
size="md" 
max={2} 
remainingMenuOption={({name, src}) => 
<AvatarGroup.MenuOption>
  <Avatar name={name} src={src}/>
  <Text>{name}</Text>
</AvatarGroup.MenuOption>
}>
  <Avatar name="Ryan Florence" src="https://bit.ly/ryan-florence" />
  <Avatar name="Segun Adebayo" src="https://bit.ly/sage-adebayo" />
  <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
  <Avatar name="Prosper Otemuyiwa" src="https://bit.ly/prosper-baba" />
  <Avatar name="Christian Nwamba" src="https://bit.ly/code-beast" />
</AvatarGroup>

these are rough ideas, I am not sure if spacing for the AvatarGroup would still work for the first example. I am also aware that AvatarGroup doesn’t take a list of users so am not sure how it will pass the name and src to remainingMenuOption.

[with-heart]

That’s an interesting use case. We’d need to add a context behind AvatarGroup and some additional components that allow you to use the excess avatars in some way. Not sure if that’s effort we’d be interested in spending, but I’ll reopen it as a feature so we can consider it.

[ljosberinn]

Personally havent tried this yet but… what about:

<Menu as={AvatarGroup}>
  <MenuButton as={Avatar}>
    ...
  </MenuButton>
  <MenuList>
    <MenuItem as={Avatar}>...</MenuItem>
  </MenuList>
</Menu>

This should be solved through some kind of composition imo. Chakra aims to avoid this kind of app-individual implementation and tries to provide you with the tools you need to build it depending on your use-case. It seems to be more fitting for a guide post v1 😃