feat(app): size menu rows for the input driving them
Rows are 40pt below md and 28pt above it. The split is on breakpoint rather than presentation because the compact popover, which compactMode defaults to, is worked with a thumb just as a sheet is. Move vertical spacing off the row onto a new MenuPage, which also provides a page's depth so the popover and the sheet cannot disagree about what a page is. A row carrying vertical margin would serve both the edge inset and the inter-row gap at once, and margins do not collapse.
This commit is contained in:
+26
-10
@@ -86,16 +86,32 @@ and a column of icons there is decoration competing with the values you actually
|
||||
|
||||
## Surface details
|
||||
|
||||
- The hover fill is **inset by the same amount on every side and rounded** — a chip inside the
|
||||
menu, not a band across it. The inset is taken _out of_ the row, never added to it: horizontally
|
||||
padding gives up what margin takes so labels don't move, and vertically the fill is shorter by
|
||||
the same amount so the row pitch is unchanged. Insetting by growing the row is how the menu ends
|
||||
up taller than it started.
|
||||
- The fill's height only holds because the label's `lineHeight` is pinned. Leave it to the platform
|
||||
and content outgrows `minHeight`, which then does nothing.
|
||||
- **The item's inset is the menu's only spacing.** Rows sit apart because each holds itself in, and
|
||||
a separator gets clearance from its neighbours for free. Don't give the separator a margin of its
|
||||
own — that is two numbers controlling one gap, and they will disagree.
|
||||
- The hover fill is **inset from the surface's edges and rounded** — a chip inside the menu, not a
|
||||
band across it. The inset is taken _out of_ the row, never added to it: padding gives up what
|
||||
margin takes, so labels sit at the same 13pt they always did. Insetting by growing the row is how
|
||||
the menu ends up taller than it started.
|
||||
- **A row is as tall as what is driving it** — 28pt for a pointer, 40pt below `md` for a thumb. The
|
||||
split is on breakpoint, not on `presentation`: the compact popover that `compactMode` defaults to
|
||||
is worked with a thumb just as a sheet is, and sizing off the sheet would leave it at the desktop
|
||||
height. `md` is where `useIsCompactFormFactor` divides, so row height and the popover/sheet choice
|
||||
turn over together.
|
||||
- The desktop height only holds because the label's `lineHeight` is pinned — 18 line + 8 padding +
|
||||
2 border is exactly 28. Leave it to the platform and content outgrows `minHeight`, which then does
|
||||
nothing. Compact is the other way round: `minHeight` leads and the label centres in it.
|
||||
- **A row owns its fill; `MenuPage` owns the spacing between rows.** The vertical inset above the
|
||||
first row and below the last, and the gap between rows, are the page's — one knob each,
|
||||
`MENU_ROW_GAP` being the one a redesign turns. A row that carried vertical margin would be
|
||||
serving both at once, and since margins don't collapse it would land as one unit at the edges and
|
||||
two between rows, so shrinking the gap would eat the inset with it. Horizontal inset does stay on
|
||||
the row: there is one left edge and one right edge, so nothing is doubling up.
|
||||
- `MenuPage` is also what provides a page's depth, so the popover and the sheet cannot disagree
|
||||
about what a page is. Every entry point goes through it — root, flyout, pushed sheet page.
|
||||
- The gap reaches a page's **direct children**. A group of rows wrapped in a `View` of its own drops
|
||||
out of it; at the current gap of zero there is nothing to lose, but anything above zero wants that
|
||||
wrapper to carry the page style too.
|
||||
- The separator is the one row-level thing that asks for vertical space of its own, and now that
|
||||
rows carry none, that is still one number controlling one gap. It takes no horizontal margin and
|
||||
the page has no horizontal padding, so the rule runs the full width of the surface.
|
||||
- Separators use `borderAccent`, the same colour the surface outlines itself with. `border` sits
|
||||
between `surface1` and `surface2`, which put it within a hair of the hover fill and made
|
||||
separators disappear against a hovered row.
|
||||
|
||||
Reference in New Issue
Block a user