refactor(ui): Improve password toggle alignment and hit area by alexcarpenter · Pull Request #9096 · clerk/javascript

alexcarpenter · 2026-07-06T21:26:20Z

Description

Improves PasswordInput toggle styling.

makes toggle right alignment match the top and bottom alignment
reduces toggle button width
ensure border radius matches for focus outline alignment
increase toggle hit area with before pseudo element

STATE	BEFORE	AFTER
idle
hover
focus

Type of change

Refactor (styling / non-breaking)

This is a styling-only, backwards-compatible change to @clerk/ui.

Summary by CodeRabbit

New Features
- Added a smaller fractional spacing option (0x75) for more precise UI layout control.
Bug Fixes
- Improved the password show/hide toggle with better visual alignment and a larger touch/click hit area.

changeset-bot · 2026-07-06T21:26:25Z

🦋 Changeset detected

Latest commit: e53ca63

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-07-06T21:26:26Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 6, 2026 10:37pm
swingset	Ready	Preview, Comment	Jul 6, 2026 10:37pm

coderabbitai · 2026-07-06T21:26:46Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR adds a fractional spacing token, uses it in the password show/hide toggle styling, and records the UI package change in a patch changeset.

Changes

Password Toggle Hit Area

Layer / File(s)	Summary
Spacing scale addition `packages/ui/src/foundations/sizes.ts`	Adds a new `'0x75'` spacing value, exposes it through `spaceUnits`, and reorders the named exports.
Password toggle button styling and changeset `packages/ui/src/baseTheme.ts`, `packages/ui/src/elements/PasswordInput.tsx`, `.changeset/password-toggle-hit-area.md`	Adds theme styling for the password toggle button, updates the `IconButton` to use the new spacing token with padding, rounded corners, and a `::before` hit-area expansion, and documents the patch release.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: maxyinger

Poem

A tiny toggle grew with grace,
A softer tap, a kinder place.
With padded paws and rounded cheer,
It’s easier for thumbs out here.

🚥 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 clearly matches the main change: improving the password toggle's alignment and hit area in the UI.
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.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

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

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/foundations/sizes.ts`:
- Line 19: The spacing scale in sizes.ts is missing the 0x75 token, which
prevents the object from satisfying ExtractRemValues<typeof spacingScale> and
leaves sizes.$0x75 unavailable. Update the spaceUnits/spacingScale definition to
include the 0x75 entry alongside the other size tokens, using the same rem and
multiplier values expected by the scale, so the exported sizes object can expose
sizes.$0x75 correctly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: b8d3db0b-0e74-470f-a9e6-0d8915977c99

📥 Commits

Reviewing files that changed from the base of the PR and between 4aebb88 and ecaaf7e.

📒 Files selected for processing (3)

.changeset/password-toggle-hit-area.md
packages/ui/src/elements/PasswordInput.tsx
packages/ui/src/foundations/sizes.ts

github-actions · 2026-07-06T21:50:07Z

API Changes Report

Generated by Break Check on 2026-07-06T22:39:15.274Z

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 e53ca63.}

pkg-pr-new · 2026-07-06T21:50:42Z

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: e53ca63

coderabbitai

🧹 Nitpick comments (1)

packages/ui/src/baseTheme.ts (1)
308-315: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low value

Remove the duplicated show-password button styles from packages/ui/src/elements/PasswordInput.tsx. The new formFieldInputShowPasswordButton theme entry already owns these offsets; keeping the inline $1 values here just leaves two sources of truth ($1 vs $0x75).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/baseTheme.ts` around lines 308 - 315, Remove the inline
show-password button offset styles from PasswordInput and rely on the shared
formFieldInputShowPasswordButton theme entry instead. Update the PasswordInput
component in packages/ui/src/elements/PasswordInput.tsx so it no longer
hardcodes the duplicated inset and border-radius values, and make sure the
component consumes the theme-provided styling source of truth defined in
baseTheme.ts via formFieldInputShowPasswordButton.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/ui/src/baseTheme.ts`:
- Around line 308-315: Remove the inline show-password button offset styles from
PasswordInput and rely on the shared formFieldInputShowPasswordButton theme
entry instead. Update the PasswordInput component in
packages/ui/src/elements/PasswordInput.tsx so it no longer hardcodes the
duplicated inset and border-radius values, and make sure the component consumes
the theme-provided styling source of truth defined in baseTheme.ts via
formFieldInputShowPasswordButton.

ℹ️ Review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 7ef17f1f-af23-4700-a0ed-a12db14742e6

📥 Commits

Reviewing files that changed from the base of the PR and between 824baab and e53ca63.

📒 Files selected for processing (4)

.changeset/password-toggle-hit-area.md
packages/ui/src/baseTheme.ts
packages/ui/src/elements/PasswordInput.tsx
packages/ui/src/foundations/sizes.ts

✅ Files skipped from review due to trivial changes (1)

.changeset/password-toggle-hit-area.md

🚧 Files skipped from review as they are similar to previous changes (2)

packages/ui/src/elements/PasswordInput.tsx
packages/ui/src/foundations/sizes.ts

github-actions Bot added the ui label Jul 6, 2026

vercel Bot deployed to Preview – clerk-js-sandbox July 6, 2026 21:26 View deployment

vercel Bot had a problem deploying to Preview – swingset July 6, 2026 21:27 Failure

coderabbitai Bot reviewed Jul 6, 2026

View reviewed changes

Comment thread packages/ui/src/foundations/sizes.ts

vercel Bot deployed to Preview – clerk-js-sandbox July 6, 2026 21:41 View deployment

vercel Bot deployed to Preview – swingset July 6, 2026 21:43 View deployment

vercel Bot deployed to Preview – clerk-js-sandbox July 6, 2026 21:45 View deployment

vercel Bot deployed to Preview – swingset July 6, 2026 21:46 View deployment

alexcarpenter changed the title ~~refactor(ui): enlarge password show/hide toggle hit area~~ refactor(ui): Improve password toggle alignment and hit area Jul 6, 2026

alexcarpenter commented Jul 6, 2026

View reviewed changes

Comment thread .changeset/password-toggle-hit-area.md

maxyinger approved these changes Jul 6, 2026

View reviewed changes

vercel Bot deployed to Preview – clerk-js-sandbox July 6, 2026 21:56 View deployment

vercel Bot deployed to Preview – swingset July 6, 2026 21:58 View deployment

alexcarpenter added 5 commits July 6, 2026 18:34

refactor(ui): enlarge password show/hide toggle hit area

59f606c

fix(ui): add 0x75 to spaceUnits to satisfy spacing scale type

ba13ca7

refactor(ui): refine password toggle button positioning

e007156

define inset block

f0195f9

handle simple theme spacing

e53ca63

alexcarpenter force-pushed the refactor/password-copy-button branch from 824baab to e53ca63 Compare July 6, 2026 22:35

vercel Bot deployed to Preview – clerk-js-sandbox July 6, 2026 22:36 View deployment

vercel Bot deployed to Preview – swingset July 6, 2026 22:37 View deployment

coderabbitai Bot reviewed Jul 6, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(ui): Improve password toggle alignment and hit area#9096

refactor(ui): Improve password toggle alignment and hit area#9096
alexcarpenter wants to merge 5 commits into
mainfrom
refactor/password-copy-button

alexcarpenter commented Jul 6, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 6, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jul 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

alexcarpenter commented Jul 6, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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

Uh oh!

API Changes Report

Summary

No API Changes Detected

Uh oh!

pkg-pr-new Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexcarpenter commented Jul 6, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Jul 6, 2026 •

edited

Loading

vercel Bot commented Jul 6, 2026 •

edited

Loading

coderabbitai Bot commented Jul 6, 2026 •

edited

Loading

github-actions Bot commented Jul 6, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 6, 2026 •

edited

Loading