feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
austincalvelage merged 14 commits into from
Jul 30, 2026
Merged

feat(ui): add Mosaic Menu component updates #9279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f35db0e
Add 0.25 increments to space scale
austincalvelage Jul 29, 2026
7edd037
style(ui): refine Mosaic menu styling
austincalvelage Jul 30, 2026
c7c7a41
feat(ui): add destructive Menu item intent
austincalvelage Jul 30, 2026
c66d81b
docs(swingset): update Mosaic Menu example
austincalvelage Jul 30, 2026
9d0edf5
refactor(ui): simplify Mosaic Menu item API
austincalvelage Jul 30, 2026
3777da3
style(ui): align Mosaic Menu item sizing and states
austincalvelage Jul 30, 2026
f6a59ae
docs(swingset): update Mosaic Menu item examples
austincalvelage Jul 30, 2026
84280c4
fix(ui): restore neutral menu item hover
austincalvelage Jul 30, 2026
610dd66
style(ui): align Mosaic menu dimensions
austincalvelage Jul 30, 2026
36ffd92
refactor(ui): remove redundant Mosaic menu border styles
austincalvelage Jul 30, 2026
1ad3ef6
style(ui): match Mosaic menu shadow colors
austincalvelage Jul 30, 2026
2b6e37d
docs(ui): update Mosaic menu changeset
austincalvelage Jul 30, 2026
70a0627
fix(ui): remove Mosaic menu pointer dead zones
austincalvelage Jul 30, 2026
6ed1076
Update .changeset/tidy-menus-wave.md
alexcarpenter Jul 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/tidy-menus-wave.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---
40 changes: 27 additions & 13 deletions packages/swingset/src/stories/menu.component.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
<Menu.Trigger />
<Menu.Content>
<Menu.Item
label='Add workspace'
icon={<PlusIcon />}
/>
<Menu.Separator />
<Menu.Item label='Add workspace'>
<Icon name='plus' />
Add workspace
</Menu.Item>
<Menu.Item
label='Sign out'
onClick={signOut}
/>
>
<Icon name='log-out' />
Sign out
</Menu.Item>
<Menu.Item
label='Delete user'
color='negative'
onClick={deleteUser}
>
<Icon name='close' />
Delete user
</Menu.Item>
</Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
label='Delete'
disabled
/>
color='negative'
>
<Icon name='close' />
Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children. |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down
27 changes: 15 additions & 12 deletions packages/swingset/src/stories/menu.component.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
return (
<Menu.Root>
<Menu.Trigger />
<Menu.Content>
<Menu.Item label='Add workspace'>
<Icon name='plus' />
Add workspace
</Menu.Item>
<Menu.Item label='Sign out'>
<Icon name='log-out' />
Sign out
</Menu.Item>
<Menu.Item
label='Add workspace'
icon={<PlusIcon />}
/>
<Menu.Separator />
<Menu.Item
label='Sign out'
icon={<LogOutIcon />}
/>
label='Delete user'
color='negative'
>
<Icon name='close' />
Delete user
</Menu.Item>
</Menu.Content>
</Menu.Root>
);
Expand Down
58 changes: 30 additions & 28 deletions packages/ui/src/mosaic/components/menu/menu.styles.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
},

popup: {
borderColor: colorVars['--cl-color-border'],
borderRadius: radiusVars['--cl-radius-container'],
borderStyle: 'solid',
borderWidth: '1px',
borderRadius: radiusVars['--cl-radius-element'],
outline: 'none',
paddingBlock: space['1'],
paddingInline: space['1'],
paddingBlock: space['0.5'],
paddingInline: space['0.5'],
backgroundColor: colorVars['--cl-color-card'],
boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
0 24px 24px -10px oklch(0.2046 0 0 / 4%),
0 0 0 1px oklch(0.2046 0 0 / 4%)`,

boxSizing: 'border-box',
color: colorVars['--cl-color-card-foreground'],
display: 'flex',
flexDirection: 'column',
gap: space['0.5'],
opacity: {
default: 1,
':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
transitionProperty: 'opacity, scale',
transitionTimingFunction: 'ease-out',
maxHeight: 'var(--cl-available-height)',
minWidth: '11rem',
minWidth: '12.5rem',
overflowY: 'auto',
},

item: {
borderRadius: radiusVars['--cl-radius-inner'],
borderRadius: '0.375rem',
borderStyle: 'none',
gap: space['2'],
gap: space['1'],
outline: 'none',
paddingBlock: space['1'],
paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
fontWeight: fontWeightVars['--cl-font-medium'],
lineHeight: typeScaleVars['--cl-text-sm-leading'],
opacity: { default: 1, ':is([data-disabled])': 0.5 },
position: 'relative',
textAlign: 'start',
transitionDuration: {
default: '150ms',
'@media (prefers-reduced-motion: reduce)': '0.01ms',
},
transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
width: '100%',
'::before': {
content: '""',
position: 'absolute',
insetBlock: `calc(-1 * ${space['0.5']})`,
insetInline: `calc(-1 * ${space['0.5']})`,
},
},

itemIcon: {
alignItems: 'center',
color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
display: 'inline-flex',
flexShrink: 0,
justifyContent: 'center',
height: space['4'],
width: space['4'],
},

itemLabel: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
itemNegative: {
backgroundColor: {
default: 'transparent',
':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
'@media (hover: hover)': {
':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
},
},
color: colorVars['--cl-color-negative'],
},

separator: {
// Full-bleed across the popup: cancel the popup's inline padding.
marginBlock: space['1'],
marginInline: `calc(-1 * ${space['1']})`,
marginBlock: space['0.5'],
marginInline: `calc(-1 * ${space['0.5']})`,
backgroundColor: colorVars['--cl-color-border'],
blockSize: '1px',
},
Expand Down
30 changes: 25 additions & 5 deletions packages/ui/src/mosaic/components/menu/menu.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
<Menu.Root>
<Menu.Trigger />
<Menu.Content>
<Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
<Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
<Menu.Separator />
<Menu.Item
label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
// `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
expect(screen.getByTestId('add-icon')).toBeInTheDocument();
});
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
expect(onClick).not.toHaveBeenCalled();
});

it('reflects negative color on the item', () => {
render(
<Menu.Root defaultOpen>
<Menu.Trigger />
<Menu.Content>
<Menu.Item
label='Delete user'
color='negative'
>
<svg data-testid='delete-icon' />
Delete user
</Menu.Item>
</Menu.Content>
</Menu.Root>,
);

expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
});

it('merges consumer className and style onto the popup and items', async () => {
const user = userEvent.setup();
render(
Expand Down
20 changes: 10 additions & 10 deletions packages/ui/src/mosaic/components/menu/menu.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
/** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
/** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
{ icon, label, className, style, children, ...rest },
{ color = 'neutral', label, className, style, children, ...rest },
ref,
) {
return (
<Primitive.Item
ref={ref}
label={label}
{...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
{...mergeStyleProps(
themeProps('menu-item', { color }),
stylex.props(styles.item, color === 'negative' && styles.itemNegative),
className,
style,
)}
{...rest}
>
{icon ? (
<span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
) : null}
<span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
{children ?? label}
</span>
{children ?? label}
</Primitive.Item>
);
});
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(ui): add Mosaic Menu component updates#9279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

austincalvelage
merged 14 commits into

from

Jul 30, 2026
 Merged


feat(ui): add Mosaic Menu component updates
#9279
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


14 commits


Select commit
Hold shift + click to select a range
f35db0e

Add 0.25 increments to space scale


austincalvelage Jul 29, 2026
7edd037

style(ui): refine Mosaic menu styling


austincalvelage Jul 30, 2026
c7c7a41

feat(ui): add destructive Menu item intent


austincalvelage Jul 30, 2026
c66d81b

docs(swingset): update Mosaic Menu example


austincalvelage Jul 30, 2026
9d0edf5

refactor(ui): simplify Mosaic Menu item API


austincalvelage Jul 30, 2026
3777da3

style(ui): align Mosaic Menu item sizing and states


austincalvelage Jul 30, 2026
f6a59ae

docs(swingset): update Mosaic Menu item examples


austincalvelage Jul 30, 2026
84280c4

fix(ui): restore neutral menu item hover


austincalvelage Jul 30, 2026
610dd66

style(ui): align Mosaic menu dimensions


austincalvelage Jul 30, 2026
36ffd92

refactor(ui): remove redundant Mosaic menu border styles


austincalvelage Jul 30, 2026
1ad3ef6

style(ui): match Mosaic menu shadow colors


austincalvelage Jul 30, 2026
2b6e37d

docs(ui): update Mosaic menu changeset


austincalvelage Jul 30, 2026
70a0627

fix(ui): remove Mosaic menu pointer dead zones


austincalvelage Jul 30, 2026
6ed1076

Update .changeset/tidy-menus-wave.md


alexcarpenter Jul 30, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/tidy-menus-wave.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

40 changes: 27 additions & 13 deletions
packages/swingset/src/stories/menu.component.mdx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -18,20 +18,31 @@ Click the trigger, then use the arrow keys or type to move between items.
## Usage

```tsx
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';

<Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item
 label='Sign out'
 onClick={signOut}
 />
 >
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Delete user'
 color='negative'
 onClick={deleteUser}
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
</Menu.Root>;
```
Expand All@@ -52,16 +63,19 @@ props (ARIA attributes, click and keyboard handlers) to spread.

### Items

`label` drives typeahead and, unless `children` is given, the visible text. `icon` renders a leading
glyph sized and tinted by the item. `disabled` items are skipped by keyboard navigation and their
`onClick` never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it
open.
`label` drives typeahead andis used as the visible text when `children` is omitted. Render an icon
and text together as children. Use `color='negative'` for destructive actions; the color is
inherited by the children. `disabled` items are skipped by keyboard navigation and their `onClick`
never fires. Activating an item closes the menu; pass `closeOnClick={false}` to keep it open.

```tsx
<Menu.Item
 label='Delete'
 disabled
/>
 color='negative'
>
 <Icon name='close' />
 Delete
</Menu.Item>
```

### Placement
Expand DownExpand Up@@ -98,7 +112,7 @@ const [open, setOpen] = useState(false);
| `Menu.Root` | — | State provider; owns open/close, placement, and keyboard navigation. |
| `Menu.Trigger` | `menu-trigger` | Opens the menu. Defaults to a square ghost `Button` with an ellipsis. |
| `Menu.Content` | `menu-positioner` / `menu-popup` | Portals, positions, and renders the popup surface. |
| `Menu.Item` | `menu-item` | A single action. Also emits `menu-item-icon` and `menu-item-label`. |
| `Menu.Item` | `menu-item` | A single action whose content is composed through children.  |
| `Menu.Separator` | `menu-separator` | Full-bleed divider between groups of items. |

## Styling
Expand Down

27 changes: 15 additions & 12 deletions
packages/swingset/src/stories/menu.component.stories.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
/** @jsxImportSource @emotion/react */
import { Icon } from '@clerk/ui/mosaic/components/icon';
import { Menu } from '@clerk/ui/mosaic/components/menu';
import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';

import type { StoryMeta } from '@/lib/types';

Expand All@@ -14,23 +14,26 @@ export const meta: StoryMeta = {
 source: 'packages/ui/src/mosaic/components/menu/menu.tsx',
};

const PlusIcon = iconRegistry.plus;
const LogOutIcon = iconRegistry['log-out'];

export function Default() {
 return (
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item label='Add workspace'>
 <Icon name='plus' />
 Add workspace
 </Menu.Item>
 <Menu.Item label='Sign out'>
 <Icon name='log-out' />
 Sign out
 </Menu.Item>
 <Menu.Item
 label='Add workspace'
 icon={<PlusIcon />}
 />
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
 icon={<LogOutIcon />}
 />
 label='Delete user'
 color='negative'
 >
 <Icon name='close' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>
 );
Expand Down

58 changes: 30 additions & 28 deletions
packages/ui/src/mosaic/components/menu/menu.styles.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,20 +11,20 @@ export const styles = stylex.create({
 },

 popup: {
 borderColor: colorVars['--cl-color-border'],
 borderRadius: radiusVars['--cl-radius-container'],
 borderStyle: 'solid',
 borderWidth: '1px',
 borderRadius: radiusVars['--cl-radius-element'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['1'],
 paddingBlock: space['0.5'],
 paddingInline: space['0.5'],
 backgroundColor: colorVars['--cl-color-card'],
 boxShadow: `0 10px 24px color-mix(in oklab, oklch(0 0 0) 8%, transparent),
 0 2px 6px color-mix(in oklab, oklch(0 0 0) 4%, transparent)`,
 boxShadow: `0 12px 12px -7px oklch(0.2046 0 0 / 12%),
 0 24px 24px -10px oklch(0.2046 0 0 / 4%),
 0 0 0 1px oklch(0.2046 0 0 / 4%)`,

 boxSizing: 'border-box',
 color: colorVars['--cl-color-card-foreground'],
 display: 'flex',
 flexDirection: 'column',
 gap: space['0.5'],
 opacity: {
 default: 1,
 ':is([data-ending-style])': 0,
Expand All@@ -45,14 +45,14 @@ export const styles = stylex.create({
 transitionProperty: 'opacity, scale',
 transitionTimingFunction: 'ease-out',
 maxHeight: 'var(--cl-available-height)',
 minWidth: '11rem',
 minWidth: '12.5rem',
 overflowY: 'auto',
 },

 item: {
 borderRadius: radiusVars['--cl-radius-inner'],
 borderRadius: '0.375rem',
 borderStyle: 'none',
 gap: space['2'],
 gap: space['1'],
 outline: 'none',
 paddingBlock: space['1'],
 paddingInline: space['2'],
Expand All@@ -73,36 +73,38 @@ export const styles = stylex.create({
 fontWeight: fontWeightVars['--cl-font-medium'],
 lineHeight: typeScaleVars['--cl-text-sm-leading'],
 opacity: { default: 1, ':is([data-disabled])': 0.5 },
 position: 'relative',
 textAlign: 'start',
 transitionDuration: {
 default: '150ms',
 '@media (prefers-reduced-motion: reduce)': '0.01ms',
 },
 transitionProperty: 'background-color',
minHeight: space['8'],
height: space['7'],
 width: '100%',
 '::before': {
 content: '""',
 position: 'absolute',
 insetBlock: `calc(-1 * ${space['0.5']})`,
 insetInline: `calc(-1 * ${space['0.5']})`,
 },
 },

 itemIcon: {
 alignItems: 'center',
 color: `color-mix(in oklab, ${colorVars['--cl-color-card-foreground']} 60%, transparent)`,
 display: 'inline-flex',
 flexShrink: 0,
 justifyContent: 'center',
 height: space['4'],
 width: space['4'],
 },

 itemLabel: {
 overflow: 'hidden',
 textOverflow: 'ellipsis',
 whiteSpace: 'nowrap',
 itemNegative: {
 backgroundColor: {
 default: 'transparent',
 ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 '@media (hover: hover)': {
 ':hover': `color-mix(in oklab, ${colorVars['--cl-color-negative']} 8%, transparent)`,
 },
 },
 color: colorVars['--cl-color-negative'],
 },

 separator: {
 // Full-bleed across the popup: cancel the popup's inline padding.
 marginBlock: space['1'],
 marginInline: `calc(-1 * ${space['1']})`,
 marginBlock: space['0.5'],
 marginInline: `calc(-1 * ${space['0.5']})`,
 backgroundColor: colorVars['--cl-color-border'],
 blockSize: '1px',
 },
Expand Down

30 changes: 25 additions & 5 deletions
packages/ui/src/mosaic/components/menu/menu.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,10 @@ function renderMenu(props?: { onSignOut?: () => void }) {
 <Menu.Root>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
label='Add workspace'
icon={<svg data-testid='add-icon' />}
/>
 <Menu.Item label='Add workspace'>
<svg data-testid='add-icon' />
Add workspace
</Menu.Item>
 <Menu.Separator />
 <Menu.Item
 label='Sign out'
Expand DownExpand Up@@ -68,7 +68,7 @@ describe('Mosaic Menu', () => {
 // `role="menu"` sits on the positioner (floating-ui owns it); the popup is the surface inside.
 expect(screen.getByRole('menu')).toHaveClass('cl-menu-positioner');
 expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toBeInTheDocument();
 expect(screen.getByRole('menuitem', { name: 'Add workspace' })).toHaveAttribute('data-color', 'neutral');
 expect(screen.getByRole('separator')).toHaveClass('cl-menu-separator');
 expect(screen.getByTestId('add-icon')).toBeInTheDocument();
 });
Expand DownExpand Up@@ -108,6 +108,26 @@ describe('Mosaic Menu', () => {
 expect(onClick).not.toHaveBeenCalled();
 });

 it('reflects negative color on the item', () => {
 render(
 <Menu.Root defaultOpen>
 <Menu.Trigger />
 <Menu.Content>
 <Menu.Item
 label='Delete user'
 color='negative'
 >
 <svg data-testid='delete-icon' />
 Delete user
 </Menu.Item>
 </Menu.Content>
 </Menu.Root>,
 );

 expect(screen.getByRole('menuitem', { name: 'Delete user' })).toHaveAttribute('data-color', 'negative');
 expect(screen.getByTestId('delete-icon').parentElement).toHaveClass('cl-menu-item');
 });

 it('merges consumer className and style onto the popup and items', async () => {
 const user = userEvent.setup();
 render(
Expand Down

20 changes: 10 additions & 10 deletions
packages/ui/src/mosaic/components/menu/menu.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -75,28 +75,28 @@ export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(fu
});

export interface MenuItemProps extends PrimitiveMenuItemProps {
 /** Leading glyph, sized and tinted by the item. */
icon?: React.ReactNode;
 /** Semantic color of the action. */
color?: 'neutral' | 'negative';
}

/** A single menu action. `label` drives typeahead and, unless `children` is given, the visible text. */
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
 { icon, label, className, style, children, ...rest },
 { color = 'neutral', label, className, style, children, ...rest },
 ref,
) {
 return (
 <Primitive.Item
 ref={ref}
 label={label}
 {...mergeStyleProps(themeProps('menu-item'), stylex.props(styles.item), className, style)}
 {...mergeStyleProps(
 themeProps('menu-item', { color }),
 stylex.props(styles.item, color === 'negative' && styles.itemNegative),
 className,
 style,
 )}
 {...rest}
 >
 {icon ? (
 <span {...mergeStyleProps(themeProps('menu-item-icon'), stylex.props(styles.itemIcon))}>{icon}</span>
 ) : null}
 <span {...mergeStyleProps(themeProps('menu-item-label'), stylex.props(styles.itemLabel))}>
 {children ?? label}
 </span>
 {children ?? label}
 </Primitive.Item>
 );
});
Expand Down
Loading