Skip to content

✨ feat: add Avatar and AvatarGroup components - #733

Open
futjesus wants to merge 1 commit into
mainfrom
feat/avatar
Open

futjesus wants to merge 1 commit into
mainfrom
feat/avatar

Conversation

@futjesus

@futjesus futjesus commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Teams (MemberAvatar, MemberAvatars), dashboard-manager (UserAvatar, AccountAvatar) and settings (AvatarCard) each reimplement the same Gravatar lookup (SHA-256 of the trimmed lower-cased email, d=404) and the image → initials → icon fallback chain.

  • Avatar (new): src first, then a Gravatar for email (skipped when crypto.subtle is unavailable), then fallback initials, then icon (ProfileIcon by default). A failed image falls back and recovers when the source changes. Single role="img" named by alt; sizes sm / md / lg.
  • AvatarGroup (new): overlapping stack, max with a "+N" bubble, dashed placeholder when empty; label, overflowLabel and emptyLabel are callbacks for localisation.
  • Both exported from the package root. The hover-spread animation from teams was left out on purpose.

Test plan

  • New tests: image named by alt, error fallback and recovery, initials/icon fallbacks, Gravatar URL from normalised email, group listing, overflow bubble, empty placeholder, axe on both
  • npx vitest run lib/components/Avatar lib/components/AvatarGroup, lint, types, prettier
  • Storybook: Avatar

Teams (MemberAvatar, MemberAvatars), dashboard-manager (UserAvatar,
AccountAvatar) and settings (AvatarCard) each reimplement the same
Gravatar lookup (SHA-256 of the trimmed lower-cased email with `d=404`)
and the image → initials → icon fallback chain, including the error reset
when the source changes.

Avatar renders that chain behind a single `role="img"` named by `alt`,
with `src`, `email`, `fallback` and `icon` inputs and three sizes.
AvatarGroup stacks avatars with overlap, collapses the ones beyond `max`
into a "+N" bubble and renders a dashed placeholder when empty; every
text is localisable through callbacks.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant