data-component adr part 2 by llastflowers · Pull Request #7776 · primer/react

llastflowers · 2026-04-23T21:11:34Z

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

Changelog

New

Add data-component attributes and associated tests for Blankslate, BranchName, Breadcrumbs, ButtonGroup, Checkbox, CheckboxGroup, CircleBadge, ConfirmationDialog, and CounterLabel.

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-23T21:11:39Z

🦋 Changeset detected

Latest commit: 3b8e25d

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	Minor

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-23T21:12:04Z

⚠️ 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.

…ded (and fix test)

…d fix test)

…data-component to Dialog.tsx while I'm at it

primer-integration · 2026-05-07T16:19:15Z

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

primer-integration · 2026-05-07T16:48:09Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

francinelucca · 2026-05-07T21:34:05Z

  'aria-label'?: string
 }

 const BreadcrumbsMenuItem = React.forwardRef<HTMLDetailsElement, BreadcrumbsMenuItemProps>(


should this element have a data-component as well?

Not sure; it's not exported so I didn't think so. Do you think it should?

I vote we add it, your call though!

francinelucca · 2026-05-07T21:35:29Z

+      return React.Children.map(children, child => (
+        <li className={classes.ItemWrapper} data-component="Breadcrumbs.ItemWrapper">
+          {child}
+        </li>


I don't think we need a wrapper data-component here

francinelucca · 2026-05-07T21:37:36Z

  Label: CheckboxOrRadioGroupLabel,
  Validation: CheckboxOrRadioGroupValidation,


Should Label, Validation have data-component as well?

Sure! Would you suggest including Caption too in that case?

These all have to pass through CheckboxOrRadioGroup etc. too, which are also used by RadioGroup and its sub-components. Let me know what pattern you think would be best for that so [data-component="CheckboxGroup"] and [data-component="RadioGroup"] still work separately.

For this PR, I wonder if it would be better to just take CheckboxGroup out for now until I can open a new one with RadioGroup too? I don't really want to make this one even bigger 🤔

yeah, Caption too!. I think similar to the way you did CheckboxOrRadioGroup, maybe take the parentName as the prop?

francinelucca · 2026-05-07T21:39:47Z

+      // @ts-expect-error inputProp needs a non nullable ref
+      <input
+        {...inputProps}
+        data-component={dataComponent ?? 'Checkbox'}


why does this need to take in dataComponent as a prop?

I was trying to make sure [data-component=FilteredActionList.SelectAllCheckbox] (and possibly others that we haven't run into yet) could still be used without being overridden by [data-component=Checkbox]. Let me know if you have a different suggestion!

francinelucca · 2026-05-07T21:43:37Z

-        <span {...counterProps} className={clsx(className, classes.CounterLabel)}>
+        <span
+          {...counterProps}
+          data-component={dataComponent ?? 'CounterLabel'}


why does this need to take in dataComponent as a prop?

I was trying to make sure [data-component=ButtonCounter] could still be used without being overridden by [data-component=CounterLabel]. Let me know if you have a different suggestion!

francinelucca · 2026-05-07T21:45:45Z

+            <ScrollableRegion
+              aria-labelledby={dialogLabelId}
+              className={classes.DialogOverflowWrapper}
+              data-component="Dialog.OverflowWrapper"
+            >


don't think we need this

francinelucca · 2026-05-07T21:46:33Z

    <Dialog.Header>
      <div className={classes.HeaderInner}>
-        <div className={classes.HeaderContent}>
+        <div className={classes.HeaderContent} data-component="Dialog.Header.Content">


don't think we need this

francinelucca · 2026-05-07T21:50:10Z

    <>
      {buttons.map((dialogButtonProps, index) => {
        const {content, buttonType = 'default', autoFocus = false, ...buttonProps} = dialogButtonProps
        return (
          <Button
            key={index}
            {...buttonProps}
            // 'normal' value is equivalent to 'default', this is used for backwards compatibility
            variant={buttonType === 'normal' ? 'default' : buttonType}
            // @ts-expect-error it needs a non nullable ref
            ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
          >
            {content}
          </Button>
        )
      })}
    </>
  )
 }


this is such a weird component 😢.
Are we confident [data-component="Dialog] [data-component="Button] will only match these? if not let's override the data-component for the button so that we have a way to reach only these 🤷🏽

francinelucca · 2026-05-07T21:51:52Z

    expect(getByRole('dialog')).not.toHaveAttribute('data-has-footer')
  })

+  it('renders data-component attribute', () => {


can we add tests for the subcomponents here as well

llastflowers added 6 commits April 23, 2026 13:40

update Blankslate.tsx

18e62c1

update BranchName.tsx

c998ef9

update Breadcrumbs.tsx

f6611b6

update Checkbox.tsx

30b17ac

update CheckboxGroup.tsx

0c5dc5b

update CircleBadge.tsx

4eddeac

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

update ConfirmationDialog.tsx

0db8004

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

github-actions Bot temporarily deployed to storybook-preview-7776 April 23, 2026 21:21 Inactive

llastflowers added 4 commits April 23, 2026 14:36

update CounterLabel.tsx

cfb81aa

update ButtonGroup.tsx

5d63009

add Blankslate tests

762f456

add BranchName tests

bc95f08

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

github-actions Bot temporarily deployed to storybook-preview-7776 April 23, 2026 21:58 Inactive

llastflowers added 7 commits April 23, 2026 15:07

add Breadcrumbs tests

508ed46

add ButtonGroup tests

f594278

add Checkbox tests

9f3e897

add CheckboxGroup tests

d418536

add CircleBadge tests

f5dfefc

add ConfirmationDialog tests

7c440df

add CounterLabel tests

23a7f29

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

github-actions Bot temporarily deployed to storybook-preview-7776 April 23, 2026 23:29 Inactive

llastflowers added 2 commits April 23, 2026 16:39

revert accidental changes

2a34eac

revert accidental changes

8156abf

github-actions Bot requested a deployment to storybook-preview-7776 April 23, 2026 23:45 Abandoned

jonrohan approved these changes May 4, 2026

View reviewed changes

llastflowers deployed to github-pages May 4, 2026 20:57 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7776 May 4, 2026 20:58 Inactive

llastflowers added 2 commits May 4, 2026 16:36

change so that CounterLabel can be overridden by ButtonCounter if nee…

9fe4a41

…ded (and fix test)

let FilteredActionList.SelectAllCheckbox override Checkbox if set (an…

5f4d229

…d fix test)

llastflowers deployed to github-pages May 5, 2026 00:01 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7776 May 5, 2026 00:01 Inactive

Merge branch 'main' into llastflowers/6497/data-component-ADR-part-2

30dd1e9

llastflowers deployed to github-pages May 6, 2026 18:00 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7776 May 6, 2026 18:00 Inactive

fix for integration test failure

8f866f3

llastflowers deployed to github-pages May 6, 2026 19:03 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7776 May 6, 2026 19:03 Inactive

llastflowers added Canary Release Apply this label when you want CI to create a canary release of the current PR and removed Canary Release Apply this label when you want CI to create a canary release of the current PR labels May 6, 2026

change Dialog prop forwarding to be more specific, and also just add …

3a258ca

…data-component to Dialog.tsx while I'm at it

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

github-actions Bot temporarily deployed to storybook-preview-7776 May 6, 2026 23:09 Inactive

llastflowers and others added 3 commits May 6, 2026 16:14

Add Dialog tests

eac5fc8

update changeset to include Dialog

413a6fb

Merge branch 'main' into llastflowers/6497/data-component-ADR-part-2

3b8e25d

github-actions Bot requested a deployment to storybook-preview-7776 May 6, 2026 23:20 Abandoned

llastflowers added Canary Release Apply this label when you want CI to create a canary release of the current PR and removed Canary Release Apply this label when you want CI to create a canary release of the current PR labels May 6, 2026

llastflowers deployed to github-pages May 6, 2026 23:29 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-7776 May 6, 2026 23:30 View deployment

llastflowers changed the title ~~Llastflowers/6497/data component adr part 2~~ data-component adr part 2 May 7, 2026

francinelucca requested changes May 7, 2026

View reviewed changes

		Label: CheckboxOrRadioGroupLabel,
		Validation: CheckboxOrRadioGroupValidation,

Conversation

llastflowers commented Apr 23, 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 23, 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 23, 2026

⚠️ Action required

Uh oh!

primer-integration Bot commented May 7, 2026

Uh oh!

primer-integration Bot commented May 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

llastflowers commented Apr 23, 2026 •

edited

Loading

changeset-bot Bot commented Apr 23, 2026 •

edited

Loading