feat(ui): add Mosaic Menu component - #9252
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: e7ee73a 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 |
|
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:
📝 WalkthroughWalkthroughAdds a styled Mosaic Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1⚔️ Resolve merge conflicts 💡
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: 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-menu.md:
- Around line 1-2: Replace the empty changeset front matter in mosaic-menu.md
with an `@clerk/ui` minor release entry and add a concise summary describing the
new public Menu API.
In `@packages/swingset/src/stories/menu.component.mdx`:
- Around line 20-29: Update the Menu usage example around Menu.Item to import or
define the PlusIcon symbol before it is passed to the icon prop, ensuring the
snippet is self-contained and valid for TypeScript consumers.
In `@packages/ui/src/mosaic/components/menu/menu.tsx`:
- Around line 44-47: The default icon-only trigger in the menu component is
unnamed for assistive technology. Update the trigger around the children
fallback in packages/ui/src/mosaic/components/menu/menu.tsx:44-47 to provide a
default aria-label of “Open menu” only when children are absent, while
preserving consumer-supplied labels. Update the default-trigger test in
packages/ui/src/mosaic/components/menu/menu.test.tsx:28-36 to query it by role
and accessible name, asserting name: “Open menu”.
🪄 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: ff2ea2bc-f4d7-47ec-88d7-ea1f6b2746e0
📒 Files selected for processing (12)
.changeset/mosaic-menu.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/menu.component.mdxpackages/swingset/src/stories/menu.component.stories.tsxpackages/ui/src/mosaic/components/menu/index.tspackages/ui/src/mosaic/components/menu/menu.styles.tspackages/ui/src/mosaic/components/menu/menu.test.tsxpackages/ui/src/mosaic/components/menu/menu.tsxpackages/ui/src/mosaic/icons/registry.tsxpackages/ui/src/mosaic/styles/index.tspackages/ui/tsdown.mosaic.config.mts
🔗 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.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Add an @clerk/ui release entry.
This empty changeset will omit the new public Menu API from the package release and changelog. Add an @clerk/ui minor entry with a concise feature summary.
Proposed fix
---
+'`@clerk/ui`': minor
---
+
+Add the Mosaic Menu component and menu glyphs.As per coding guidelines, use Changesets for version management and changelogs. Based on learnings, empty changesets are only appropriate for documentation-only or non-published 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`': minor | |
| --- | |
| Add the Mosaic Menu component and menu glyphs. |
🤖 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-menu.md around lines 1 - 2, Replace the empty changeset
front matter in mosaic-menu.md with an `@clerk/ui` minor release entry and add a
concise summary describing the new public Menu API.
Sources: Coding guidelines, Learnings
| {...mergeStyleProps(themeProps('menu-trigger'), className, style)} | ||
| {...rest} | ||
| > | ||
| {children ?? <EllipsisIcon {...stylex.props(styles.triggerIcon)} />} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Make the default icon-only trigger accessible. The default trigger renders only an ellipsis glyph, leaving it unnamed for screen readers; the test currently preserves that regression.
packages/ui/src/mosaic/components/menu/menu.tsx#L44-L47: set a defaultaria-labelsuch asOpen menuwhenchildrenis absent, while allowing a consumer-supplied label to override it.packages/ui/src/mosaic/components/menu/menu.test.tsx#L28-L36: query the default trigger by its accessible name and assertname: 'Open menu'.
As per coding guidelines, implement proper ARIA attributes and comprehensive component tests.
📍 Affects 2 files
packages/ui/src/mosaic/components/menu/menu.tsx#L44-L47(this comment)packages/ui/src/mosaic/components/menu/menu.test.tsx#L28-L36
🤖 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/menu/menu.tsx` around lines 44 - 47, The
default icon-only trigger in the menu component is unnamed for assistive
technology. Update the trigger around the children fallback in
packages/ui/src/mosaic/components/menu/menu.tsx:44-47 to provide a default
aria-label of “Open menu” only when children are absent, while preserving
consumer-supplied labels. Update the default-trigger test in
packages/ui/src/mosaic/components/menu/menu.test.tsx:28-36 to query it by role
and accessible name, asserting name: “Open menu”.
Source: Coding guidelines
61b2d09 to
fb372be
Compare
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 `@packages/ui/src/mosaic/components/menu/menu.test.tsx`:
- Around line 61-74: Add a keyboard-focused test alongside the existing menu
interaction test, using the menu trigger to open the menu via keyboard, navigate
between items with the appropriate keys, assert the highlighted item changes in
sync with pointer behavior, and activate the selected item. Reuse the existing
renderMenu setup and accessible menu/menuitem symbols, and verify the expected
activation outcome.
🪄 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: a2e5dfaa-d6f4-4457-a238-b5d20f4fb7c3
📒 Files selected for processing (11)
.changeset/mosaic-menu.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/menu.component.mdxpackages/swingset/src/stories/menu.component.stories.tsxpackages/ui/src/mosaic/components/menu/index.tspackages/ui/src/mosaic/components/menu/menu.styles.tspackages/ui/src/mosaic/components/menu/menu.test.tsxpackages/ui/src/mosaic/components/menu/menu.tsxpackages/ui/src/mosaic/icons/registry.tsxpackages/ui/src/mosaic/styles/index.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)
🚧 Files skipped from review as they are similar to previous changes (10)
- packages/ui/src/mosaic/components/menu/index.ts
- packages/swingset/src/stories/menu.component.stories.tsx
- packages/swingset/src/components/DocsViewer.tsx
- packages/ui/src/mosaic/styles/index.ts
- packages/swingset/src/stories/menu.component.mdx
- packages/swingset/src/lib/registry.ts
- packages/ui/src/mosaic/components/menu/menu.styles.ts
- .changeset/mosaic-menu.md
- packages/ui/src/mosaic/components/menu/menu.tsx
- packages/ui/src/mosaic/icons/registry.tsx
Adds a StyleX-themed Menu built on the @clerk/headless menu primitive, with swingset docs and plus/log-out glyphs in the icon registry.
fb372be to
8e0ce8d
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/ui/src/mosaic/components/menu/index.ts (1)
1-2: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAvoid the new component barrel.
Import and re-export
menu.tsdirectly instead of adding a re-export-onlyindex.ts.
packages/ui/src/mosaic/components/menu/index.ts#L1-L2: remove the barrel file.packages/ui/src/mosaic/styles/index.ts#L17-L24: export from../components/menu/menudirectly.As per coding guidelines, “Avoid barrel files (index.ts re-exports) as they can cause circular dependencies.”
🤖 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/menu/index.ts` around lines 1 - 2, Remove the re-export-only packages/ui/src/mosaic/components/menu/index.ts barrel file. Update the exports in packages/ui/src/mosaic/styles/index.ts lines 17-24 to import directly from ../components/menu/menu, preserving the existing Menu components and prop type exports.Source: Coding guidelines
packages/swingset/src/stories/menu.component.stories.tsx (1)
20-37: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd an explicit return type to the exported story.
Defaultis an exported TypeScript function without a return annotation. Use an explicit React element type and a type-only import.Proposed fix
/** `@jsxImportSource` `@emotion/react` */ import { Menu } from '`@clerk/ui/mosaic/components/menu`'; import { iconRegistry } from '`@clerk/ui/mosaic/icons/registry`'; +import type { ReactElement } from 'react'; -export function Default() { +export function Default(): ReactElement {🤖 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/menu.component.stories.tsx` around lines 20 - 37, Update the exported Default story function to declare an explicit React element return type, adding the required React type as a type-only import. Keep the existing Menu.Root rendering and story behavior unchanged.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/menu.component.stories.tsx`:
- Around line 11-15: Update the Menu story’s meta object to set
StoryMeta.styleEngine to the StyleX engine, alongside the existing group, title,
and source fields, so the story uses the className/style contract instead of the
default Emotion sx contract.
In `@packages/ui/src/mosaic/components/menu/menu.styles.ts`:
- Around line 6-10: Update the positioner style in the menu styles configuration
to restore the default stacking layer, using the prior z-index value or shared
overlay stacking token. Keep the existing outline reset and positioning behavior
unchanged so the default MenuContent positioner renders above page content and
common overlays.
---
Nitpick comments:
In `@packages/swingset/src/stories/menu.component.stories.tsx`:
- Around line 20-37: Update the exported Default story function to declare an
explicit React element return type, adding the required React type as a
type-only import. Keep the existing Menu.Root rendering and story behavior
unchanged.
In `@packages/ui/src/mosaic/components/menu/index.ts`:
- Around line 1-2: Remove the re-export-only
packages/ui/src/mosaic/components/menu/index.ts barrel file. Update the exports
in packages/ui/src/mosaic/styles/index.ts lines 17-24 to import directly from
../components/menu/menu, preserving the existing Menu components and prop type
exports.
🪄 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: dd6d65f5-9a65-4461-8b56-82276d137504
📒 Files selected for processing (11)
.changeset/mosaic-menu.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/menu.component.mdxpackages/swingset/src/stories/menu.component.stories.tsxpackages/ui/src/mosaic/components/menu/index.tspackages/ui/src/mosaic/components/menu/menu.styles.tspackages/ui/src/mosaic/components/menu/menu.test.tsxpackages/ui/src/mosaic/components/menu/menu.tsxpackages/ui/src/mosaic/icons/registry.tsxpackages/ui/src/mosaic/styles/index.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)
| export const meta: StoryMeta = { | ||
| group: 'Components', | ||
| title: 'Menu', | ||
| source: 'packages/ui/src/mosaic/components/menu/menu.tsx', | ||
| }; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== candidate story files =="
fd 'menu\.component\.stories\.tsx$' . || true
echo "== target story =="
if [ -f packages/swingset/src/stories/menu.component.stories.tsx ]; then
cat -n packages/swingset/src/stories/menu.component.stories.tsx
fi
echo "== locate StoryMeta/styleEngine definitions =="
rg -n "interface StoryMeta|type StoryMeta|styleEngine|function StoryMeta|export const StoryMeta|const StoryMeta" packages/swingset packages -g '*.ts' -g '*.tsx' || trueRepository: clerk/javascript
Length of output: 2864
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== StoryMeta type =="
cat -n packages/swingset/src/lib/types.ts | sed -n '1,80p'
echo "== usages of StyleX components/menu =="
rg -n "packages/ui/src/mosaic/components/menu|components/menu|`@clerk/ui/mosaic/components/menu`|style-engine: \"stylex\"|style-engine: 'stylex'|className: s" packages/ui/src/mosaic/components/menu/menu.tsx packages/ui/src/mosaic -g '*.tsx' -g '*.ts' || true
echo "== inspect menu component =="
if [ -f packages/ui/src/mosaic/components/menu/menu.tsx ]; then
wc -l packages/ui/src/mosaic/components/menu/menu.tsx
sed -n '1,220p' packages/ui/src/mosaic/components/menu/menu.tsx | cat -n
fiRepository: clerk/javascript
Length of output: 8206
Mark the Menu story as StyleX-based.
StoryMeta.styleEngine is optional and defaults to 'emotion'; omitting it here makes the docs/show the Emotion sx contract even though Menu is implemented with StyleX className/style.
Proposed fix
export const meta: StoryMeta = {
group: 'Components',
title: 'Menu',
source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
+ styleEngine: 'stylex',
};📝 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.
| export const meta: StoryMeta = { | |
| group: 'Components', | |
| title: 'Menu', | |
| source: 'packages/ui/src/mosaic/components/menu/menu.tsx', | |
| }; | |
| export const meta: StoryMeta = { | |
| group: 'Components', | |
| title: 'Menu', | |
| source: 'packages/ui/src/mosaic/components/menu/menu.tsx', | |
| styleEngine: 'stylex', | |
| }; |
🤖 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/menu.component.stories.tsx` around lines 11 -
15, Update the Menu story’s meta object to set StoryMeta.styleEngine to the
StyleX engine, alongside the existing group, title, and source fields, so the
story uses the className/style contract instead of the default Emotion sx
contract.
Co-authored-by: Alex Carpenter <alex.carpenter@clerk.dev>
# Conflicts: # packages/swingset/src/lib/registry.ts # packages/ui/src/mosaic/styles/index.ts
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/menu.component.mdx`:
- Around line 31-41: Make the Menu usage snippet self-contained by declaring or
importing the signOut and deleteUser handlers before they are referenced by the
Menu.Item components, or remove those onClick props while preserving the
displayed menu actions.
In `@packages/ui/src/mosaic/components/menu/menu.tsx`:
- Around line 77-99: Retain the existing icon prop in MenuItemProps as
deprecated for compatibility, and update MosaicMenuItem to render the icon
before children ?? label. Document that consumers should use children for the
replacement, while preserving the current label fallback and styling behavior.
🪄 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: 7d67faaf-0b78-49dd-ae42-162207b88cb8
📒 Files selected for processing (6)
.changeset/tidy-menus-wave.mdpackages/swingset/src/stories/menu.component.mdxpackages/swingset/src/stories/menu.component.stories.tsxpackages/ui/src/mosaic/components/menu/menu.styles.tspackages/ui/src/mosaic/components/menu/menu.test.tsxpackages/ui/src/mosaic/components/menu/menu.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)
…into carp/mosaic-menu
… Button Base UI's render callback hands back DOM button props including color?: string, but Mosaic's Button omits the native color and redefines it as a token union, so spreading them failed to typecheck. Also reorders two menu.styles.ts keys to satisfy stylex sort-keys.
2 participants
Description
Adds a reusable Mosaic Menu to
@clerk/ui, styled with StyleX on top of the@clerk/headlessmenu primitive.Preview: https://swingset-git-carp-mosaic-menu.clerkstage.dev/components/menu
Menu.Triggerdefaults to a square ghostButton(size='sm') holding an ellipsis glyph; pass children for a labelled trigger, orrenderto supply your own element.Menu.Contentcomposes the portal, positioner, and popup, so items are the only children consumers write.Styling notes
.cl-<slot>class (menu-trigger,menu-positioner,menu-popup,menu-item,menu-item-icon,menu-item-label,menu-separator); consumers override from a later CSS layer.data-starting-style/data-ending-style, disabled underprefers-reduced-motion: reduce. Item hover is gated behind@media (hover: hover)and the keyboard-active item styles offdata-active, so pointer and keyboard highlighting stay in sync.max-heighttracks--cl-available-heightfrom the positioner, so long menus scroll rather than overflow the viewport.plusandlog-outglyphs added to the canonical icon registry (alongside the newellipsis) rather than duplicated inline.Build
tsdown.mosaic.config.mtsnow marks@clerk/headlessexternal, matching feat(ui): add Mosaic Popover component #9241. Without it, the bundled.d.tscan't follow headless's extensionless re-export chain indist/primitives/*/index.d.tsand fails with[MISSING_EXPORT]. Onlystyles.cssships from this build.styles.cssships from the isolated mosaic build; the mosaic JS is not publicly importable yet, so the changeset is empty.Docs
menu.component.stories.tsx+.mdx, archetype A · compound) and wired into the registry +docModules. Namedmenu.component.*so it doesn't collide with the existing headlessMenuprimitive page.How to test
pnpm --filter @clerk/ui test src/mosaic/components/menu(7 tests)pnpm --filter @clerk/ui build:mosaic— verifies the menu atoms land instyles.csspnpm run dev:swingset→ Components → MenuChecklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change