Skip to content

Remove left/right bg color borders from Avatar Stack#3727

Merged
jonrohan merged 4 commits intomainfrom
avatar_stack_remove_borders
Oct 8, 2025
Merged

Remove left/right bg color borders from Avatar Stack#3727
jonrohan merged 4 commits intomainfrom
avatar_stack_remove_borders

Conversation

@jonrohan
Copy link
Copy Markdown
Member

@jonrohan jonrohan commented Oct 8, 2025

When testing the latest release I found that the avatar stack changes made them look a little egg like

CleanShot 2025-10-08 at 11 55 35@2x

This is because we were putting borders on them to try and separate them visually, but react's change in style to outline them is a better approach.

Copilot AI review requested due to automatic review settings October 8, 2025 18:56
@jonrohan jonrohan requested a review from a team as a code owner October 8, 2025 18:56
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Oct 8, 2025

🦋 Changeset detected

Latest commit: abbe5d2

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

This PR includes changesets to release 1 package
Name Type
@primer/view-components 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

Copy link
Copy Markdown
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 removes left and right background color borders from Avatar Stack components to fix an "egg-like" appearance that was caused by the border styling approach. The change simplifies the visual separation by relying on React's outline styling instead of CSS borders.

  • Removes border-right and border-left properties from avatar elements
  • Eliminates border-specific styling rules for last-child and RTL layouts
  • Cleans up associated stylelint disable comments for removed border styles

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Oct 8, 2025

Uh oh! @jonrohan, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

  • Images should have meaningful alternative text (alt text) at line 3

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

This change removes the left and right background color borders from the Avatar Stack component.
@jonrohan jonrohan requested a review from a team as a code owner October 8, 2025 18:58
@jonrohan jonrohan requested a review from TylerJDev October 8, 2025 18:58
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Oct 8, 2025

⚠️ Visual or ARIA snapshot differences found

Our visual and ARIA snapshot tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review differences

@github-actions github-actions Bot requested a review from a team as a code owner October 8, 2025 19:12
@jonrohan jonrohan merged commit 1ebafaa into main Oct 8, 2025
28 checks passed
@jonrohan jonrohan deleted the avatar_stack_remove_borders branch October 8, 2025 21:01
@primer primer Bot mentioned this pull request Oct 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants