feat(components): size menu labels and tags from the control text by benjamincanac · Pull Request #7344 · nuxt/ui

benjamincanac · 2026-11-03T10:36:27Z

🔗 Linked issue

Part of #6918, Epic B of #6610

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The group labels of the menus disagreed: DropdownMenu and ContextMenu drew them at item size on the control scale, while Select, SelectMenu, InputMenu, CommandPalette, Listbox and EditorSuggestionMenu drew them smaller with literal classes that ignored a --ui-control-text-* override.

Those literals followed a rule nobody wrote down: the item text minus 2px, its line height minus 4px. This PR writes that rule against the item's tokens on all eight, text-[calc(var(--ui-control-text-<size>)-0.125rem)]/[calc(var(--ui-control-text-<size>--line-height)-0.25rem)], so a label follows the scale and stays smaller than its items at every size. Reading the token of the size below doesn't work, since the scale repeats its text at xs/sm and md/lg, which would leave the label the size of its items at sm and lg.

Measured in the playground, the six literal menus render the same as before. DropdownMenu and ContextMenu labels get 2px smaller at every size:

Size	Before	After
`xs`	12px / 16px	10px / 12px
`sm`	12px / 16px	10px / 12px
`md`	14px / 20px	12px / 16px
`lg`	14px / 20px	12px / 16px
`xl`	16px / 24px	14px / 20px

The tags of InputTags and InputMenu had the same literals, so they get the same rule, and their delete icon, size-3 to size-4, now reads --ui-control-text-<size>, which gives the same 12px to 16px. Both render the same as before. DashboardSearch and ContentSearch follow CommandPalette. The migration guide gets a line in Control sizes.

A label now reads as a group heading, so the DropdownMenu and ContextMenu examples that used one as an account row with an avatar, alone in its group, now put it at the top of the next group without the avatar, the dashboard template guide included. The checkbox examples drop the separator between the label and its items, and the icon on the label.

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

vercel · 2026-11-03T10:36:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ui	Building	Preview	Nov 3, 2026 2:52pm UTC
ui-repl	Ready	Preview	Nov 3, 2026 2:52pm UTC

coderabbitai · 2026-11-03T10:36:47Z

No actionable comments were generated in the recent review.

Walkthrough

Group-label typography changes across DropdownMenu, ContextMenu, CommandPalette, InputMenu, Listbox, and Select. The migration guide describes how label sizes relate to item sizes.

Changes: Group label sizing

Layer / File(s)	Summary
Update group-label typography `src/runtime/theme/dropdown-menu.ts`, `src/runtime/theme/context-menu.ts`, `src/runtime/theme/command-palette.ts`, `src/runtime/theme/input-menu.ts`, `src/runtime/theme/listbox.ts`, `src/runtime/theme/select.ts`, `docs/content/docs/1.getting-started/3.migration.md`	DropdownMenu and ContextMenu labels shift one size smaller than their items. CommandPalette, InputMenu, Listbox, and Select labels use shared control text-size and line-height variables. The migration guide describes the affected components and sizes.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Possibly related issues

v5 #6918: Tracks the v5 rollout and migration changes, which include the group-label sizing changes described in this PR.

Possibly related PRs

nuxt/ui#7340: Defines the shared control text-size and line-height tokens used by the theme changes in this PR.

Suggested labels: v5

Merge Risk: Minimal · up to ad4b9

The described changes align menu labels and tags with control-size tokens and update related examples and migration guidance. No actionable merge-blocking risk is established; merge after normal checks.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title names the main change: menu group labels and tags are now sized from the control text tokens. It matches the raw summary, which covers the label sizing across DropdownMenu, ContextMenu, Sele…
Description check		The description is directly related to the changeset. It explains that menu group labels were sized inconsistently, and it gives the new rule written against the control text and line-height tokens. I…
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title names the main change: menu group labels and tags are now sized from the control text tokens. It matches the raw summary, which covers the label sizing across DropdownMenu, ContextMenu, Select, Listbox and other theme files, plus InputTags and InputMenu tag sizing. The title is short and single-sentence, and it uses the conventional type(scope) prefix.

Full details: Description check

Explanation

The description is directly related to the changeset. It explains that menu group labels were sized inconsistently, and it gives the new rule written against the control text and line-height tokens. It also covers the tag and delete-icon sizing, the measured before/after table for DropdownMenu and ContextMenu, the migration guide line, and the removal of avatars and separators in the examples. It also links an issue and marks the change as breaking.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 8 files. (1 skipped: 1 unsupported.)

Finishing Touches

Generate docstrings

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

CodeRabbit Verify

Run CodeRabbit Verify to test the changes in this pull request.

Recent review info

Run configuration

Source mode: Auto

Repository: Unavailable

Branch: Unavailable

File: No configuration file from this repository applied

Commit: Unavailable

Layers: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Advanced

Run ID: `4fae4638-e672-44e6-97ce-3a8c7071bac8`

Commits

Reviewing files that changed from the base of the PR and between `9fd6c15` and `ad4b96f`.

Files ignored due to path filters: 4

`test/components/snapshots/InputMenu-vue.spec.ts.snap` is excluded by `!**/*.snap`

`test/components/snapshots/InputMenu.spec.ts.snap` is excluded by `!**/*.snap`

`test/components/snapshots/InputTags-vue.spec.ts.snap` is excluded by `!**/*.snap`

`test/components/snapshots/InputTags.spec.ts.snap` is excluded by `!**/*.snap`

Files selected for processing: 3

`docs/content/docs/1.getting-started/3.migration.md`

`src/runtime/theme/input-menu.ts`

`src/runtime/theme/input-tags.ts`

Files skipped from review as they are similar to previous changes: 2

src/runtime/theme/input-menu.ts

docs/content/docs/1.getting-started/3.migration.md

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 5 remain after this review.

github-actions · 2026-11-03T10:39:02Z

Client output of the apps in test/bundle that changed, compared to the base branch.

Fixture	JS (gzip)	CSS (gzip)
`nuxt`	115.7 kB	29.7 kB (+0.2 kB, +0.6%)
`nuxt-full`	895.6 kB (+0.4 kB, +0.0%)	29.8 kB (+0.2 kB, +0.6%)
`vue`	93.8 kB	27.9 kB (+0.2 kB, +0.7%)

Raw sizes

Fixture	JS	CSS
`nuxt`	318.0 kB	189.1 kB (+1.7 kB, +0.9%)
`nuxt-full`	2772.8 kB (+3.8 kB, +0.1%)	189.4 kB (+1.7 kB, +0.9%)
`vue`	264.9 kB	191.2 kB (+1.7 kB, +0.9%)

coderabbitai

Fix comments: Fix CodeRabbit comments on this PR

codspeed · 2026-11-03T10:44:07Z

Merging this PR will not alter performance

✅ 36 untouched benchmarks
⏩ 10 skipped benchmarks¹

_{Comparing feat/menu-label-size (ad4b96f) with v5 (69d38da)}

10 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

pkg-pr-new · 2026-11-03T10:47:35Z

npm i https://pkg.pr.new/@nuxt/ui@7344

commit: 9fd6c15

# Conflicts: # test/components/__snapshots__/CommandPalette-vue.spec.ts.snap # test/components/__snapshots__/CommandPalette.spec.ts.snap

feat(components): size menu labels one step below their items

5026b8c

github-actions Bot added the v5 #6918 label Nov 3, 2026

vercel Bot deployed to Preview – ui-repl November 3, 2026 10:37

View deployment

coderabbitai Bot requested changes Nov 3, 2026

View reviewed changes

Comment thread docs/content/docs/1.getting-started/3.migration.md Resolved

vercel Bot deployed to Preview – ui November 3, 2026 10:41

View deployment

benjamincanac added 2 commits November 3, 2026 11:56

docs(components): use menu labels as group headings

9482536

docs(templates): use the user menu label as a group heading

a17722d

vercel Bot deployed to Preview – ui November 3, 2026 11:06

View deployment

feat(EditorSuggestionMenu): size labels one step below their items

04a6bfc

vercel Bot deployed to Preview – ui-repl November 3, 2026 11:07

View deployment

benjamincanac mentioned this pull request Nov 3, 2026

v5 #6918

Open

44 of 62 tasks

docs(migration): show the menu label classes before and after

d2b66f4

coderabbitai Bot approved these changes Nov 3, 2026

View reviewed changes

vercel Bot deployed to Preview – ui November 3, 2026 11:17

View deployment

feat(components): size menu labels from their item text

7189851

benjamincanac changed the title ~~feat(components): size menu labels one step below their items~~ feat(components): size menu labels from their item text Nov 3, 2026

vercel Bot deployed to Preview – ui-repl November 3, 2026 13:46

View deployment

coderabbitai Bot approved these changes Nov 3, 2026

View reviewed changes

vercel Bot deployed to Preview – ui November 3, 2026 13:54

View deployment

Merge remote-tracking branch 'origin/v5' into feat/menu-label-size

9fd6c15

# Conflicts: # test/components/__snapshots__/CommandPalette-vue.spec.ts.snap # test/components/__snapshots__/CommandPalette.spec.ts.snap

vercel Bot deployed to Preview – ui-repl November 3, 2026 14:40

View deployment

coderabbitai Bot approved these changes Nov 3, 2026

View reviewed changes

vercel Bot deployed to Preview – ui November 3, 2026 14:45

View deployment

feat(components): size tags from the field text

ad4b96f

benjamincanac changed the title ~~feat(components): size menu labels from their item text~~ feat(components): size menu labels and tags from the control text Nov 3, 2026

vercel Bot deployed to Preview – ui-repl November 3, 2026 14:52

View deployment

coderabbitai Bot approved these changes Nov 3, 2026

View reviewed changes

Navigation Menu

Repository navigation

feat(components): size menu labels and tags from the control text - #7344

feat(components): size menu labels and tags from the control text#7344
benjamincanac wants to merge 8 commits into
v5from
feat/menu-label-size

benjamincanac commented Nov 3, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Nov 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Nov 3, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment •

edited

Loading

Uh oh!

Uh oh!

codspeed Bot commented Nov 3, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Nov 3, 2026 •

edited

Loading

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

benjamincanac commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

vercel Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodeRabbit Verify

Uh oh!

github-actions Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

pkg-pr-new Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

benjamincanac commented Nov 3, 2026 •

edited

Loading

vercel Bot commented Nov 3, 2026 •

edited

Loading

coderabbitai Bot commented Nov 3, 2026 •

edited

Loading

github-actions Bot commented Nov 3, 2026 •

edited

Loading

coderabbitai Bot left a comment •

edited

Loading

codspeed Bot commented Nov 3, 2026 •

edited

Loading

pkg-pr-new Bot commented Nov 3, 2026 •

edited

Loading