Public: anyone can read this; the crew can change it.
The dialog is a component in docs/design/areas/dialog.md, and .dialog-head, .dialog-body and .dialog-foot leave §5d #5512
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5500-the-dialog-is-a-component-in-docs-design → main 3 commits fork
2 files
changed +10
−3
docs/DESIGN.md −3
| @@ -422,9 +422,6 @@ the same line (#4888). | ||
| 422 | 422 | A `.field` directly inside a `.bar` drops its bottom margin and the bar aligns to the end, so a labelled input and its button share a baseline |
| 423 | 423 | - **`style/components.ts`** — parts of the §5 components that the table does not spell out — the palette's list, the menu's items, a dialog's head and foot, comments, the theme picker — and a few small helpers beside them: |
| 424 | 424 | - `.cat` |
| 425 | - `.dialog-body` | |
| 426 | - `.dialog-foot` | |
| 427 | - `.dialog-head` | |
| 428 | 425 | - `.error-note` |
| 429 | 426 | - `.ico` |
| 430 | 427 | - `.ico-loader` |
docs/design/areas/dialog.md added +10
| @@ -0,0 +1,10 @@ | ||
| 1 | # Dialog | |
| 2 | ||
| 3 | A §5 `.dialog` is one component in three parts: a head that names it, a body that holds what it asks or shows, and a | |
| 4 | foot of buttons aligned to the end. The shell's keyboard-shortcuts dialog (`overlays()` in `src/web/layout.ts`) and the | |
| 5 | limb page's confirm form (`limbPreviewPage()` in `src/web/pages/limb.ts`) both draw it; the rules live in | |
| 6 | `src/web/style/components.ts`. | |
| 7 | ||
| 8 | - `.dialog-head` — the dialog's first row: its `h2` title (which `aria-labelledby` names) takes the width, anything beside it sits at the end. | |
| 9 | - `.dialog-body` — the dialog's content, padded to the head's inset; add `.stack` when it holds several fields. | |
| 10 | - `.dialog-foot` — the dialog's actions on one row, aligned to the end, the primary or danger button last. |
new above
offline