Public: anyone can read this; the crew can change it.
Design: `.qf` leaves the stylesheet and docs/DESIGN.md §5d #4739
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/3908-design-qf-leaves-the-stylesheet-and-docs → main 7 commits fork
5 files
changed +3
−9
docs/DESIGN.md −1
| @@ -498,7 +498,6 @@ the same line (#4888). | ||
| 498 | 498 | - `.owner` |
| 499 | 499 | - `.page-head` |
| 500 | 500 | - `.policy-line` |
| 501 | - `.qf` | |
| 502 | 501 | - `.repo-actions` |
| 503 | 502 | - `.repo-desc` |
| 504 | 503 | - `.repo-layout` |
src/web/style/content.ts −2
| @@ -203,8 +203,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 203 | 203 | .bp-h2 .chart-box.is-table { height: 400px; } |
| 204 | 204 | .bp-h3 .chart-box.is-table { height: 540px; } |
| 205 | 205 | .bform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 8px; } |
| 206 | .bform .qf { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; } | |
| 207 | .bform .qf > span { font-size: 12.5px; font-weight: 600; color: var(--fg); } | |
| 208 | 206 | .bform .field { margin: 0; flex: 1 1 140px; min-width: 0; } |
| 209 | 207 | .bform .btn { flex: none; } |
| 210 | 208 | .table-wrap { overflow-x: auto; max-width: 100%; } |
test/boards-page.test.ts +1 −2
| @@ -67,11 +67,10 @@ const listed = async (url: string) => { | ||
| 67 | 67 | }; |
| 68 | 68 | |
| 69 | 69 | describe("/boards forms", () => { |
| 70 | test("the chart and pin forms are §5 fields, not .qf", async () => { | |
| 70 | test("the chart and pin forms are §5 fields", async () => { | |
| 71 | 71 | const made = await makeBoard(app, admin, "Pins"); |
| 72 | 72 | expect(made.ok).toBe(true); |
| 73 | 73 | const body = await (await get("/boards/data?source=runs&by=day", "admin")).text(); |
| 74 | expect(body).not.toContain('class="qf'); | |
| 75 | 74 | for (const name of ["chart", "source", "aggregate", "column", "by", "series", "from", "to", "fcolumn", "fop", "fvalue"]) { |
| 76 | 75 | expect(body).toMatch(new RegExp(`<div class="field"[^>]*>\\s*<label for="f-${name}-\\d+">[^]*?name="${name}"`)); |
| 77 | 76 | } |
test/boards-selectors.test.ts +1 −1
| @@ -66,7 +66,7 @@ test("every query selector has a visible label and sits outside .row-actions", a | ||
| 66 | 66 | |
| 67 | 67 | test("the selector styles never hide or collapse a control", () => { |
| 68 | 68 | const css = components + content; |
| 69 | const rules = [...css.matchAll(/(^|\})\s*([^{}]*\.(?:bform|qf)[^{}]*)\{([^}]*)\}/g)].map((m) => m[3]!); | |
| 69 | const rules = [...css.matchAll(/(^|\})\s*([^{}]*\.bform[^{}]*)\{([^}]*)\}/g)].map((m) => m[3]!); | |
| 70 | 70 | expect(rules.length).toBeGreaterThan(0); |
| 71 | 71 | for (const body of rules) { |
| 72 | 72 | expect(body).not.toMatch(/opacity:\s*0\b|display:\s*none|visibility:\s*hidden|height:\s*0\b/); |
test/boards-view-fields.test.ts +1 −3
| @@ -1,7 +1,6 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * A board's view and its forms draw their fields as `.field` with a real |
| 3 | * `<label for>`, not the `.qf` wrapper. (The query fields in boards.ts keep | |
| 4 | * `.qf` until their own issue, so those are left out of the check.) | |
| 3 | * `<label for>`. | |
| 5 | 4 | */ |
| 6 | 5 | import { afterAll, beforeAll, expect, test } from "bun:test"; |
| 7 | 6 | import { mkdtemp, rm } from "node:fs/promises"; |
| @@ -46,7 +45,6 @@ const LABELS = ["New board", "Panel title", "Width", "Height", "Board title", "R | ||
| 46 | 45 | |
| 47 | 46 | function check(html: string, labels: string[]) { |
| 48 | 47 | for (const text of labels) { |
| 49 | expect(html, text).not.toContain(`<label class="qf"><span>${text}</span>`); | |
| 50 | 48 | const m = html.match(new RegExp(`<div class="field"[^>]*>\\s*<label for="([^"]+)">${text}</label>`)); |
| 51 | 49 | expect(m, text).not.toBeNull(); |
| 52 | 50 | expect(html.match(new RegExp(`id="${m![1]}"`, "g"))?.length, `${text} id is unique`).toBe(1); |
new above
offline