Skip to content

Update AvatarStack to not reserve extra layout space when collapsed - #8258

Merged
llastflowers merged 4 commits into
mainfrom
llastflowers/6922/AvatarStack-hidden-fix
Aug 4, 2026
Merged

Update AvatarStack to not reserve extra layout space when collapsed#8258
llastflowers merged 4 commits into
mainfrom
llastflowers/6922/AvatarStack-hidden-fix

Conversation

@llastflowers

@llastflowers llastflowers commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Closes https://github.com/github/primer/issues/6922

Changelog

Changed

Update AvatarStack &:nth-child(n + 6) CSS block to include position: absolute so that the hidden Avatars don't reserve layout space when collapsed (including when disableExpand is 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

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

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.

Copilot AI review requested due to automatic review settings August 3, 2026 18:16
@llastflowers
llastflowers requested a review from a team as a code owner August 3, 2026 18:16
@changeset-bot

changeset-bot Bot commented Aug 3, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 154cbc4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

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

@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Aug 3, 2026
@github-actions

github-actions Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

@llastflowers llastflowers changed the title Update AvatarStack to not reserve space when collapsed Update AvatarStack to not reserve space when collapsed Aug 3, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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: hidden to display: none to prevent reserved space.
  • Ensures hidden avatars can be re-shown on hover/focus-within by explicitly setting display in 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

Comment thread packages/react/src/AvatarStack/AvatarStack.module.css
Comment thread packages/react/src/AvatarStack/AvatarStack.module.css Outdated
@github-actions
github-actions Bot requested a deployment to storybook-preview-8258 August 3, 2026 18:21 Abandoned
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8258 August 3, 2026 18:31 Inactive
@llastflowers llastflowers changed the title Update AvatarStack to not reserve space when collapsed Update AvatarStack to not reserve extra layout space when collapsed Aug 3, 2026
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@github-actions
github-actions Bot requested a deployment to storybook-preview-8258 August 3, 2026 19:37 Abandoned
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8258 August 3, 2026 19:48 Inactive
@primer-integration

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Passed  CI   Passed
Passed  VRT   Passed
Passed  Projects   Passed

All checks passed!

@llastflowers
llastflowers added this pull request to the merge queue Aug 4, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Aug 4, 2026
@llastflowers
llastflowers added this pull request to the merge queue Aug 4, 2026
Merged via the queue into main with commit edbcd94 Aug 4, 2026
54 checks passed
@llastflowers
llastflowers deleted the llastflowers/6922/AvatarStack-hidden-fix branch August 4, 2026 16:15
@primer primer Bot mentioned this pull request Aug 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants