perf(Button): replace :has(.Visual) with data-no-visuals attribute

[hectahertz]

Closes #

Replaces 4 CSS :has(.Visual) / :not(:has(.Visual)) selectors in the Button link variant with [data-no-visuals] / :not([data-no-visuals]) attribute selectors.

ButtonBase.tsx already sets data-no-visuals on the button element when no visuals are present, but the link variant underline styling in CSS was still using :has(.Visual) to detect them. :has() forces the browser to re-evaluate style on the parent whenever any descendant's class list changes, while attribute selectors only check the element itself.

This is a continuation of #7327 which went stale. Same approach, rebased on current main.

Related PRs: #7556 (merged, ActionList :has() fix), #7327 (stale, previous attempt at this exact fix)

Changelog

New

N/A

Changed

• Button link variant CSS now uses [data-no-visuals] attribute selectors instead of :has(.Visual) for visual detection

Removed

N/A

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

Pure CSS selector replacement. The data-no-visuals attribute was already being set in ButtonBase.tsx, so this is a CSS-only change. Specificity is preserved: both :has(.Visual) and [data-no-visuals] have specificity 0,1,0.

1. Open Storybook, navigate to Button > Link Variant stories
2. Verify underline behavior with and without visuals matches current behavior
3. Toggle the data-a11y-link-underlines attribute on an ancestor to verify both branches work

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: 0c34541

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. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR improves performance in @primer/react’s Button link variant styling by replacing expensive :has(.Visual) selectors with constant-time [data-no-visuals] / :not([data-no-visuals]) attribute selectors, leveraging an attribute already set by ButtonBase.

Changes:

• Replace 4 occurrences of :has(.Visual) / :not(:has(.Visual)) in link-underline styling with [data-no-visuals] selectors.
• Add a patch changeset documenting the perf improvement.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/react/src/Button/ButtonBase.module.css	Swaps :has(.Visual)-based underline logic for [data-no-visuals] attribute selectors in link variant blocks.
.changeset/perf-button-css-has-selector.md	Patch changeset entry for the Button perf improvement.

Comments suppressed due to low confidence (1)

packages/react/src/Button/ButtonBase.module.css:606

• Same data-no-visuals vs :has(.Visual) behavior change applies here: in a loading state with no provided visuals/actions, the loading spinner adds a .Visual descendant but data-no-visuals remains present, so this block will apply where the old :not(:has(.Visual)) block would not. If the intent is to keep loading behavior consistent with the pre-change selectors, consider excluding [data-loading='true'] from the [data-no-visuals] branch (or adjusting how the attribute is computed).

    &[data-no-visuals] {
      text-decoration: none;
      background-image: none;
    }

    &:not([data-no-visuals]) {

[francinelucca]

LGTM, curious about copilot's review comment though 👀

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!

[hectahertz]

@francinelucca I looked into it and it's safe. During loading the button content gets replaced by a spinner and data-loading is set, so the underline styles don't apply anyway. Replied on the thread with more detail and resolved it.