feat(ui): Add clear button to search inputs#9098
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 0bddd00 The changes in this PR will be included in the next version bump. This PR includes changesets to release 23 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 |
|
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:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (60)
✅ Files skipped from review due to trivial changes (24)
🚧 Files skipped from review as they are similar to previous changes (11)
📝 WalkthroughWalkthroughAdds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys. ChangesSearch clear button rollout
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
@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
@clerk/sharedCurrent version: 4.25.0 Subpath
|
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
… search Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
… element Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
e0215fd to
5bd3108
Compare
Description
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
Summary by CodeRabbit