Uh oh!
There was an error while loading. Please reload this page.
refactor(ui): Improve password toggle alignment and hit area - #9096
Conversation
🦋 Changeset detectedLatest commit: e53ca63 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Note Reviews pausedIt 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 Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis 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. ChangesPassword Toggle Hit Area
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
There was a problem hiding this comment.
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
📒 Files selected for processing (3)
.changeset/password-toggle-hit-area.mdpackages/ui/src/elements/PasswordInput.tsxpackages/ui/src/foundations/sizes.ts
Uh oh!
There was an error while loading. Please reload this page.
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
@clerk/astro@clerk/backend@clerk/chrome-extension@clerk/clerk-js@clerk/electron@clerk/electron-passkeys@clerk/eslint-plugin@clerk/expo@clerk/expo-passkeys@clerk/express@clerk/fastify@clerk/hono@clerk/localizations@clerk/nextjs@clerk/nuxt@clerk/react@clerk/react-router@clerk/shared@clerk/tanstack-react-start@clerk/testing@clerk/ui@clerk/upgrade@clerk/vuecommit: |
Uh oh!
There was an error while loading. Please reload this page.
824baab to
e53ca63CompareThere was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/ui/src/baseTheme.ts (1)
308-315: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low valueRemove the duplicated show-password button styles from
packages/ui/src/elements/PasswordInput.tsx. The newformFieldInputShowPasswordButtontheme entry already owns these offsets; keeping the inline$1values here just leaves two sources of truth ($1vs$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
📒 Files selected for processing (4)
.changeset/password-toggle-hit-area.mdpackages/ui/src/baseTheme.tspackages/ui/src/elements/PasswordInput.tsxpackages/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
Description
Improves PasswordInput toggle styling.
Type of change
This is a styling-only, backwards-compatible change to
@clerk/ui.Summary by CodeRabbit
Summary by CodeRabbit
New Features
0x75) for more precise UI layout control.Bug Fixes