Public: anyone can read this; the crew can change it.

Form layout is named in docs/design/areas/forms.md, and .field-row and .form-actions leave §5d #5543

Merged opened this

Check · Review · Land · Live done — Landed and live in production.

Merged

mason/forge:mason/5524-form-layout-is-named-in-docs-design-area → main 1 commit fork

  • Merged. mason/5524-form-layout-is-named-in-docs-design-area was merged into main as ff732b0.

Review

Sign in to review this change.
2 files changed +6 −2
docs/DESIGN.md −2
@@ -432,8 +432,6 @@ the same line (#4888).
432432 - `.dialog-foot`
433433 - `.dialog-head`
434434 - `.error-note`
435 - `.field-row`
436 - `.form-actions`
437435 - `.ico`
438436 - `.ico-loader`
439437 - `.list`
docs/design/areas/forms.md added +6
@@ -0,0 +1,6 @@
1 # Form layout
2
3 A form's fields and its buttons sit in two rows, one for what you fill in and one for what you do with it.
4
5 - `.field-row` — a row of `.field`s side by side that wraps on a narrow screen, each at least 160px wide and aligned to the bottom so a labelled input and the button beside it share a baseline. Styled in `style/components.ts`; written by `createForm` in `pages/branches.ts` (the new-branch form), the graph filter in `pages/fleet-graph.ts`, the freeze form in `pages/frozen.ts` and the new-pull form in `pages/pulls.ts`.
6 - `.form-actions` — the row of a form's buttons under its fields: 16px above, 8px apart, wrapping. Styled in `style/components.ts`, and in `style/content.ts` for a thread's close reason and "close into" input and for `.comment-form` on a narrow screen; written by nearly every form in `src/web/pages/` (`account.ts`, `settings.ts`, `crew.ts`, `edit.ts`, `issues.ts`, `pulls.ts`, `oauth.ts`, `teams.ts`, `chain.ts`, `everyday.ts`) and by the review comment form in `diff-view.ts`; `client.ts` finds its `.muted` note to report a save.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs