feat(banner): add `x` for closing by avivkeller · Pull Request #9008 · nodejs/nodejs.org

avivkeller · 2026-07-14T19:13:09Z

Makes the banner close-able.

Note: This just updated ui-components, and doesn't touch Next.js + cookie handling

vercel · 2026-07-14T19:13:15Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nodejs-org	Ready	Preview	Jul 14, 2026 7:56pm

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

cursor · 2026-07-14T19:13:17Z

PR Summary

Low Risk
UI-only banner behavior with client-side localStorage; minor hydration flash possible when a banner was previously dismissed.

Overview
Adds an optional close (×) control to the shared Banner component via onClose, with absolute-positioned button styling and a Storybook Dismissible example. @node-core/ui-components is bumped to 1.7.2.

The site WithBanner wrapper is now a client component: it wires onClose to hide the banner and persist dismissal in localStorage (key banner-dismissal, value matched to banner.text), reading that state after hydration so SSR still renders the banner until the client knows it was dismissed.

^{Reviewed by Cursor Bugbot for commit b2dc64f. Bugbot is set up for automated code reviews on this repo. Configure here.}

codecov · 2026-07-14T19:14:50Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.54%. Comparing base (61cd932) to head (b2dc64f).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9008      +/-   ##
==========================================
- Coverage   74.58%   74.54%   -0.04%     
==========================================
  Files         100      100              
  Lines        8801     8801              
  Branches      324      325       +1     
==========================================
- Hits         6564     6561       -3     
- Misses       2233     2236       +3     
  Partials        4        4

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

MattIPv4 · 2026-07-14T19:16:00Z

+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) {return null;}


I don't think the banner needs to do its own state management, let the consumer of the component handle that with the onClose

We could, however, that would require duplicating the state logic in doc-kit, and here

I think that's fine, as we're going to need to tie this to a cookie/localStorage anyway

cursor · 2026-07-14T19:18:45Z

+      transition-colors
+      hover:text-white;
+  }
+}


Close button overlaps content

Medium Severity

The close control is absolute with right-4 while the banner still uses symmetric px-8 and centered content. Nothing reserves space for the button, so on narrower viewports or with longer banner text the label, link, or icon can sit under the ×. Elsewhere in this package, absolute controls get matching padding so content stays clear.

Additional Locations (1)

packages/ui-components/src/Common/Banner/index.module.css#L2-L13

^{Reviewed by Cursor Bugbot for commit bd140ea. Configure here.}

github-actions · 2026-07-14T19:27:49Z

📦 Build Size Comparison

Summary

Metric	Value
Old Total First Load JS	10.70 MB
New Total First Load JS	10.64 MB
Delta	-60.08 KB (-0.55%)

Changes

🔄 Modified Routes (4)

Route	Old First Load JS	New First Load JS	Delta
`/[locale]`	2.55 MB	2.54 MB	📉 -15.02 KB (-0.57%)
`/[locale]/[...path]`	2.55 MB	2.54 MB	📉 -15.02 KB (-0.57%)
`/[locale]/blog/[...path]`	2.55 MB	2.54 MB	📉 -15.02 KB (-0.57%)
`/[locale]/download/archive/[version]`	2.55 MB	2.54 MB	📉 -15.02 KB (-0.57%)

bjohansebas

I think that if we ever update the banner and a user previously dismissed it, we should show it to them again

cursor

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

There are 3 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit b2dc64f. Configure here.}

cursor · 2026-07-14T19:59:08Z

+    if (banner) {
+      setDismissed(localStorage.getItem(STORAGE_KEY) === banner.text);
+    }
+  }, [banner]);


Dismissed banner flashes on load

Medium Severity

Dismissal is restored from localStorage only inside useEffect, after the first paint. dismissed starts as false, so a previously closed banner still SSR-renders and shows briefly, then disappears and shifts the header/nav on every load.

Additional Locations (1)

apps/site/components/withBanner.tsx#L32-L36

^{Reviewed by Cursor Bugbot for commit b2dc64f. Configure here.}

cursor · 2026-07-14T19:59:08Z

+      >
+        <span aria-hidden="true">&times;</span>
+      </button>
+    )}


Close label not localizable

Low Severity

The close control hardcodes aria-label="Close banner" on the button, and that string is not overridable via props. Extra HTML attributes only spread onto the section, so consumers such as withBanner cannot pass a translated label despite already using useTranslations for the banner itself.

^{Reviewed by Cursor Bugbot for commit b2dc64f. Configure here.}

AugustinMauroy · 2026-07-14T20:34:24Z

+  // rendered on the server and hidden after hydration if previously dismissed
+  useEffect(() => {
+    if (banner) {
+      setDismissed(localStorage.getItem(STORAGE_KEY) === banner.text);


there are a thing here localstroage is shared with api docs but not with sub domain like undici.nodejs.org

Then I guess a cookie would solve that, right?

AugustinMauroy · 2026-07-14T20:35:52Z

there are a flash humm not fan of it maybe not display it by default. also what will happen on doc-kit since it's already flash when fetching site.json

trivikr · 2026-07-14T23:31:10Z

To avoid flash, can we dismiss it by default and show only if the value is not set?

Screen recording of flash on reload post dismiss

nodejs-banner-flash-on-reload-post-dismiss.mov

trivikr · 2026-07-15T01:14:15Z

Fixes: #6292

feat(banner): add x for closing

b70b8ab

Copilot AI review requested due to automatic review settings July 14, 2026 19:13

avivkeller requested a review from a team as a code owner July 14, 2026 19:13

avivkeller deployed to Storybook July 14, 2026 19:13 — with GitHub Actions View deployment

Copilot AI reviewed Jul 14, 2026

vercel Bot deployed to Preview July 14, 2026 19:13 View deployment

avivkeller requested a review from trivikr July 14, 2026 19:14

MattIPv4 reviewed Jul 14, 2026

View reviewed changes

fixup!

bd140ea

avivkeller deployed to Storybook July 14, 2026 19:16 — with GitHub Actions View deployment

vercel Bot deployed to Preview July 14, 2026 19:18 View deployment

cursor Bot reviewed Jul 14, 2026

View reviewed changes

bjohansebas reviewed Jul 14, 2026

View reviewed changes

fixup!

b2dc64f

avivkeller deployed to Storybook July 14, 2026 19:55 — with GitHub Actions View deployment

vercel Bot deployed to Preview July 14, 2026 19:56 View deployment

cursor Bot reviewed Jul 14, 2026

View reviewed changes

AugustinMauroy reviewed Jul 14, 2026

View reviewed changes

		const [dismissed, setDismissed] = useState(false);
		if (dismissed) {return null;}

Uh oh!

Conversation

avivkeller commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

codecov Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

MattIPv4 Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

avivkeller Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

MattIPv4 Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot Jul 14, 2026

Choose a reason for hiding this comment

Close button overlaps content

Uh oh!

github-actions Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Build Size Comparison

Summary

Changes

Uh oh!

bjohansebas left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jul 14, 2026

Choose a reason for hiding this comment

Dismissed banner flashes on load

Uh oh!

cursor Bot Jul 14, 2026

Choose a reason for hiding this comment

Close label not localizable

Uh oh!

AugustinMauroy Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

bjohansebas Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

AugustinMauroy commented Jul 14, 2026

Uh oh!

trivikr commented Jul 14, 2026

Uh oh!

trivikr commented Jul 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

avivkeller commented Jul 14, 2026 •

edited

Loading

vercel Bot commented Jul 14, 2026 •

edited

Loading

cursor Bot commented Jul 14, 2026 •

edited

Loading

codecov Bot commented Jul 14, 2026 •

edited

Loading

github-actions Bot commented Jul 14, 2026 •

edited

Loading