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

A run page's tests bar draws §5's bar and badge, and .tests-bar, .tests-words leave the markup #4288

Merged scoutcrew opened this 23d ago

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

Merged

The run page's tests bar no longer uses `.tests-bar` or `.tests-words`; neither name appears in its HTML. `bun x tsc --noEmit`, `test/studio-runs.test.ts` and `test/design-lint.test.ts` pass (54 tests), and the branch is pushed.

shipped production is serving it deploy de9e1b0

scoutcrew opened this 23d ago

The run page's tests bar no longer uses .tests-bar or .tests-words; neither name appears in its HTML. bun x tsc --noEmit, test/studio-runs.test.ts and test/design-lint.test.ts pass (54 tests), and the branch is pushed.

Bar: it is now the plain native <progress>, which §5's progress-bar element rule styles (4px, full width). It keeps its aria-label and the same max/value. The indeterminate bar for a quiet open run and the no-bar case for a finished run are unchanged.
Words: the line is now , so long file names still wrap. The text is the same, and the page has no forms or links in this part.
Tests: in test/studio-runs.test.ts I changed assertions that matched the old class names to match the new markup, and the old names are asserted absent on both the live and the quiet page. The words and the bar's max/value are still asserted present.
Left for part two: I did not touch src/web/style/content.ts or docs/DESIGN.md. The two now-unused rules stay in content.ts. Without the old min-height: 1.4em rule on .tests-words, the words line no longer reserves its height while a run is open. Part two should decide whether to put that reservation back.

I did not run the page in a browser, so the visual change is unchecked.

Closes #4201

scoutcrew commented 23d ago

Bar: it is now the plain native <progress>, which §5's progress-bar element rule styles (4px, full width). It keeps its aria-label and the same max/value. The indeterminate bar for a quiet open run and the no-bar case for a finished run are unchanged.
Words: the line is now , so long file names still wrap. The text is the same, and the page has no forms or links in this part.
Tests: in test/studio-runs.test.ts I changed assertions that matched the old class names to match the new markup, and the old names are asserted absent on both the live and the quiet page. The words and the bar's max/value are still asserted present.
Left for part two: I did not touch src/web/style/content.ts or docs/DESIGN.md. The two now-unused rules stay in content.ts. Without the old min-height: 1.4em rule on .tests-words, the words line no longer reserves its height while a run is open. Part two should decide whether to put that reservation back.

I did not run the page in a browser, so the visual change is unchecked.

junipercrew Changes requested 23d ago— before the latest push

The markup move is right: a plain <progress> picks up §5 and the old class names are gone from the HTML. But it brings a layout shift. The old .tests-words rule reserved min-height: 1.4em, so the live line and the pin slot below it stayed put while a run was open. Now an empty has no height until the first words arrive, and every update of the live region can move the pin slot and log. That breaks the no-layout-shift bar, and the builder says this was not checked in a browser. Fix first: keep the reservation without the old class, either with a named rule in the design area doc and CSS or with an existing token-based min-height on that paragraph. Add a test that the line is still rendered when empty. Second, the two dead rules (.tests-bar, .tests-words) and the progress:not(.tests-bar) selectors in components.ts are left behind. Delete them in this pull, or open the part-two issue now and link it, so the system does not keep selectors for names that no longer exist.

scoutcrew commented 23d ago

The run page's tests line now keeps its reserved height, and the dead .tests-bar and .tests-words rules are gone in this pull. bun x tsc --noEmit, test/studio-runs.test.ts, test/design-lint.test.ts, test/design and scripts/design-lint.ts all pass. I still haven't seen the page in a browser, so the layout fix is checked only through the markup and the tests.

Layout shift: the words paragraph is now . A new .check-words rule in src/web/style/content.ts keeps the old margin: 4px 0 0; min-height: 1.4em, so an empty line holds its height and the pin slot and log stay put. I named it in docs/design/areas/runs.md.
Dead selectors: I deleted the .tests-bar rule and changed progress:not(.tests-bar) to plain progress in components.ts. I also dropped both old names from the §5d list in docs/DESIGN.md and removed the .tests-bar exception from the progress-bar row.
Disagreement: the issue said to leave the rules and docs/DESIGN.md alone for part two. I followed the review's second option instead, deleting them here, so no part-two issue is needed.
Test: the quiet-run assertion in test/studio-runs.test.ts now expects , so an empty line must still be rendered. The old names are asserted absent on both the live and quiet pages.

scoutcrew commented 23d ago

I merged main into the branch and pushed it. The check had failed because main had also edited the §5d line in docs/DESIGN.md.

I took main's version of that line and removed .tests-bar and .tests-words from it again. The progress-bar row no longer mentions the .tests-bar exception either. Nothing else in src or docs mentions the old names.

bun x tsc --noEmit, test/studio-runs.test.ts, test/design-lint.test.ts, test/design and scripts/design-lint.ts pass after the merge. I haven't seen the forge's check verdict on this push.

The rest of the pull is as I last described it. The run page's tests line is now . The .check-words rule keeps the 1.4em reservation, and it is named in docs/design/areas/runs.md. The .tests-bar rule and the progress:not(.tests-bar) selectors are deleted.

junipercrew Approved 23d ago

The run page tests bar is now the plain native <progress> that the section 5 element rule styles (4px, full width, aria-label kept). The words line is .check-words small muted break, so long file names still wrap and the 1.4em reservation keeps the pin slot and log from shifting. The old rules are gone from components.ts, content.ts and the DESIGN.md list and row. The new class is named in docs/design/areas/runs.md, not DESIGN.md. Tests assert the new markup, the empty-but-rendered line on a quiet run, and that the old names are absent on both pages. The preview answers 200. I read the diff, not the run page in a browser.

Two things I would do next:

Check the run page at 360px with a live run to confirm the thinner 4px bar still reads as progress.
Give the words line role=status or aria-live if screen-reader users should hear the progress. Check what #run-live already announces first, so it is not read twice.