Skip to content

Prevent Avatar from shrinking in Button visuals - #8194

Open
wanxiankai wants to merge 3 commits into
primer:mainfrom
wanxiankai:fix/avatar-leading-visual-size
Open

Prevent Avatar from shrinking in Button visuals#8194
wanxiankai wants to merge 3 commits into
primer:mainfrom
wanxiankai:fix/avatar-leading-visual-size

Conversation

@wanxiankai

Copy link
Copy Markdown

Closes #7974

Changelog

New

  • Added a patch changeset for the Avatar sizing fix.

Changed

  • Set Avatar min-width from the same size variables as width so avatars retain their intended intrinsic width in min-content slots, including Button leading visuals.
  • Added a CSS rule test that verifies the non-shrinking min-width declaration is present.

Removed

  • None.

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

  • npm run test -- packages/react/src/Avatar/Avatar.test.tsx --run
  • npm exec eslint -- packages/react/src/Avatar/Avatar.test.tsx
  • npm exec stylelint -- packages/react/src/Avatar/Avatar.module.css
  • npm run test:type-check
  • npm exec prettier -- --check packages/react/src/Avatar/Avatar.module.css packages/react/src/Avatar/Avatar.test.tsx .changeset/green-avatars-stand.md

@wanxiankai
wanxiankai requested a review from a team as a code owner July 20, 2026 03:57
@wanxiankai
wanxiankai requested a review from liuliu-dev July 20, 2026 03:57
@changeset-bot

changeset-bot Bot commented Jul 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a23832e

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

@liuliu-dev liuliu-dev added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Aug 3, 2026

@liuliu-dev liuliu-dev 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.

This change is causing VRT failures in the AvatarStack custom-size responsive story. https://primer-874780de13-13348165.drafts.github.io/storybook/?path=/story/components-avatarstack-features--custom-size-on-children-responsive

Could we address this regression?

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.

Avatar in Button leadingVisual slot does not properly size img due to conflicting styles

3 participants