Avatar Group API RFC

[nkrantz]

Hello from Paste

Thanks for taking the time to provide some feedback to Paste! We appreciate your contribution.

Please take a look at the following API proposal for the new Avatar Group component. Also sometimes known as Face Pile or Stacked Connections, Avatar Group displays multiple Avatars together to represent people or entities within the same group. Avatar Group will be exported from the same package as the existing Avatar component.

Proposed API:

<AvatarGroup size="sizeIcon90">
  <Avatar size="sizeIcon90" name="Nora Krantz"/>
  <Avatar size="sizeIcon90" name="Loreina Chew"/>
  <Avatar size="sizeIcon90" name="Shadi Isber"/>
</AvatarGroup>

Note: The proposed API has a required prop, size, which should match the token value passed to the Avatar components. The spacing of the Avatar Group is determined based on this value. All Avatars in an Avatar Group should be the same size.

Check out the API Exploration CodeSandbox.

Please share any feedback or suggestions you might have! Thanks.

[TheSisb]

Hi @nkrantz,

Thanks for piloting the RFC process! 👏

Giving this some more thought, maybe we should use context to mimic our other components after all. We can pass size as it is in your example to AvatarGroup, which will set it on a context provider. Then, we can modify Avatar to get size from the context consumer.

Example:

<AvatarGroup size="sizeIcon90">
  <Avatar name="Nora Krantz"/>
  <Avatar name="Loreina Chew"/>
  <Avatar name="Shadi Isber"/>
</AvatarGroup>

Added benefit, since we don't want odd sized avatars in a group, we can make the context take precedence. So that, in the following example, sizeIzon50 is ignored:

<AvatarGroup size="sizeIcon90">
  <Avatar name="Nora Krantz"/>
  <Avatar size="sizeIcon50" name="Loreina Chew"/>
  <Avatar name="Shadi Isber"/>
</AvatarGroup>

It's a small improvement over spreading it everywhere and should be easy to do.

[TheSisb]

The component has been released and the window for comment has been closed.