add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles by llastflowers · Pull Request #7734 · primer/react

llastflowers · 2026-04-07T22:16:24Z

Relates to https://github.com/github/primer/issues/6497

Changelog

New

Add data-component attributes and associated for Avatar, AvatarStack, Banner, & BaseStyles

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

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

changeset-bot · 2026-04-07T22:16:29Z

🦋 Changeset detected

Latest commit: 0d4323c

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 · 2026-04-07T22:16:58Z

⚠️ Action required

👋 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. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

francinelucca · 2026-04-08T02:01:29Z

+    const root = container.querySelector('[data-component="AvatarStack"]')
+    expect(root).toHaveAttribute('data-align-right', '')


already being useful! 😛

francinelucca · 2026-04-10T16:45:13Z

+    <Button
+      data-component="Banner.SecondaryAction"
+      ref={forwardedRef}
+      className={clsx('BannerPrimaryAction', className)}
+      variant="invisible"
+      {...rest}
+    >


not relevant to this PR but why is this class=BannerPrimaryAction? 😳

Good point! I looked into it and it seems like it's been this way since the inception of Banner.tsx 😅 Probably just a copy/paste error by the looks of it! But another thing aside from that—it seems like this might actually be a legacy thing that isn't even in use?? Unless I'm just not understanding how its used 🤔 I'd be curious to know what you think!

my guess would be if you want a stable class to select 'cause after ours are computed they get a random value added to them, but this definitely feels like an error 🤔 , either way let's keep it outside the scope of this PR

francinelucca

I think after #7734 (comment) we're good to go here 👍🏽

francinelucca

✨

Add data-component attributes for Avatar, AvatarStack, Banner, and BaseStyles.

primer-integration · 2026-04-20T19:24:45Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/18946

primer-integration · 2026-04-20T21:30:24Z

Integration test results from github/github-ui:

CI Failed
VRT Failed
Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

add data-component for AvatarStack

4208dc0

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 Apr 7, 2026

llastflowers changed the title ~~Add data-component for AvatarStack~~ feat(AvatarStack): add data-component attributes for better accessibility Apr 7, 2026

llastflowers deployed to github-pages April 7, 2026 22:25 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 7, 2026 22:25 Inactive

llastflowers added 2 commits April 7, 2026 15:44

add/update tests

c8b5010

I accidentally a thing

fb17c9e

github-actions bot temporarily deployed to storybook-preview-7734 April 7, 2026 22:55 Inactive

llastflowers deployed to github-pages April 7, 2026 23:08 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 7, 2026 23:08 Inactive

try without .Item

61a6b11

llastflowers deployed to github-pages April 7, 2026 23:18 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 7, 2026 23:19 Inactive

remove unused test

40788bb

llastflowers deployed to github-pages April 7, 2026 23:28 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 7, 2026 23:29 Inactive

francinelucca reviewed Apr 8, 2026

View reviewed changes

add test for Avatar

7c384fd

llastflowers deployed to github-pages April 9, 2026 19:11 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 9, 2026 19:11 Inactive

llastflowers added 2 commits April 9, 2026 12:16

add data-component and tests for Banner and sub-components

2d12c52

add data-component and test for BaseStyles

b0461be

github-actions bot temporarily deployed to storybook-preview-7734 April 9, 2026 19:29 Inactive

llastflowers changed the title ~~feat(AvatarStack): add data-component attributes for better accessibility~~ add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles Apr 9, 2026

llastflowers deployed to github-pages April 9, 2026 19:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 9, 2026 19:40 Inactive

Merge branch 'main' into llastflowers/6497/AvatarStack

9152d48

llastflowers marked this pull request as ready for review April 10, 2026 16:17

llastflowers requested a review from francinelucca April 10, 2026 16:23

llastflowers deployed to github-pages April 10, 2026 16:27 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 10, 2026 16:28 Inactive

francinelucca reviewed Apr 10, 2026

View reviewed changes

llastflowers added 3 commits April 10, 2026 12:17

remove Banner.Dismiss per PR comment convo

a7697ff

remove Banner.Container per PR comment convo

f506834

update tests

f4c7cd4

github-actions bot temporarily deployed to storybook-preview-7734 April 10, 2026 19:27 Inactive

llastflowers deployed to github-pages April 10, 2026 19:36 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 10, 2026 19:36 Inactive

llastflowers requested a review from francinelucca April 10, 2026 20:06

francinelucca requested changes Apr 10, 2026

View reviewed changes

add test for Banner + IconButton

c2bf001

llastflowers requested a review from francinelucca April 10, 2026 22:28

primer deleted a comment from primer-integration bot Apr 10, 2026

Merge branch 'main' into llastflowers/6497/AvatarStack

359976d

github-actions bot requested a deployment to storybook-preview-7734 April 10, 2026 22:35 Abandoned

llastflowers deployed to github-pages April 10, 2026 22:46 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7734 April 10, 2026 22:46 Inactive

llastflowers added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Apr 10, 2026

francinelucca approved these changes Apr 11, 2026

View reviewed changes

Add data-component attributes for several components

0d4323c

Add data-component attributes for Avatar, AvatarStack, Banner, and BaseStyles.

llastflowers deployed to github-pages April 17, 2026 18:26 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7734 April 17, 2026 18:26 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles#7734

add data-component attributes for Avatar, AvatarStack, Banner, & BaseStyles#7734
llastflowers wants to merge 15 commits intomainfrom
llastflowers/6497/AvatarStack

llastflowers commented Apr 7, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 7, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

francinelucca Apr 8, 2026

Uh oh!

Uh oh!

Uh oh!

francinelucca Apr 10, 2026

Uh oh!

llastflowers Apr 10, 2026

Uh oh!

francinelucca Apr 10, 2026

Uh oh!

francinelucca left a comment

Uh oh!

francinelucca left a comment

Uh oh!

primer-integration bot commented Apr 20, 2026

Uh oh!

primer-integration bot commented Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const root = container.querySelector('[data-component="AvatarStack"]')
		expect(root).toHaveAttribute('data-align-right', '')

Conversation

llastflowers commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 7, 2026

⚠️ Action required

Uh oh!

francinelucca Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

francinelucca Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

llastflowers Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Apr 20, 2026

Uh oh!

primer-integration bot commented Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

llastflowers commented Apr 7, 2026 •

edited

Loading

changeset-bot bot commented Apr 7, 2026 •

edited

Loading