perf(Button): replace :has() icon-only-counter selector with data attribute

[mattcosta7]

Closes #

Replaces the icon-only-with-counter :has(...):not(:has(...)) selector on ButtonBase with a JS-derived data-icon-only-counter attribute computed from props at render time. Same visual output; reduces the per-Button style-recalculation cost.

Before:

&:where([data-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) {
padding-inline:var(--control-medium-paddingInline-condensed);
}

After:

data-icon-only-counter={count!==undefined&&LeadingVisual&&!children ? true : undefined}

&:where([data-icon-only-counter]) {
padding-inline:var(--control-medium-paddingInline-condensed);
}

:has() + :not(:has()) compound selectors are among the most expensive selectors in the CSS engine, and they evaluate against every .ButtonBase instance on every DOM mutation inside the button. Buttons render dozens to hundreds of times per page in real GitHub views, so this is a measurable cost. The equivalent JS check is a constant-time prop comparison.

Changelog

New

• data-icon-only-counter attribute on ButtonBase when an icon-only Button has a count

Changed

• Internal: ButtonBase no longer relies on :has() for icon-only-with-counter styling

Removed

• The :has(...):not(:has(...)) compound selector from ButtonBase.module.css

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

No visual changes expected. The new attribute is only set when the existing :has() selector would have matched (count set + leadingVisual rendered + no children).

Existing Button unit tests pass locally (138 tests across Button + ActionList suites).

Part of a small series replacing :has() selectors on high-frequency components with JS-derived data attributes. A follow-up PR will apply the same pattern to ActionList.

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]

🦋 Changeset detected

Latest commit: 629c7d2

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]

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

[Copilot]

Pull request overview

This PR optimizes @primer/react’s ButtonBase icon-only-with-counter styling by replacing an expensive :has(...):not(:has(...)) CSS selector with a render-time data-icon-only-counter attribute, reducing style recalculation work on pages with many Buttons.

Changes:

• Add data-icon-only-counter to ButtonBase when count + leadingVisual are present and there is no text content.
• Update ButtonBase.module.css to target [data-icon-only-counter] instead of the :has()/:not(:has()) compound selector.
• Add a patch changeset describing the internal perf improvement and the new attribute.

Show a summary per file

File	Description
packages/react/src/Button/ButtonBase.tsx	Computes and sets data-icon-only-counter from props at render time.
packages/react/src/Button/ButtonBase.module.css	Replaces the expensive :has() selector with an attribute selector for icon-only + counter padding.
.changeset/perf-button-icon-only-counter.md	Declares a patch release and documents the change/new attribute.

Copilot's findings

• Files reviewed: 3/3 changed files
• Comments generated: 1

[jonrohan]

Adding an attribute doesn't really need an integration test