feat: Add AvatarGroup#1050
Closed
pawelgrimm wants to merge 16 commits into
Closed
Conversation
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>
Adds describe('a11y') blocks for AvatarGroup and AvatarPair, mirroring
Avatar's existing coverage as required by the per-component a11y
convention.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- AvatarPair JSDoc spells out "exactly two children" and the foreground vs. overlay roles - mdx mirrors that, notes the count renders as +N, and points consumers at aria-label on the group root when it's a labeled entity - corrects stale --reactist-avatar-pair-rounded-radius default (4px → 5px) 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.
Tighten children type to readonly [ReactElement, ReactElement]. Catches both wrong-count and conditional-false cases that would otherwise break the :first-child/:last-child positioning rules.
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.
Used by both AvatarGroup and AvatarPair; the group-specific name was misleading.
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.
Contributor
Author
|
Superseded by #1051, which uses the AvatarGroup-only branch pawel/feat/avatar-group. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Short description
Adds
AvatarGroupandAvatarPaircomponents for overlapping avatar collections, including polymorphic roots, exact pair child typing, an accessible decorative group count overlay, and circle/rounded clipping masks.Documents the APIs in the Avatar docs and adds dedicated Storybook stories for group/pair variants and visual regression coverage.
PR Checklist