refactor(ui): sign the Mosaic Card with Clerk, not the UserButton - #9416
Conversation
The card is the surface an instance pays the branding off, so `Card.Root` renders the "Secured by Clerk" mark itself behind `renderBranding`, defaulting to on. The UserButton drops the markup, the styles and the message, and hands its own answer — read off `displayConfig.branded` by the controller — straight to the card.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 80d2fa3 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 |
@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 |
|
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 (2)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthrough
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/mosaic/user-button/user-button.types.ts (1)
135-142: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winPreserve the deprecated
brandedinput.Removing
brandedmakes existing callers withbranded: falsefall through toCard.RootwithrenderBrandingundefined. Card.Root then defaults branding totrue, so paid instances show branding again. Retainbrandedas a deprecated alias and normalize it torenderBranding, withrenderBrandingtaking precedence.
packages/ui/src/mosaic/user-button/user-button.types.ts#L135-L142: retainbranded?: booleanas a deprecated compatibility prop.packages/ui/src/mosaic/user-button/user-button.view.tsx#L1002-L1011: resolve the legacy value before passingrenderBrandingto Card.Root.packages/ui/src/mosaic/user-button/__tests__/user-button.view.test.tsx#L641-L650: add a regression case forbranded: false.As per coding guidelines: “Do not remove or rename APIs still called by older SDKs.”
🤖 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/user-button/user-button.types.ts` around lines 135 - 142, Preserve the deprecated branded compatibility prop in packages/ui/src/mosaic/user-button/user-button.types.ts:135-142, marking it deprecated. In packages/ui/src/mosaic/user-button/user-button.view.tsx:1002-1011, normalize branded into the Card.Root renderBranding value, with an explicitly provided renderBranding taking precedence. In packages/ui/src/mosaic/user-button/__tests__/user-button.view.test.tsx:641-650, add regression coverage confirming branded: false prevents branding.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/mosaic-card-owns-branding.md:
- Around line 1-2: Add a Changesets release entry in
mosaic-card-owns-branding.md for packages/ui, specifying the appropriate version
bump for the exported CardProps and Card.Root changes and a concise release note
describing those API/output changes; do not leave the changeset front matter
empty.
---
Outside diff comments:
In `@packages/ui/src/mosaic/user-button/user-button.types.ts`:
- Around line 135-142: Preserve the deprecated branded compatibility prop in
packages/ui/src/mosaic/user-button/user-button.types.ts:135-142, marking it
deprecated. In
packages/ui/src/mosaic/user-button/user-button.view.tsx:1002-1011, normalize
branded into the Card.Root renderBranding value, with an explicitly provided
renderBranding taking precedence. In
packages/ui/src/mosaic/user-button/__tests__/user-button.view.test.tsx:641-650,
add regression coverage confirming branded: false prevents branding.
🪄 Autofix
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: 83c53995-206d-46cf-8e7f-ed80deff26fd
📒 Files selected for processing (10)
.changeset/mosaic-card-owns-branding.mdpackages/swingset/src/stories/card.component.stories.tsxpackages/ui/src/mosaic/components/card/card.styles.tspackages/ui/src/mosaic/components/card/card.test.tsxpackages/ui/src/mosaic/components/card/card.tsxpackages/ui/src/mosaic/user-button/__tests__/user-button.view.test.tsxpackages/ui/src/mosaic/user-button/user-button.messages.tspackages/ui/src/mosaic/user-button/user-button.styles.tspackages/ui/src/mosaic/user-button/user-button.types.tspackages/ui/src/mosaic/user-button/user-button.view.tsx
🔗 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)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
💤 Files with no reviewable changes (2)
- packages/ui/src/mosaic/user-button/user-button.styles.ts
- packages/ui/src/mosaic/user-button/user-button.messages.ts
| --- | ||
| --- |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add a release entry for packages/ui.
This PR changes the exported CardProps API and Card.Root output. The empty changeset will not describe or schedule that package change. Add the appropriate package version and release note.
As per coding guidelines: “Use Changesets for version management and changelogs.” Based on learnings: empty changesets are acceptable for documentation-only or non-published changes.
🤖 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-card-owns-branding.md around lines 1 - 2, Add a Changesets
release entry in mosaic-card-owns-branding.md for packages/ui, specifying the
appropriate version bump for the exported CardProps and Card.Root changes and a
concise release note describing those API/output changes; do not leave the
changeset front matter empty.
Sources: Coding guidelines, Learnings
The mark is Clerk's own signature, not something an app dresses, so it carries no `cl-` slot for `appearance.elements` to reach.
2 participants
Description
The "Secured by Clerk" mark belonged to the UserButton's popup footer, but the card is the surface an instance pays the branding off.
Card.Rootnow renders it behindrenderBranding, defaulting to on:The mark lands as the card's last child and carries no
cl-slot of its own. It is Clerk's signature rather than part of the card an app dresses, so there is deliberately nothing here forappearance.elementsto reach: an instance turns the mark off by paying the branding off, not by styling it away.The Mosaic UserButton drops the markup, the styles and the
securedBymessage, and hands its own answer through to the card. Itsbrandedprop is renamedrenderBranding, matchingrenderTriggerLabel/renderTriggerBadgebeside it:Where that answer comes from is unchanged: the connected controller reads
displayConfig.branded. The popup's DOM is unchanged too — the mark was already the card's last child, by way of the footer.Swingset's Card prop table picks
renderBrandingup as a boolean row with a live toggle in the playground.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change