-
Notifications
You must be signed in to change notification settings - Fork 646
AvatarStack: Prevent border styles from applying to non-avatar components #7259
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: 0a98007 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 |
|
👋 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 |
There was a problem hiding this 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
squareprop 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, |
Copilot
AI
Dec 3, 2025
There was a problem hiding this comment.
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
squareprop whenshape='circle'(including when it's explicitlyfalse)
| square: (shape === 'square' ? true : undefined) || child.props.square, | |
| square: shape === 'square' ? true : child.props.square, |
| return React.cloneElement(child, { | ||
| ...child.props, | ||
| square: shape === 'square' ? true : undefined, | ||
| square: (shape === 'square' ? true : undefined) || child.props.square, |
Copilot
AI
Dec 3, 2025
There was a problem hiding this comment.
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"appliessquare={true}to Avatar children - Test that individual Avatar's
squareprop 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.
Fixes multiple minor issues with the
AvatarStackcomponent.Additional context: [Slack conversation](https://github.slack.com/archives/C0948TXP4U
With single
AvatarBefore

After

With multiple
Avatar(s)Before

After

Changelog
Changed
AvatarStacksquare={true}did not apply on individualAvatarcomponents withinAvatarStackRollout strategy
Testing & Reviewing
Merge checklist