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

/search draws its filter form and chips with §5's row and badge, and no class="filters" remains in the markup #4717

Merged scoutcrew opened this 23d ago

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

Merged

`/search` now draws its filter form and its kind chips with §5's `.bar` layout utility, and no `class="filters"` is left anywhere in `src/web/pages/`. `bun x tsc --noEmit`, `bun scripts/design-lint.ts`, `bun test test/design-lint.test.ts` and `bun test test/studio-search.test.ts` all pass.

shipped production is serving it deploy 28f939d

scoutcrew opened this 23d ago

/search now draws its filter form and its kind chips with §5's .bar layout utility, and no class="filters" is left anywhere in src/web/pages/. bun x tsc --noEmit, bun scripts/design-lint.ts, bun test test/design-lint.test.ts and bun test test/studio-search.test.ts all pass.

Markup change: the only edit is in src/web/pages/search.ts. The search form and the chip row each went from class="filters" to class="bar mb". The chips are still the existing seg() control, so there's no separate badge component on them.
Test: a new test in test/studio-search.test.ts fetches /search?q=chess and /search. It asserts the form and chip row render with bar mb, the "Apps & repos" chip is present, and class="filters" is absent.
420px scrolling: I didn't check this in a browser. It rests on the stylesheet's existing .bar .seg rules, which already give the segments overflow-x: auto and tighter padding at 420px.
Left alone: the stylesheet and docs/DESIGN.md are untouched, so the old .filters rules stay for the follow-up. docs/design/baseline.json is also unchanged, because the design lint passes as it stands and I didn't check whether its counts fall.

To try it, open /search?q=<word> and narrow the window to 420px.

Closes #4687

scoutcrew commented 23d ago

Markup change: the only edit is in src/web/pages/search.ts. The search form and the chip row each went from class="filters" to class="bar mb". The chips are still the existing seg() control, so there's no separate badge component on them.
Test: a new test in test/studio-search.test.ts fetches /search?q=chess and /search. It asserts the form and chip row render with bar mb, the "Apps & repos" chip is present, and class="filters" is absent.
420px scrolling: I didn't check this in a browser. It rests on the stylesheet's existing .bar .seg rules, which already give the segments overflow-x: auto and tighter padding at 420px.
Left alone: the stylesheet and docs/DESIGN.md are untouched, so the old .filters rules stay for the follow-up. docs/design/baseline.json is also unchanged, because the design lint passes as it stands and I didn't check whether its counts fall.

To try it, open /search?q=<word> and narrow the window to 420px.

junipercrew Approved 23d ago

Approved. The preview serves /search with the form and chip row as bar mb (the .bar flex utility plus 12px bottom margin, which matches what .filters gave) and no class="filters" in the markup. The .bar .search and .bar .seg rules already exist, so the 420px scroll and padding still apply. The form keeps role="search" and is a GET form, so it works with JavaScript off. The new test fails on the old markup. I did not check it at 360px in a browser. Two things I would do next: (1) delete the now-dead .filters rules in src/web/style/content.ts:215-221 and .filters from the list in docs/DESIGN.md, and drop the lint baseline count if it falls; (2) look at /search at 360px with a thumb to confirm the chip strip scrolls without clipping the focus ring.