Skip to content

Conversation

@TylerJDev
Copy link
Member

@TylerJDev TylerJDev commented Dec 2, 2025

Fixes multiple minor issues with the AvatarStack component.

Additional context: [Slack conversation](https://github.slack.com/archives/C0948TXP4U

With single Avatar

Before
AvatarStack component with single circular Avatar, with an incorrect square border

After
AvatarStack component with single circular Avatar, with a circular border

With multiple Avatar(s)

Before
AvatarStack component with multiple circular Avatars, with cutoff borders in dark theme

AvatarStack component with multiple circular Avatars, with cutoff borders in light theme

After
AvatarStack component with multiple circular Avatars, with correct borders in dark theme

AvatarStack component with multiple circular Avatars, with correct borders in light theme

Changelog

Changed

  • Fixes issue where square border applies when using non-avatar children within AvatarStack
  • Fixes issue where using square={true} did not apply on individual Avatar components within AvatarStack

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

Merge checklist

@changeset-bot
Copy link

changeset-bot bot commented Dec 2, 2025

🦋 Changeset detected

Latest commit: 0a98007

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 Dec 2, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2025

👋 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. Or, apply the integration-tests: skipped manually label to skip these checks.

@github-actions github-actions bot added the staff Author is a staff member label Dec 2, 2025
@github-actions github-actions bot temporarily deployed to storybook-preview-7259 December 2, 2025 17:38 Inactive
@TylerJDev TylerJDev changed the title Fix border issue AvatarStack: Prevent border styles from applying to non-avatar components Dec 3, 2025
@TylerJDev TylerJDev marked this pull request as ready for review December 3, 2025 02:56
@TylerJDev TylerJDev requested a review from a team as a code owner December 3, 2025 02:56
@TylerJDev TylerJDev requested review from Copilot and pksjce December 3, 2025 02:56
@github-actions github-actions bot temporarily deployed to storybook-preview-7259 December 3, 2025 02:58 Inactive
Copilot finished reviewing on behalf of TylerJDev December 3, 2025 02:59
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes two issues with the AvatarStack component: preventing border styles from incorrectly applying to non-Avatar children (like Link wrappers), and allowing individual Avatar components to use the square prop within an AvatarStack.

Key Changes:

  • Added :where([data-component='Avatar']) selector to CSS to target only Avatar components for border styling
  • Modified the square prop logic to preserve individual Avatar's square prop when the stack shape is 'circle'
  • Added visual regression test coverage through a new Storybook story

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/react/src/AvatarStack/AvatarStack.tsx Updates prop transformation logic to preserve individual Avatar's square prop
packages/react/src/AvatarStack/AvatarStack.module.css Adds data-component selector to prevent border styles on non-Avatar children
packages/react/src/AvatarStack/AvatarStack.features.stories.tsx Adds WithSquareAvatars story for visual testing
e2e/components/AvatarStack.test.ts Registers new story in e2e test suite
.changeset/bitter-cougars-deny.md Documents the bug fixes in changeset

return React.cloneElement(child, {
...child.props,
square: shape === 'square' ? true : undefined,
square: (shape === 'square' ? true : undefined) || child.props.square,
Copy link

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

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

The logical OR operator (||) will incorrectly handle the case when child.props.square is explicitly false. When shape !== 'square' and child.props.square === false, the expression evaluates to undefined || false = false, which would make the avatar square even though the stack shape is 'circle'.

Consider simplifying to:

square: shape === 'square' ? true : child.props.square,

This correctly:

  • Forces all avatars to be square when shape='square'
  • Preserves the individual avatar's square prop when shape='circle' (including when it's explicitly false)
Suggested change
square: (shape === 'square' ? true : undefined) || child.props.square,
square: shape === 'square' ? true : child.props.square,

Copilot uses AI. Check for mistakes.
return React.cloneElement(child, {
...child.props,
square: shape === 'square' ? true : undefined,
square: (shape === 'square' ? true : undefined) || child.props.square,
Copy link

Copilot AI Dec 3, 2025

Choose a reason for hiding this comment

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

Consider adding unit tests to verify the square prop behavior that this PR fixes. For example:

  • Test that shape="square" applies square={true} to Avatar children
  • Test that individual Avatar's square prop is respected when stack shape is 'circle'
  • Test that non-Avatar children don't receive the square prop

This would prevent regression of the bugs this PR fixes.

Copilot uses AI. Check for mistakes.
@github-actions github-actions bot requested a deployment to storybook-preview-7259 December 4, 2025 21:48 Abandoned
@github-actions github-actions bot requested a deployment to storybook-preview-7259 December 4, 2025 21:56 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-7259 December 4, 2025 22:35 Inactive
@TylerJDev TylerJDev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 5, 2025
@TylerJDev TylerJDev requested a review from joshblack December 5, 2025 14:50
@primer primer bot requested a review from a team as a code owner December 5, 2025 15:00
@github-actions github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Dec 5, 2025
@TylerJDev TylerJDev added this pull request to the merge queue Dec 8, 2025
Merged via the queue into main with commit c32b964 Dec 8, 2025
49 checks passed
@TylerJDev TylerJDev deleted the tylerjdev/fix-avatar-single-border branch December 8, 2025 15:22
@primer primer bot mentioned this pull request Dec 8, 2025
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 staff Author is a staff member

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants