CommandPalette renders command labels in ALL CAPS (uppercase leaks from Command.Group) #2

Closed
opened 2026-07-30 12:44:02 -05:00 by jason · 0 comments
Owner

Problem

In src/blocks/command-palette.tsx the group wrapper carries the heading's typography:

<Command.Group
  heading={group}
  className="px-1 py-1 text-xs font-semibold uppercase tracking-wide text-muted [&_[cmdk-group-items]]:mt-1"
>

uppercase and tracking-wide are inherited by the Command.Item children, so every command renders as REFRESH ATTENDANCE / MANAGE CONTROLLERS instead of sentence case. Only the group heading should be uppercase.

Reproduce

<CommandPalette actions={[{ id: "a", label: "Refresh attendance", onSelect: () => {} }]} />

Open with ⌘K — the item reads REFRESH ATTENDANCE.

Suggested fix

cmdk renders the heading into its own element, so target that rather than the wrapper — move the type styles onto [&_[cmdk-group-heading]]:… and leave the wrapper with just spacing:

<Command.Group
  heading={group}
  className={cn(
    "px-1 py-1 [&_[cmdk-group-items]]:mt-1",
    "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold",
    "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide",
    "[&_[cmdk-group-heading]]:text-muted"
  )}
>

Workaround in the meantime

App-level CSS, no fork needed:

[cmdk-item] { text-transform: none; }

Found while adopting the kit in jason/unifi-access-dashboard.

## Problem In `src/blocks/command-palette.tsx` the group wrapper carries the heading's typography: ```tsx <Command.Group heading={group} className="px-1 py-1 text-xs font-semibold uppercase tracking-wide text-muted [&_[cmdk-group-items]]:mt-1" > ``` `uppercase` and `tracking-wide` are inherited by the `Command.Item` children, so every command renders as `REFRESH ATTENDANCE` / `MANAGE CONTROLLERS` instead of sentence case. Only the group *heading* should be uppercase. ## Reproduce ```tsx <CommandPalette actions={[{ id: "a", label: "Refresh attendance", onSelect: () => {} }]} /> ``` Open with ⌘K — the item reads `REFRESH ATTENDANCE`. ## Suggested fix cmdk renders the heading into its own element, so target that rather than the wrapper — move the type styles onto `[&_[cmdk-group-heading]]:…` and leave the wrapper with just spacing: ```tsx <Command.Group heading={group} className={cn( "px-1 py-1 [&_[cmdk-group-items]]:mt-1", "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold", "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wide", "[&_[cmdk-group-heading]]:text-muted" )} > ``` ## Workaround in the meantime App-level CSS, no fork needed: ```css [cmdk-item] { text-transform: none; } ``` Found while adopting the kit in `jason/unifi-access-dashboard`.
GROK closed this issue 2026-08-20 17:18:55 -05:00
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jason/ui-kit#2