perf(Banner): replace :has(.BannerActions) with data-has-actions attribute

[hectahertz]

Closes #

Replaces 4 CSS :has(.BannerActions) selectors in Banner with [data-has-actions] attribute selectors.

Banner.tsx already computes hasActions = primaryAction || secondaryAction in render but wasn't exposing it as a data attribute. This PR adds data-has-actions to the <section> root and swaps out the :has() selectors for attribute checks.

Same pattern as #7556 (ActionList) and #7597 (Button).

Selectors replaced:

• .Banner[data-title-hidden]:not(:has(.BannerActions)) (2 instances, content/icon sizing)
• :where(.Banner):has(.BannerActions) (dismiss margin)
• .BannerContainer:has(.BannerActionsContainer) (container query grid rows)

Changelog

New

N/A

Changed

• Banner CSS now uses [data-has-actions] attribute selectors instead of :has(.BannerActions) for action 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

One new data-has-actions attribute on the Banner root, rest is CSS selector replacement. Specificity is preserved.

1. Open Storybook, navigate to Banner stories
2. Verify Banners with and without actions render identically to main
3. Check dismissible + actions layout (BannerDismiss margin, stacked vs inline)
4. Resize to trigger @container banner (max-width: 500px) breakpoint with actions present

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: d5cf5b0

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.

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Running

[Copilot]

Pull request overview

This PR improves Banner styling performance by eliminating :has(.BannerActions) selectors (which can trigger expensive descendant checks during style recalculation) and replacing them with a parent-scoped [data-has-actions] attribute set by Banner.tsx.

Changes:

• Add data-has-actions to the Banner root element when primaryAction or secondaryAction is provided.
• Replace the Banner CSS :has() selectors with [data-has-actions] attribute selectors.
• Add a patch changeset documenting the performance-oriented selector change.

Reviewed changes

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

File	Description
packages/react/src/Banner/Banner.tsx	Exposes action presence via data-has-actions on the <section> root to avoid CSS descendant scanning.
packages/react/src/Banner/Banner.module.css	Swaps :has(.BannerActions) / :has(.BannerActionsContainer) selectors for [data-has-actions] equivalents.
.changeset/perf-banner-css-has-selector.md	Adds a patch changeset describing the Banner CSS selector performance change.

[Copilot]

data-has-actions is a new rendered attribute that now drives CSS behavior, but there’s no unit test asserting it’s present only when primaryAction/secondaryAction are provided (and absent otherwise). Adding a couple of assertions in Banner.test.tsx would help prevent accidental regressions (e.g., refactors to the hasActions logic).