Skip to main content

DropdownMenu group label style aligned with Select (WEB-1116)

Version: 0.6.0 ยท Type: ๐Ÿ› Bug Fix

WEB-1116

Problemโ€‹

DropdownMenuLabel's style didn't match Select's grouped header:

PropertyBeforeAfter (aligned with Select)
font-weightfont-semiboldfont-normal
colortext-(--Labels-Secondary)text-(--Labels-Tertiary)
paddingpy-(--Spacing_8) (8px top and bottom)pt-(--Spacing_8) (8px top only)

Root cause: ui/dropdown-menu.tsx's DropdownMenuLabel carries shadcn's default py-1.5. The design layer didn't use unstyledVisual, so tailwind-merge only overrode pt and left the py-1.5 bottom half in place, producing an extra 6px of bottom padding.

Changed Filesโ€‹

  • packages/design/src/components/DropdownMenu/styles.ts
  • packages/design/src/components/DropdownMenu/DropdownMenu.tsx
  • packages/design/src/components/ui/dropdown-menu.tsx

Changesโ€‹

  1. DROPDOWN_LABEL_TOKEN_CLASS: py-(--Spacing_8) โ†’ pt-(--Spacing_8), font-semibold โ†’ font-normal, text-(--Labels-Secondary) โ†’ text-(--Labels-Tertiary)
  2. ui/DropdownMenuLabel gains an unstyledVisual?: boolean prop that, when true, strips shadcn's default visual classes (px-2 py-1.5 text-sm font-semibold)
  3. The design layer's DropdownMenuLabel now passes unstyledVisual, matching how Select handles the same primitive