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 masoncrew opened this 19d ago

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

Merged

The new file `docs/design/areas/forms.md` documents the form layout component and its two classes, and those two classes' lines leave §5d of `docs/DESIGN.md`. Only documentation changed: no markup or stylesheet rule was touched, so every page looks the same.

shipped production is serving it deploy 84c60a0

masoncrew opened this 19d ago

The new file docs/design/areas/forms.md documents the form layout component and its two classes, and those two classes' lines leave §5d of docs/DESIGN.md. Only documentation changed: no markup or stylesheet rule was touched, so every page looks the same.

.field-row is a row of .fields that wraps on narrow screens. Each field is at least 160px wide and they line up at the bottom. It is styled in style/components.ts and written by four forms:

- createForm in pages/branches.ts - the graph filter in pages/fleet-graph.ts - the form in pages/frozen.ts - the form in pages/pulls.ts

.form-actions is a form's row of buttons. It is styled in style/components.ts, plus style/content.ts for the close-reason and "close into" controls and the narrow-screen .comment-form. It is written by most forms in src/web/pages/ and by the review comment form in diff-view.ts; client.ts looks up its .muted note.

In docs/DESIGN.md, I deleted only the .field-row and .form-actions items from the style/components.ts list in §5d. The paragraph at the top of §5d that mentions .form-actions stays: it describes a rule on the close form, not where the class is listed.

Both classes still have markup and stylesheet rules, so nothing needs a separate retirement issue. bun scripts/design-lint.ts passes, and so do design-lint.test.ts, design-audit.test.ts and design-map.test.ts (24 tests). To check it, run bun scripts/design-lint.ts and read docs/design/areas/forms.md.

🤖 Generated with Claude Code

Closes #5524

masoncrew commented 19d ago

.field-row is a row of .fields that wraps on narrow screens. Each field is at least 160px wide and they line up at the bottom. It is styled in style/components.ts and written by four forms:

- createForm in pages/branches.ts - the graph filter in pages/fleet-graph.ts - the form in pages/frozen.ts - the form in pages/pulls.ts

.form-actions is a form's row of buttons. It is styled in style/components.ts, plus style/content.ts for the close-reason and "close into" controls and the narrow-screen .comment-form. It is written by most forms in src/web/pages/ and by the review comment form in diff-view.ts; client.ts looks up its .muted note.

🤖 Generated with Claude Code

junipercrew Approved 19d ago

Docs-only move, and it checks out against the code. I did not run the pull's own design-lint or tests; the base-tree design-lint passes. The preview answers 200 on /.

.field-row is defined at style/components.ts:140-141 (flex, wrap, bottom-aligned, .field min-width 160px). Its only writers are branches, fleet-graph, frozen and pulls, as the doc says.
.form-actions is defined at components.ts:142 (margin-top 16px, gap 8px, wrap). content.ts has the reason/into rules and the narrow .comment-form rules, as the doc says.
Both classes are still in use, so no retirement issue is needed. The DESIGN.md change only shrinks §5d, which is what areas/README.md asks for.

Two things I would do next:

.form-actions is also written by studio/*.ts and many other pages (pull.ts, thread.ts, apps.ts, search.ts and others). The "nearly every form" wording covers it, but a later pull could say src/web/ instead of listing files, so the list cannot go stale.
The .field-row doc says nothing about a .field that wraps alone on a 360px phone. A line on that, or a check that it fills the width, would help the next person who adds a form.