feat(ui): scale Mosaic Item rows from a single size prop - #9297
Conversation
Item.Root now takes size (xs | md), fixing the row height and gap, and provides it through context so Item.Media derives its column width instead of taking a size of its own. Replaces the entity/action variant, adds Item.Label for action rows, and drops Item.Header/HeaderTitle/HeaderActions, which had no consumers.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: d47e2da 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 |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
📝 WalkthroughWalkthroughThe Item component now uses root-level Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 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 |
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-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: |
![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
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/item/item.test.tsx (1)
94-109: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd coverage for the new
Item.Labelpart.The "composed slots" test checks
Item.Title,Item.Description, andItem.Actionsclasses but doesn't exerciseItem.Label, the new component introduced in this PR. As per coding guidelines, "Unit tests are required for all new functionality" / "Include tests for all new features."✅ Suggested addition
<Item.Actions> <button type='button'>Manage</button> </Item.Actions> + <Item.Label>Sign out</Item.Label> </Item.Root>, ); expect(screen.getByText('Test Organization')).toHaveClass('cl-item-title'); expect(screen.getByText('Member')).toHaveClass('cl-item-description'); expect(screen.getByRole('button', { name: 'Manage' }).parentElement).toHaveClass('cl-item-actions'); +expect(screen.getByText('Sign out')).toHaveClass('cl-item-label');🤖 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/mosaic/components/item/item.test.tsx` around lines 94 - 109, The composed-slots test does not cover the new Item.Label component. Update the test around the existing Item.Root composition to render Item.Label with representative text and assert it has the expected stable label class, while preserving the existing Title, Description, and Actions assertions.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 `@packages/swingset/src/stories/item.stories.tsx`:
- Around line 195-218: Update the icon-only Button in the story to provide an
accessible name describing its more-options action, using an appropriate
aria-label or equivalent accessible labeling mechanism; keep the SVG decorative
or otherwise prevent it from being announced redundantly.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/item/item.test.tsx`:
- Around line 94-109: The composed-slots test does not cover the new Item.Label
component. Update the test around the existing Item.Root composition to render
Item.Label with representative text and assert it has the expected stable label
class, while preserving the existing Title, Description, and Actions assertions.
🪄 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: a6da41b6-6884-4b21-bd02-522dc42c9f19
📒 Files selected for processing (7)
.changeset/mosaic-item-size.mdpackages/swingset/src/stories/item.mdxpackages/swingset/src/stories/item.stories.tsxpackages/ui/src/mosaic/components/item/item.styles.tspackages/ui/src/mosaic/components/item/item.test.tsxpackages/ui/src/mosaic/components/item/item.tsxpackages/ui/src/mosaic/tokens.stylex.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)
Item.Label reacted to :hover on its own text, so the color only promoted when the pointer was over the label itself rather than anywhere in the row. Adds an itemScope marker applied by Item.Root and keys the label color to stylex.when.ancestor against it, so the scope cannot be triggered by an unrelated hovered ancestor.
2 participants
Description
Preview: https://swingset-git-carp-mosaic-item-revisions.clerkstage.dev/components/item
Item.Roottakes asize(xs|md, defaultmd) that fixes the row's height and gap, and provides it through context soItem.Mediaderives its column width from the row rather than taking a size of its own. A row scales as one unit instead of needing the prop set on two parts that can drift apart.Item.Mediareflects the resolved value asdata-sizealongside the root, and falls back to the default when rendered outside a root.This replaces the
entity/actionvariant, which conflated visual treatment with density. Action rows now use a dedicatedItem.Labelpart in place ofItem.Title— dimmed until the row is hovered, so it reads as an affordance rather than content.Item.Header,Item.HeaderTitle, andItem.HeaderActionsare removed; they had no consumers in the monorepo.Because media is now sized by the row, its child should fill the column (
Avatar.Root size='fit', or an icon atwidth='100%') rather than carry a fixed pixel size that won't tracksize. The swingset page and JSDoc are updated to match, and theItem.Labelcomponent had been declared under a duplicatedMosaicItemDescriptionname, which is corrected.The changeset is empty: Mosaic is not yet part of the public
@clerk/uisurface, matching the existingmosaic-itemandmosaic-button-variantschangesets.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change