Update AvatarStack to not reserve extra layout space when collapsed - #8258
Conversation
🦋 Changeset detectedLatest commit: 154cbc4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
AvatarStack to not reserve space when collapsed
There was a problem hiding this comment.
Pull request overview
This pull request updates AvatarStack’s collapsed styling so hidden avatars don’t reserve layout space, aligning the component’s rendered layout more closely with what users see (including when disableExpand is enabled).
Changes:
- Switches the “avatars after the 5th” collapsed rule from
visibility: hiddentodisplay: noneto prevent reserved space. - Ensures hidden avatars can be re-shown on hover/focus-within by explicitly setting
displayin the expanded interaction styles. - Adds a changeset for a patch release of
@primer/react.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/AvatarStack/AvatarStack.module.css | Updates collapsed/expanded CSS so extra avatars don’t reserve layout space when collapsed. |
| .changeset/fresh-ideas-worry.md | Adds a patch changeset documenting the user-facing behavior change. |
Review details
- Files reviewed: 2/2 changed files
- Comments generated: 2
- Review effort level: Lite
AvatarStack to not reserve space when collapsedAvatarStack to not reserve extra layout space when collapsed
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Integration test results from github/github-ui PR:
All checks passed! |
Closes https://github.com/github/primer/issues/6922
Changelog
Changed
Update
AvatarStack&:nth-child(n + 6)CSS block to includeposition: absoluteso that the hidden Avatars don't reserve layout space when collapsed (including whendisableExpandis true).Demo:
Screen.Recording.2026-08-03.at.12.19.38.mov
(Temporary story used for testing/demo only; not added in this PR.)
Rollout strategy
Testing & Reviewing
Reviewers, please let me know if you foresee any potential issues (a11y or otherwise) with this solution. I could not think of any, and testing didn't reveal anything.