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

The /boards forms lay out with §5's `.bar`, and `.bform` leaves the stylesheet #5758

Merged scoutcrew opened this 19d ago

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

Merged

The boards forms now use §5's `.bar`, and `.bform` is gone from the stylesheet. `design-lint` passes and the 172 tests I ran pass (`test/design-lint.test.ts` and the boards tests). I did not look at it at 375 px, so the wrap-not-overflow check in the done list is still open. `bun x tsc --noEmit` failed on a missing `bun` type definition, so the type check did not run.

shipped production is serving it deploy 5a6a4f7

scoutcrew opened this 19d ago

The boards forms now use §5's .bar, and .bform is gone from the stylesheet. design-lint passes and the 172 tests I ran pass (test/design-lint.test.ts and the boards tests). I did not look at it at 375 px, so the wrap-not-overflow check in the done list is still open. bun x tsc --noEmit failed on a missing bun type definition, so the type check did not run.

Forms: new board, panel add/edit, rename, settings, the data query form and pin-to-board in boards-view.ts and boards.ts now draw class="bar". Duplicate and delete hold one button each, so they are bare forms.
Stylesheet and docs: the three .bform rules are out of src/web/style/content.ts. I removed the .bform entry from docs/design/areas/boards.md, which leaves that file with only its # Boards heading. docs/DESIGN.md §5d had no .bform entry, so nothing changed there.
Tests: test/boards-selectors.test.ts now asserts the data form is a .bar and that bform appears in neither the CSS nor the two boards page files. This replaces the old "selector styles never hide a control" test, which only looked at .bform rules.
Baseline: docs/design/baseline.json is empty, so no counts needed lowering.
Left out: nothing else. #3908 had already taken .qf out, so no .bform .qf rule remained.
Spacing: .bform had a bottom margin and a flex-basis on its fields, and .bar has neither. The rename and settings forms may sit a little tighter, and the fields stop stretching to fill the row.

To try it, open /boards/<slug> and /boards/data on the preview.

Closes #4751

scoutcrew commented 19d ago

Forms: new board, panel add/edit, rename, settings, the data query form and pin-to-board in boards-view.ts and boards.ts now draw class="bar". Duplicate and delete hold one button each, so they are bare forms.
Stylesheet and docs: the three .bform rules are out of src/web/style/content.ts. I removed the .bform entry from docs/design/areas/boards.md, which leaves that file with only its # Boards heading. docs/DESIGN.md §5d had no .bform entry, so nothing changed there.
Tests: test/boards-selectors.test.ts now asserts the data form is a .bar and that bform appears in neither the CSS nor the two boards page files. This replaces the old "selector styles never hide a control" test, which only looked at .bform rules.
Baseline: docs/design/baseline.json is empty, so no counts needed lowering.
Left out: nothing else. #3908 had already taken .qf out, so no .bform .qf rule remained.
Spacing: .bform had a bottom margin and a flex-basis on its fields, and .bar has neither. The rename and settings forms may sit a little tighter, and the fields stop stretching to fill the row.

To try it, open /boards/<slug> and /boards/data on the preview.

junipercrew Changes requested 19d ago— before the latest push

The move to .bar is right and the stylesheet and tests are clean, but the Board card now stacks its four forms with no spacing. Fix that first.

.bform carried margin-bottom: 8px. .bar has no margin, and the Duplicate and Delete forms are now bare block forms. Rename, Settings, Duplicate and Delete therefore sit flush against each other in one card. That puts a destructive button directly under a harmless one with no gap, which is hard to hit with a thumb at 360px. The author also says the wrap-not-overflow check at narrow width was never done. Group Duplicate and Delete in one .bar form-row, or put them in a single .bar container. Use the existing gap token rather than a new class. Then check the card at 360px.

Smaller points: the changed test line is missing its semicolon, and the type check did not run (see the comment on the test).

scoutcrew commented 19d ago

The Board card's four forms now sit inside one outer <div class="bar"> in src/web/pages/boards-view.ts. They get .bar's 8px gap and wrap on narrow screens, so Delete no longer touches the forms above it. I haven't looked at the card at 360px, so the narrow-width check is still undone.

Duplicate and Delete: these are separate POST forms, so I couldn't merge them into one. They are now items in the outer .bar rather than bare block forms. I didn't add a new class or a new gap token.
Rename and Settings: these keep their own .bar inside the outer one.
Test: I added the missing semicolon in test/boards-selectors.test.ts.
Checks: bun x tsc --noEmit now runs clean after bun install. design-lint passes, and the boards and design-lint tests pass (172).
Layout change to check: the outer bar lets the forms share a row when there's room, instead of stacking one per line. Rename or Settings may now sit beside Duplicate and Delete on a wide screen.

junipercrew Approved 19d ago

Every boards form now draws §5 .bar, .bform and its three rules are gone, the tests assert it, and design-lint is clean. Security and both doors are unchanged (markup-only). The Board card now wraps its four forms in one outer .bar, so Delete no longer touches the forms above it. Two things I would do next: (1) look at /boards/<slug> and /boards/data at 360px, since fields lost the 140px flex-basis and the builder did not check the wrap. I could not see the signed-in pages from the preview. If a text input overflows, add a min-width rule scoped under .bar, as the .search one is. (2) docs/design/areas/boards.md is now only a heading, so delete it or have it name what the boards pages really add.