Skip to content

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

Open
hectahertz wants to merge 2 commits intomainfrom
hectahertz/perf-banner-css-has-selector
Open

perf(Banner): replace :has(.BannerActions) with data-has-actions attribute#7598
hectahertz wants to merge 2 commits intomainfrom
hectahertz/perf-banner-css-has-selector

Conversation

@hectahertz
Copy link
Contributor

@hectahertz hectahertz commented Feb 26, 2026

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

@hectahertz hectahertz requested a review from a team as a code owner February 26, 2026 11:58
@hectahertz hectahertz requested review from Copilot and jonrohan and removed request for Copilot February 26, 2026 11:58
@changeset-bot
Copy link

changeset-bot bot commented Feb 26, 2026

🦋 Changeset detected

Latest commit: 20e461a

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 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 Feb 26, 2026
@github-actions
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants