feat(ui): Dev mode banner updates by alexcarpenter · Pull Request #8917 · clerk/javascript

alexcarpenter · 2026-06-18T18:47:08Z

Description

Updates dev mode banner implementation.

BEFORE	AFTER

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

Bug Fixes
- Updated development mode indicator styling for improved visual presentation across checkout, payment method, and card components.
Style
- Refined development mode overlay rendering with updated SVG-based grid display.
- Adjusted development mode notice spacing and alignment for better visual consistency.
Tests
- Added test coverage for development mode indicator styling and visibility.

changeset-bot · 2026-06-18T18:47:13Z

🦋 Changeset detected

Latest commit: c59af36

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	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

vercel · 2026-06-18T18:47:15Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 23, 2026 1:18pm
swingset	Ready	Preview, Comment	Jun 23, 2026 1:18pm

coderabbitai · 2026-06-18T18:47:17Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 2ebcdcb2-30d4-4eb1-9380-5f22c441343d

📥 Commits

Reviewing files that changed from the base of the PR and between a536a0d and c59af36.

📒 Files selected for processing (9)

.changeset/clear-adults-pump.md
packages/ui/src/components/Checkout/CheckoutForm.tsx
packages/ui/src/components/PaymentMethods/TestPaymentMethod.tsx
packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx
packages/ui/src/elements/Card/CardFooter.tsx
packages/ui/src/elements/Card/CardRoot.tsx
packages/ui/src/elements/Card/__tests__/CardRoot.test.tsx
packages/ui/src/elements/DevModeNotice.tsx
packages/ui/src/elements/Navbar.tsx

📝 Walkthrough

Walkthrough

Refactors DevModeOverlay from a repeating-linear-gradient approach to an SVG grid mask with DEV_MODE_GRID constants, removes its gradient prop, and updates all consumers (CheckoutForm, TestPaymentMethod, CardClerkAndPagesTag). Adds flush-mode CSS overrides in CardRoot to hide the overlay and center the notice, adjusts spacing in CardFooter and Navbar, and extends CardRoot tests for raised vs. flush dev-mode indicator behavior.

Changes

Dev Mode Indicator Styling

Layer / File(s)	Summary
DevModeOverlay core rewrite (SVG grid mask) `packages/ui/src/elements/DevModeNotice.tsx`	Replaces the repeating-gradient `maskImage` implementation with a `DEV_MODE_GRID`-driven SVG tile generator that produces two masked Box layers. Removes the `gradient` prop entirely. Adds `data-clerk-dev-mode-overlay` to the wrapper and `data-clerk-dev-mode-notice` to `DevModeNotice`, and removes the `fontWeight` default from `DevModeNotice`.
Payment component adoption `packages/ui/src/components/Checkout/CheckoutForm.tsx`, `packages/ui/src/components/PaymentMethods/TestPaymentMethod.tsx`	Both components import `DevModeOverlay`, replace their inline gradient overlay blocks with `<DevModeOverlay />`, and add `overflow: 'hidden'` to their containers.
Card layout, spacing, and flush-mode suppression `packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx`, `packages/ui/src/elements/Card/CardFooter.tsx`, `packages/ui/src/elements/Card/CardRoot.tsx`, `packages/ui/src/elements/Navbar.tsx`	`CardClerkAndPagesTag` removes `isolation: 'isolate'` and the `gradient={0}` prop, and increases the Col gap token to `$4`. `CardFooter` adds a negative `marginBottom` calc for the notice. `CardRoot.getFlushElements` hides `[data-clerk-dev-mode-overlay]` and centers `[data-clerk-dev-mode-notice]` with adjusted margin/padding. `Navbar` passes `devModeNoticeSx` with matching padding and bottom margin to `Card.ClerkAndPagesTag`.
CardRoot tests and changeset `packages/ui/src/elements/Card/__tests__/CardRoot.test.tsx`, `.changeset/clear-adults-pump.md`	Adds `ClerkInstanceContext`, `EnvironmentProvider`, and `CardFooter` imports, a `devEnvironment` stub, and a `renderCardWithFooter` helper. Extends flush tests to assert overlay hidden and notice alignment. Adds a new describe block covering raised (overlay + notice visible) vs flush (notice visible, overlay hidden) behavior. Changeset records a patch bump for `@clerk/ui`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

kylemac

Poem

🐰 Hop hop, the gradient's gone today,
SVG grids have come to play!
A mask of tiles, a notice pinned below,
In flush or raised, the dev badge glows.
No more gradient={0} in sight —
The bunny refactored overnight! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(ui): Dev mode banner updates' directly describes the main change in the changeset: refactoring the dev mode banner/overlay implementation across multiple UI components with new styling and grid overlay design.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-06-18T20:40:41Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8917

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8917

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8917

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8917

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@8917

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@8917

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@8917

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8917

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8917

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8917

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8917

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8917

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8917

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8917

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8917

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8917

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8917

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8917

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8917

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8917

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8917

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8917

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8917

commit: c59af36

…dev-mode-update

Replaces the dev mode banner with a faded pixel-grid overlay behind a center-peaked accent line. Adds an oval mask (configurable curve, fade strength, and center softness), matches the "Development mode" text to the "Secured by" text, and adjusts footer spacing. Also fixes a type error from the removed DevModeOverlay `gradient` prop. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The text Col already paints above the absolutely-positioned dev mode overlay via DOM order with position: relative, so the explicit zIndex and isolation are unnecessary. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Drops the isolation, content wrapper, and z-index lift from the test card panels. The dots render over the content like the prior striped pattern did; only position: relative (to anchor the overlay) and overflow: hidden (to clip the grid) remain. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-23T13:20:15Z

API Changes Report

Generated by Break Check on 2026-06-23T13:20:12.964Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

_{Last ran on c59af36.}

init
b19a841

vercelBotdeployed to Preview – clerk-js-sandbox June 18, 2026 18:47 View deployment

github-actionsBot added the ui label Jun 18, 2026

vercelBothad a problem deploying to Preview – swingset June 18, 2026 18:48 Failure

add changeset
f3ffa0b

vercelBotdeployed to Preview – clerk-js-sandbox June 18, 2026 18:52 View deployment

vercelBothad a problem deploying to Preview – swingset June 18, 2026 18:53 Failure

fix(ui): update dev mode overlay styling
0a8ce02

vercelBotdeployed to Preview – clerk-js-sandbox June 18, 2026 20:37 View deployment

vercelBotdeployed to Preview – swingset June 18, 2026 20:38 View deployment

Merge branch 'main' into carp/dev-mode-update
f9f2f77

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 14:10 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 14:11 View deployment

prestonwebdevand others added 3 commits June 22, 2026 10:02

Merge remote-tracking branch 'origin/main' into carp/dev-mode-update
5d5f8a3

Merge remote-tracking branch 'origin/carp/dev-mode-update' into carp/…
d7aa0fe
…dev-mode-update

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 19:20 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 19:21 View deployment

style(ui): increase dev mode footer row gap to $4
3101f22
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 19:28 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 19:29 View deployment

style(ui): remove striped pattern from dev mode test card panels
832be01

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 20:15 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 20:16 View deployment

feat(ui): add dev mode dot grid to billing test card panels
3d0bb31

github-actionsBot added the clerk-js label Jun 22, 2026

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 20:33 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 20:34 View deployment

chore(js): restore sandbox publishable key in template
2a57d00

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 20:36 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 20:37 View deployment

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 21:18 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 21:19 View deployment

vercelBotdeployed to Preview – clerk-js-sandbox June 22, 2026 22:04 View deployment

vercelBotdeployed to Preview – swingset June 22, 2026 22:05 View deployment

Merge branch 'main' into carp/dev-mode-update
f13daf4

vercelBotdeployed to Preview – clerk-js-sandbox June 23, 2026 00:35 View deployment

vercelBotdeployed to Preview – swingset June 23, 2026 00:36 View deployment

Delete .changeset/quiet-stripes-fade.md
19b5d4f

vercelBotdeployed to Preview – clerk-js-sandbox June 23, 2026 13:13 View deployment

alexcarpenter commented Jun 23, 2026
View reviewed changes

Comment thread.changeset/clear-adults-pump.md Outdated

Apply suggestion from@alexcarpenter
9498fac

vercelBotdeployed to Preview – clerk-js-sandbox June 23, 2026 13:15 View deployment

vercelBotdeployed to Preview – swingset June 23, 2026 13:16 View deployment

alexcarpenter marked this pull request as ready for review June 23, 2026 13:16

Merge branch 'main' into carp/dev-mode-update
c59af36

vercelBotdeployed to Preview – clerk-js-sandbox June 23, 2026 13:17 View deployment

vercelBotdeployed to Preview – swingset June 23, 2026 13:18 View deployment

wobsoriano approved these changes Jun 23, 2026
View reviewed changes

wobsoriano merged commit 0c1a5d8 into mainJun 23, 2026
50 checks passed

wobsoriano deleted the carp/dev-mode-update branch June 23, 2026 16:54

clerk-cookie mentioned this pull request Jun 23, 2026
ci(repo): Version packages #8939
Merged

Navigation Menu

Uh oh!

feat(ui): Dev mode banner updates - #8917

feat(ui): Dev mode banner updates#8917
wobsoriano merged 17 commits into
mainfrom
carp/dev-mode-update

alexcarpenter commented Jun 18, 2026•
edited by coderabbitai Bot
Loading

Uh oh!

changeset-botBot commented Jun 18, 2026•
edited
Loading

Uh oh!

vercelBot commented Jun 18, 2026•
edited
Loading

Uh oh!

coderabbitaiBot commented Jun 18, 2026•
edited
Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

pkg-pr-newBot commented Jun 18, 2026•
edited
Loading

Uh oh!

Uh oh!

github-actionsBot commented Jun 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

alexcarpenter commented Jun 18, 2026• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

changeset-botBot commented Jun 18, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercelBot commented Jun 18, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented Jun 18, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

pkg-pr-newBot commented Jun 18, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

github-actionsBot commented Jun 23, 2026

API Changes Report

Summary

No API Changes Detected

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexcarpenter commented Jun 18, 2026•
edited by coderabbitai Bot
Loading

changeset-botBot commented Jun 18, 2026•
edited
Loading

vercelBot commented Jun 18, 2026•
edited
Loading

coderabbitaiBot commented Jun 18, 2026•
edited
Loading

pkg-pr-newBot commented Jun 18, 2026•
edited
Loading