Skip to content

feat: Add AvatarGroup#1051

Draft
pawelgrimm wants to merge 57 commits into
mainfrom
pawel/feat/avatar-group
Draft

feat: Add AvatarGroup#1051
pawelgrimm wants to merge 57 commits into
mainfrom
pawel/feat/avatar-group

Conversation

@pawelgrimm
Copy link
Copy Markdown
Contributor

@pawelgrimm pawelgrimm commented May 28, 2026

Description

Adds <AvatarGroup> for overlapping avatar collections. It includes:

  • Size-based overlap and clipping masks
  • Rounded and circle shape support
  • Accessible decorative group count overlay
  • Cool docs and stories, featuring the top Reactist contributors from the last year

References

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Reviewed and approved Chromatic visual regression tests in CI

📸 Demo

CleanShot 2026-05-27 at 22 32 48@2x

pawelgrimm and others added 17 commits May 27, 2026 12:39
Replace ::after pseudo with a real span so the count is in the DOM
(better SR support, queryable in tests). Drop data-count attribute;
use class-based selectors. Visual now reads "+N" instead of bare N.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tighten getContributor / getWorkspaceName return types and extract the
workspace helper so callers don't need ! everywhere.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Count "+N" overlay is purely visual; mark aria-hidden so screen readers
don't announce the literal "+3" after the named avatars. Group-level
aria-label remains the way to convey count semantically.
The overlay is a sibling of the avatars and inherits the sibling mask
that visually notches each avatar onto the previous one. Suppress it on
.avatarGroupCount directly instead of via :nth-child(2), so the rule
holds regardless of how many avatars the group contains.
count is number | undefined; the explicit != null guard was redundant
with the > 0 check.
The count is rendered as a separate +N sibling, not "represented by the
final avatar" as the previous JSDoc suggested. Also notes that the
overlay is aria-hidden.
@pawelgrimm pawelgrimm mentioned this pull request May 28, 2026
3 tasks
@pawelgrimm pawelgrimm self-assigned this May 28, 2026
@pawelgrimm pawelgrimm added the 🙋 Ask PR Used for PRs that need a review before merging. label May 28, 2026
@pawelgrimm pawelgrimm marked this pull request as draft May 28, 2026 03:34
@pawelgrimm pawelgrimm mentioned this pull request May 28, 2026
3 tasks
pawelgrimm and others added 4 commits May 27, 2026 23:26
Add WHY comments for mask geometry; drop redundant default-size block in
.avatarGroup (size class always wins); rename
--reactist-avatar-group-mask -> -mask-thickness and -count-overlay ->
-count-overlay-background for clarity.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@pawelgrimm pawelgrimm force-pushed the pawel/avatar-component-api branch from f86eb30 to 30fca01 Compare May 28, 2026 20:12
Base automatically changed from pawel/avatar-component-api to main May 28, 2026 20:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🙋 Ask PR Used for PRs that need a review before merging.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant