Public: anyone can read this; the crew can change it.
Settings rows are named in docs/design/areas/settings.md, and .setting-list and .row-fields leave §5d #5535
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5523-settings-rows-are-named-in-docs-design-a → main 1 commit fork 1 thread · 1 unresolved
2 files
changed +18
−3
docs/DESIGN.md −3
| @@ -465,9 +465,6 @@ the same line (#4888). | ||
| 465 | 465 | - `.topbar-search` |
| 466 | 466 | |
| 467 | 467 | `.split` is the one two-column page: main, then an `<aside>` rail of 260px that sticks from 960px. `data-rail="wide"` on it (the studio's home and an app's page) widens the rail to 320px from 900px, drops the top margin, and lets the rail scroll with the page, since a column of cards runs taller than a screen |
| 468 | - **`style/components.ts`, settings rows** — a list whose rows are settings (limits, capacity): the `<ul class="list setting-list">` lets title and meta wrap instead of ellipsizing, and a row's controls take their own line under 640px. `.row-fields` is the form in that row's trail (input, Save, Default): always visible, never hover-gated, wrapping under the text before it would clip. Use both for any page whose rows show a name, a current value, and a control to change it; use `.row-actions` only for secondary actions (delete, wake, pin, revoke). Flags, telemetry, cloud, people, crew roles and subscription headroom/budget use `.row-fields`. Classes: | |
| 469 | - `.row-fields` | |
| 470 | - `.setting-list` | |
| 471 | 468 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, lineage: |
| 472 | 469 | - `.bform` |
| 473 | 470 | - `.bgrid` |
docs/design/areas/settings.md +18
| @@ -1,3 +1,21 @@ | ||
| 1 | 1 | # Settings page |
| 2 | 2 | |
| 3 | ## Settings rows | |
| 4 | ||
| 5 | A list whose rows are settings — each row a name, its current value, and a control to change it (limits, capacity, | |
| 6 | flags, telemetry, cloud, people, crew roles, subscription headroom and budget) — is §5's list row in a list that lets | |
| 7 | the text wrap and gives the control a place that is always visible. Use `.row-actions` only for secondary actions | |
| 8 | (delete, wake, pin, revoke). | |
| 9 | ||
| 10 | - `.setting-list` — the `<ul class="list setting-list">` around such rows: title and meta wrap instead of ellipsizing, | |
| 11 | and a row's trail takes its own line under 640px. Written by the settings pages, e.g. `appDomainsView()` and | |
| 12 | `appEgressView()` in `src/web/pages/settings.ts`, `limitsPage()` in `src/web/pages/admin-limits.ts`, `capacityPage()` in | |
| 13 | `src/web/pages/capacity.ts`, `flagsPage()` in `src/web/pages/flags.ts`, and by lists of the same shape in | |
| 14 | `src/web/pages/repo.ts`, `src/web/pages/pull.ts`, `src/web/pages/map.ts` and `src/web/studio/make_it_yours.ts`. | |
| 15 | Styled in `src/web/style/components.ts`. | |
| 16 | - `.row-fields` — the form in a settings row's trail (input, Save, Default): always visible, never hover-gated, | |
| 17 | wrapping under the text before it would clip. Written in the trail of `row()` by `src/web/pages/flags.ts`, | |
| 18 | `src/web/pages/telemetry.ts`, `src/web/pages/cloud.ts`, `src/web/pages/people.ts`, `src/web/pages/admin-limits.ts`, | |
| 19 | `src/web/pages/capacity.ts`, `src/web/pages/subscriptions.ts` and `src/web/studio/crew.ts`. Styled in | |
| 20 | `src/web/style/components.ts`. | |
| 3 | 21 | - `.record-value` — a DNS record's value on an app's domain row (`.setting-list` row meta): monospace, wraps instead of ellipsizing, and `user-select: all` so one click selects the whole value to copy. |
new above
offline
Ok as written, but src/web/pages/origins.ts and access.ts also write .row-fields. Add them or say "among others" so the list does not rot.