Skip to content

Fix/avatar button leading visual sizing - #8550

Open
naveedsajjdawan wants to merge 6 commits into
primer:mainfrom
naveedsajjdawan:fix/avatar-button-leading-visual-sizing
Open

naveedsajjdawan wants to merge 6 commits into
primer:mainfrom
naveedsajjdawan:fix/avatar-button-leading-visual-sizing

Conversation

@naveedsajjdawan

Copy link
Copy Markdown

Closes #

Changelog

New

Changed

Removed

Rollout strategy

  • No changes needed in github/github-ui
  • Needs changes in github/github-ui
  • Ships with feature flag(s)
  • Not sure
  • None

Testing & Reviewing

@naveedsajjdawan
naveedsajjdawan requested a review from a team as a code owner October 15, 2026 08:41
@changeset-bot

changeset-bot Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2930dbc

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

Add browser coverage that verifies consumer sizing overrides remain square, guarding against the regression exposed by primer#8550.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Avoid screenshot baselines for the development-only regression fixture so the test fails only when computed dimensions change.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

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

Thanks for working on this! Adding min-width introduces a sizing regression. Here’s a minimal reproduction:

<div style={{'--avatar-size': '16px'} as React.CSSProperties}>
  <Avatar
    src="https://github.com/github.png"
    style={{
      width: 'var(--avatar-size)',
      height: 'var(--avatar-size)',
    }}
  />
</div>

The new min-width remains 20px while the overridden width and height are 16px. The image therefore renders at 20px × 16px and appears stretched.

Image

Could we address the issue without changing the rendered dimensions in this case?

@primer-integration

primer-integration Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Waiting  Changes   Waiting
Passed  CI   Passed
Running  VRT   Running
Waiting  Projects   Waiting

@github-actions github-actions Bot added the integration-tests: failing Changes in this PR cause breaking changes in gh/gh label Oct 19, 2026

This branch was successfully deployed

1 active deployment
github-pages — 2930dbc0 Deployed Oct 20, 2026 by naveedsajjdawan via deploy-preview #30067
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: failing Changes in this PR cause breaking changes in gh/gh

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants