SelectControl: 32px trigger scale + option-group divider in the theme picker

2026-08-08 02:02:33 +00:00 · 2026-06-12 21:46:53 +03:00
parent ca70b3e491
commit d1ba921141
8 changed files with 136 additions and 30 deletions
@@ -44,7 +44,7 @@ The preview pane header carries a **Chart theme** picker — a value-select disc
 - **Stock Vega-Lite** — injects nothing; charts render exactly as plain Vega-Lite defaults would anywhere else (white background, default palette and fonts).
 - **Custom themes** — the user's saved themes (see _Theme Builder_ below), listed by name between the built-ins and the presets.
 - **Edit themes…** — closes the custom-themes block (before the long preset roster, so it's visible without scrolling); opens the Theme Builder instead of changing the selection.
- **Presets** — the `vega-themes` preset configs (Excel, ggplot2, FiveThirtyEight, LA Times, Power BI, the Carbon family, …), rendered verbatim and independent of the app's light/dark theme.
+- **Presets** — the `vega-themes` preset configs (Excel, ggplot2, FiveThirtyEight, LA Times, Power BI, the Carbon family, …), rendered verbatim and independent of the app's light/dark theme. A **divider** separates the preset roster from everything above it — the built-ins, the user's themes, and the manage entry read as "ours"; the presets as the imported catalogue.

 Behavior:

@@ -15,15 +15,17 @@ record the resolution into the contract (`docs/architecture/09`+`10` and the rel
  pane widths the long trigger labels ("FiveThirtyEight", "Urban Institute") may crowd it.
  Council questions: does the picker deserve header prominence (the "transform your chart"
  showcase) or settings-cluster placement (a persistent global pref); should the popover
-  registry learn nesting; 16 flat options — group presets under a heading?
+  registry learn nesting; should the preset block also carry a group _heading_ (a
+  divider now bounds it — 2026-06-12, user-decided; `SelectControl` `dividerBefore`)?

 - **"Edit themes…" action row inside the value picker** (`LivePreview.tsx` —
  ChartThemeControl). A non-value action lives inside a single-select disclosure (the
  VS Code theme-picker pattern), placed after the custom-themes block and before the
  preset roster (first-use feedback: at the very bottom it was invisible without
-  scrolling). Council questions: should an action be visually separated from the
-  values (divider, distinct styling); is a mid-list row that opens a modal instead of
-  selecting surprising to AT users?
+  scrolling). The ours-vs-presets divider (2026-06-12) now bounds it below; remaining
+  council questions: should the action row itself be styled distinctly from the value
+  rows; is a mid-list row that opens a modal instead of selecting surprising to AT
+  users?

 - **Theme Builder config editor is a plain textarea** (`ThemeBuilderModal.tsx`). Monaco
  (with the Vega-Lite config schema for completions) would match the main editor but is