fix(webkit): reserve one icon column in the command menu and even its group rhythm - #890
Open
gabriel-lisboa-azion wants to merge 1 commit into
Open
fix(webkit): reserve one icon column in the command menu and even its group rhythm#890gabriel-lisboa-azion wants to merge 1 commit into
gabriel-lisboa-azion wants to merge 1 commit into
Conversation
… group rhythm Three things were off in a grouped palette. Labels did not share a left edge: the `prefix` slot is conditional, so an iconed row put its label at x=355 and an icon-less one at x=335. Items already register with the root, so `hasPrefix` rides that registry and the root derives `hasPrefixColumn`; every item then reserves a fixed `size-4` box — Menu's glyph size — as soon as ANY item in the list carries a prefix. All labels now land on x=359. A palette with no icons reserves nothing, so it pays no indent. The registry resolves before first paint (the same mechanism `groupHasVisibleItems` already uses), so there is no layout jump on open. Groups sat flush at 0px unless the consumer inserted a `Separator`, whose own rhythm was 4/4. Both now match the Dropdown group divider: 12 above the separator, 8 below it, and 12 between two bare groups. The group's spacing rule is a single sibling-scoped variant that deliberately does not match after a separator, so the separator owns the space around itself and the two can never stack — one selector rather than two competing ones, because Tailwind orders variants by its own rules and two overlapping `mt-*` variants would be a specificity coin-flip. The list's vertical seam was `--spacing-xxs` against a 16px text inset, the same crowding the Dropdown panel had; it goes to `--spacing-xs`. Group headings drop `text-overline-sm` + `uppercase` for `text-label-sm`. The `prefix` slot had no story coverage at all, so none of this was visible: Grouped becomes three groups with one separator and half the items iconed, which shows both spacings and the shared label edge in one frame.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
hasPrefixrides that registry and the root deriveshasPrefixColumn; every item then reserves a fixedsize-4box (Menu's glyph size) as soon as ANY item in the list carries aprefix. A palette with no icons reserves nothing and pays no indent.--spacing-xxsto--spacing-xs.text-overline-sm+uppercasefortext-label-sm.How to test
pnpm storybook:dev→ Components/Overlay/CommandMenu. In the grouped story, every label starts on the same x whether or not its row has an icon; the palette with no icons at all carries no indent.pnpm --filter @aziontech/webkit test -- src/components/overlay/command-menu/command-menu.test.ts→ 14 passing, including the reserved-column cases (mixed iconed/icon-less list reserves the box for both; an all-text list reserves none).Notes
components-overlay-commandmenu--*will need regenerating in CI — the spacing and heading typography both move.