feat(ui): Prototype inline test-credential button in field#9181
feat(ui): Prototype inline test-credential button in field#9181alexcarpenter wants to merge 9 commits into
Conversation
In development, the email/phone fields on sign-in and sign-up now reveal an info hint on hover/focus that nudges developers toward Clerk test credentials and can insert a suggested test email or phone number.
…ed email The dev-mode test-credential hint now stays visible (as a warning) while the email/phone field holds a non-test value, and hides once it is a test credential. Inserting a test email transforms the currently typed address by adding the +clerk_test subaddress instead of replacing it.
Renders the dev-mode test-credential affordance as a small button overlaid inside the input (right-aligned) instead of a label popover. The button appears while the field is focused and the value is not yet a valid test credential, reserves matching padding on the input, and inserts the test email/phone on click.
🦋 Changeset detectedLatest commit: 5249e05 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.
|
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
@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/vue
commit: |
API Changes Report
Summary
🔴 Breaking changes index (2)Every breaking change, up front. Full diffs are in the package sections below.
@clerk/expoVersion: 3.7.6 → 3.7.5 Subpath
|
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 22 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds development-only Clerk test credential hints to sign-in and sign-up email/phone fields, with reusable hint UI, insertion controls, credential utilities, phone synchronization, warning styling, and tests. ChangesDevelopment test credential hints
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant FieldDevHint
participant FieldDevInsertButton
participant SignInStart
participant SignUpForm
User->>FieldDevHint: Focus or hover a credential field
FieldDevHint->>FieldDevInsertButton: Display test credential action
User->>FieldDevInsertButton: Select insertion action
FieldDevInsertButton->>SignInStart: Set sign-in identifier
FieldDevInsertButton->>SignUpForm: Set sign-up email or phone
Possibly related PRs
Suggested labels: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
- Rewrite changeset to describe the inline button (not the earlier popover). - Require a +1 country code in isClerkTestPhoneNumber so non-US numbers ending in 555-01XX are not treated as test numbers. - Sync empty value into PhoneInput internal state so a parent clearing the field resets it.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
packages/ui/src/elements/FieldDevHint.tsx (3)
64-67: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueCondense newly added implementation comments.
packages/ui/src/elements/FieldDevHint.tsx#L64-L67: reduce to a terse explanation of predicate-based persistence.packages/ui/src/elements/FieldDevInsertButton.tsx#L24-L27: reduce to the non-obvious predicate behavior.packages/ui/src/elements/PhoneInput/index.tsx#L37-L39: retain only the synchronization rationale.🤖 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/elements/FieldDevHint.tsx` around lines 64 - 67, Condense the newly added comments without changing behavior: in packages/ui/src/elements/FieldDevHint.tsx lines 64-67, retain only a terse explanation of predicate-based persistence near the satisfied/persist logic; in packages/ui/src/elements/FieldDevInsertButton.tsx lines 24-27, retain only the non-obvious predicate behavior; and in packages/ui/src/elements/PhoneInput/index.tsx lines 37-39, retain only the synchronization rationale.Source: Coding guidelines
57-57: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit component return types.
packages/ui/src/elements/FieldDevHint.tsx#L57-L57: annotateFieldDevHintBase.packages/ui/src/elements/FieldDevInsertButton.tsx#L17-L17: annotateFieldDevInsertButton.packages/ui/src/elements/Form.tsx#L134-L134: annotateCommonInputWrapper.🤖 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/elements/FieldDevHint.tsx` at line 57, Add explicit component return type annotations to FieldDevHintBase in packages/ui/src/elements/FieldDevHint.tsx (line 57), FieldDevInsertButton in packages/ui/src/elements/FieldDevInsertButton.tsx (line 17), and CommonInputWrapper in packages/ui/src/elements/Form.tsx (line 134), using the project’s appropriate React component return type while preserving their existing behavior.Source: Coding guidelines
114-195: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMake the new dev-hint controls customizable.
packages/ui/src/elements/FieldDevHint.tsx#L114-L195: apply dedicated element descriptors to the new trigger and popover elements.packages/ui/src/elements/FieldDevInsertButton.tsx#L64-L86: apply a descriptor to the inline insertion button.🤖 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/elements/FieldDevHint.tsx` around lines 114 - 195, The new dev-hint controls lack dedicated element descriptors for customization. In packages/ui/src/elements/FieldDevHint.tsx:114-195, add descriptors to the trigger Button and popover container elements; in packages/ui/src/elements/FieldDevInsertButton.tsx:64-86, add a descriptor to the inline insertion Button, using the project’s existing descriptor pattern and distinct names for each control.Source: Coding guidelines
🤖 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 @.changeset/dev-mode-test-credential-hint.md:
- Line 5: Correct the behavior descriptions in
.changeset/dev-mode-test-credential-hint.md:5 and
packages/ui/src/elements/FieldDevInsertButton.tsx:11-16 to describe an inline
button shown for the focused input, including when the current value is
non-test; document the predicate-based visibility condition in
FieldDevInsertButton rather than claiming a label popover limited to empty
fields.
In `@packages/ui/src/elements/FieldDevInsertButton.tsx`:
- Around line 17-90: Add Jest coverage for FieldDevInsertButton covering
dev-mode visibility gating, rendering for focused non-test values, invoking
action.onInsert on click, retaining visibility when focus moves to the button,
and reserving phone-input end padding based on the rendered button width. Use
the existing form-field, dev-mode, and button test patterns and preserve current
behavior for test credentials and unfocused fields.
In `@packages/ui/src/utils/clerkTestEmail.ts`:
- Around line 14-16: Update clerkTestEmail.ts to match clerk_test only as a
complete local-part segment, then reuse that shared predicate in SignInStart.tsx
and SignUpForm.tsx instead of substring checks. Add unit coverage in
clerkTestEmail.test.ts for near matches such as clerk_test2, while preserving
matches for valid test-email segments; apply the requested changes in all four
listed files.
In `@packages/ui/src/utils/clerkTestPhoneNumber.ts`:
- Around line 5-7: Update isClerkTestPhoneNumber to validate a complete 10-digit
US phone number, optionally prefixed with 1, before checking the 5550100 suffix;
partial values such as 5550100 must return false. Add a regression test in
packages/ui/src/utils/__tests__/clerkTestPhoneNumber.test.ts covering that case.
---
Nitpick comments:
In `@packages/ui/src/elements/FieldDevHint.tsx`:
- Around line 64-67: Condense the newly added comments without changing
behavior: in packages/ui/src/elements/FieldDevHint.tsx lines 64-67, retain only
a terse explanation of predicate-based persistence near the satisfied/persist
logic; in packages/ui/src/elements/FieldDevInsertButton.tsx lines 24-27, retain
only the non-obvious predicate behavior; and in
packages/ui/src/elements/PhoneInput/index.tsx lines 37-39, retain only the
synchronization rationale.
- Line 57: Add explicit component return type annotations to FieldDevHintBase in
packages/ui/src/elements/FieldDevHint.tsx (line 57), FieldDevInsertButton in
packages/ui/src/elements/FieldDevInsertButton.tsx (line 17), and
CommonInputWrapper in packages/ui/src/elements/Form.tsx (line 134), using the
project’s appropriate React component return type while preserving their
existing behavior.
- Around line 114-195: The new dev-hint controls lack dedicated element
descriptors for customization. In
packages/ui/src/elements/FieldDevHint.tsx:114-195, add descriptors to the
trigger Button and popover container elements; in
packages/ui/src/elements/FieldDevInsertButton.tsx:64-86, add a descriptor to the
inline insertion Button, using the project’s existing descriptor pattern and
distinct names for each control.
🪄 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: 8b619db4-c16c-4466-a8ca-62ca6ccf624a
📒 Files selected for processing (13)
.changeset/dev-mode-test-credential-hint.mdpackages/ui/src/components/SignIn/SignInStart.tsxpackages/ui/src/components/SignUp/SignUpForm.tsxpackages/ui/src/elements/FieldControl.tsxpackages/ui/src/elements/FieldDevHint.tsxpackages/ui/src/elements/FieldDevInsertButton.tsxpackages/ui/src/elements/Form.tsxpackages/ui/src/elements/PhoneInput/index.tsxpackages/ui/src/primitives/Button.tsxpackages/ui/src/utils/__tests__/clerkTestEmail.test.tspackages/ui/src/utils/__tests__/clerkTestPhoneNumber.test.tspackages/ui/src/utils/clerkTestEmail.tspackages/ui/src/utils/clerkTestPhoneNumber.ts
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/ui/src/elements/PhoneInput/index.tsx (1)
37-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd regression coverage for controlled resets.
Please verify tests cover a populated phone value being cleared to
'', plus dev-hint insertion updating internal state without anonChangeloop.🤖 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/elements/PhoneInput/index.tsx` around lines 37 - 46, Add regression tests for the PhoneInput controlled-value synchronization around the useEffect: verify a populated phone value is cleared to an empty string and that dev-hint insertion updates the displayed/internal state without triggering an onChange loop.
🤖 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/elements/PhoneInput/index.tsx`:
- Around line 37-46: Add regression tests for the PhoneInput controlled-value
synchronization around the useEffect: verify a populated phone value is cleared
to an empty string and that dev-hint insertion updates the displayed/internal
state without triggering an onChange loop.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 64dbc363-6c77-4127-9c0f-93bcdfbba1de
📒 Files selected for processing (4)
.changeset/dev-mode-test-credential-hint.mdpackages/ui/src/elements/PhoneInput/index.tsxpackages/ui/src/utils/__tests__/clerkTestPhoneNumber.test.tspackages/ui/src/utils/clerkTestPhoneNumber.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/ui/src/utils/tests/clerkTestPhoneNumber.test.ts
- .changeset/dev-mode-test-credential-hint.md
- packages/ui/src/utils/clerkTestPhoneNumber.ts
- Correct the FieldDevInsertButton doc comment to describe the predicate-based (non-test-value) visibility, not empty-only. - Add isClerkTestEmail predicate matching the +clerk_test subaddress as a complete local-part segment (rejects near-matches like +clerk_test2); reuse it in SignIn/SignUp and toClerkTestEmail. - Require a full 10-digit US number in isClerkTestPhoneNumber so partials like 5550100 are rejected. - Add unit tests for both predicates and a component test suite for FieldDevInsertButton (dev-mode gating, focus-driven visibility, test-credential hiding, onInsert).
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/ui/src/utils/clerkTestEmail.ts (1)
18-31: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider adding JSDoc to
toClerkTestEmailfor consistency.
isClerkTestEmailhas a descriptive comment buttoClerkTestEmailhas none, despite being the more complex, exported transformation function.📝 Suggested doc addition
+/** + * Transforms developer input into a Clerk test email by inserting the `+clerk_test` + * subaddress into the local part. Falls back to a placeholder when empty, and is a + * no-op when the value already carries the subaddress. + */ export const toClerkTestEmail = (value: string): string => {🤖 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/utils/clerkTestEmail.ts` around lines 18 - 31, Add JSDoc immediately above the exported toClerkTestEmail function describing its input normalization and conversion to a Clerk test email, including fallback behavior for blank values and preservation of already-valid Clerk test emails. Match the descriptive documentation style used by isClerkTestEmail.
🤖 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/utils/clerkTestEmail.ts`:
- Around line 18-31: Add JSDoc immediately above the exported toClerkTestEmail
function describing its input normalization and conversion to a Clerk test
email, including fallback behavior for blank values and preservation of
already-valid Clerk test emails. Match the descriptive documentation style used
by isClerkTestEmail.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 25d44041-0b08-455f-8ab2-5b9889e42f6a
📒 Files selected for processing (8)
packages/ui/src/components/SignIn/SignInStart.tsxpackages/ui/src/components/SignUp/SignUpForm.tsxpackages/ui/src/elements/FieldDevInsertButton.tsxpackages/ui/src/elements/__tests__/FieldDevInsertButton.test.tsxpackages/ui/src/utils/__tests__/clerkTestEmail.test.tspackages/ui/src/utils/__tests__/clerkTestPhoneNumber.test.tspackages/ui/src/utils/clerkTestEmail.tspackages/ui/src/utils/clerkTestPhoneNumber.ts
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/ui/src/components/SignUp/SignUpForm.tsx
- packages/ui/src/utils/clerkTestPhoneNumber.ts
- packages/ui/src/utils/tests/clerkTestPhoneNumber.test.ts
- packages/ui/src/elements/FieldDevInsertButton.tsx
- packages/ui/src/components/SignIn/SignInStart.tsx
…ntial button Keyboard activation (Enter/Space) of the insert button dropped focus out of the field because the button unmounts once a test credential is inserted. onClick now refocuses the input; the onMouseDown workaround already covered pointer clicks. Adds a regression test.
Guard the input-focus restoration with isVirtualClick so it only fires for keyboard/AT activation, matching InputWithIcon's clear button. Pointer clicks already retain input focus via onMouseDown preventDefault, so restoring there was redundant (and could re-open the on-screen keyboard on touch).
ApprovabilityVerdict: Needs human review This PR introduces a new feature with multiple new UI components (floating popover, inline buttons) and integrates them into sign-in/sign-up authentication flows. While dev-mode gated, the scope of new logic and the PhoneInput behavioral change warrant human review. You can customize Macroscope's approvability policy. Learn more. |
1 participant
Description
Prototype of an alternative treatment for the dev-mode test-credential affordance. Instead of an ⓘ popover on the field label, this renders a small "Use test email" / "Use test number" button overlaid inside the input, right-aligned.
Behavior:
isTestValuepredicate:+clerk_testfor email, test-range detection for phone).+clerk_test, or filling a test phone number) and keeps the input focused.useDevMode().showDevModeNotice— disabling the dev-mode banner also hides it.This is a preview branch to compare against the popover approach in #9162.
Notes for reviewers
FieldDevHint.tsx) is still present but unused on this branch; the sharedFieldDevHintValuetype is reused.Summary by CodeRabbit