fix(ui): correct Mosaic Item pressed state and color transitions - #9293
fix(ui): correct Mosaic Item pressed state and color transitions#9293maxyinger wants to merge 1 commit into
Conversation
The pressed background on interactive rows never rendered on hover-capable devices. StyleX doubles an atom's class inside an at-rule, so the `@media (hover: hover)` `:hover` rule compiled to a higher specificity than the bare `:active` rule and won for the duration of the press. Excluding `:active` from the hover selector stops it matching while pressed, matching what `button` already does. Rows also had no transition, so the hover background snapped. They now use the same instant-press/soft-settle treatment as `button`, gated on a bare `:active` rather than `:enabled:active` because a row renders as a `div` or an `a` and `:enabled` only matches form controls. `Item.Title` gets a matching `color` transition so its hover shift settles in step with the row behind it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: af96cec The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@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
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
📝 WalkthroughWalkthroughUpdated Mosaic item styling so hover backgrounds do not override active states. Added explicit linear transitions for row background and title color using fast and instant duration tokens. Added a changeset entry documenting the press-state update. Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 @.changeset/mosaic-item-press-state.md:
- Around line 1-2: Populate the changeset front matter with the appropriate
version bump for the affected packages/ui package, then add a concise release
summary describing the mosaic item press-state behavior change. Keep the
standard Changesets delimiter format intact and ensure this is not left as a
delimiter-only changeset.
🪄 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), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: db6320ad-d4c5-40d2-9c9d-4940ce10077f
📒 Files selected for processing (2)
.changeset/mosaic-item-press-state.mdpackages/ui/src/mosaic/components/item/item.styles.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)
| --- | ||
| --- |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Populate the changeset for this package change.
Lines 1-2 contain no package bump or release description, so Changesets will not record this packages/ui behavior change for release. Add the appropriate package entry and summary.
Proposed shape
---
+'`@clerk/ui`': patch
---
+
+Fix Mosaic item pressed-state backgrounds and transitions.As per coding guidelines, Changesets must manage versioning and changelogs. Based on learnings, delimiter-only changesets are appropriate only for documentation, tooling, or scaffolding changes.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --- | |
| --- | |
| --- | |
| '`@clerk/ui`': patch | |
| --- | |
| Fix Mosaic item pressed-state backgrounds and transitions. |
🤖 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 @.changeset/mosaic-item-press-state.md around lines 1 - 2, Populate the
changeset front matter with the appropriate version bump for the affected
packages/ui package, then add a concise release summary describing the mosaic
item press-state behavior change. Keep the standard Changesets delimiter format
intact and ensure this is not left as a delimiter-only changeset.
Sources: Coding guidelines, Learnings
1 participant
The pressed background on interactive rows never rendered on hover-capable devices. StyleX doubles an atom's class inside an at-rule, so the
@media (hover: hover):hoverrule compiled to a higher specificity than the bare:activerule and won for the duration of the press. Excluding:activefrom the hover selector stops it matching while pressed, matching whatbuttonalready does.Rows also had no transition, so the hover background snapped. They now use the same instant-press/soft-settle treatment as
button, gated on a bare:activerather than:enabled:activebecause a row renders as adivor anaand:enabledonly matches form controls.Item.Titlegets a matchingcolortransition so its hover shift settles in step with the row behind it.Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change