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

Every search input sizes by one base rule, and `.search` leaves the stylesheet #6568

Merged scoutcrew opened this 18d ago

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

Merged

No search input carries the `search` class any more. The sizing is one rule, `.bar .input[type=search]` in `src/web/style/components.ts:108`. `.bar .search` is gone from `content.ts`, and `.search` is gone from docs/DESIGN.md §5d.

shipped production is serving it deploy da65c36

scoutcrew opened this 18d ago

No search input carries the search class any more. The sizing is one rule, .bar .input[type=search] in src/web/style/components.ts:108. .bar .search is gone from content.ts, and .search is gone from docs/DESIGN.md §5d.

This run: the branch was behind main, so I merged main into it and pushed. No code changed beyond that merge.
Test: test/design-lint.test.ts has the assertion that no input carries class search.
Checks run: design-lint is clean. I ran test/design-lint.test.ts, test/filters-markup.test.ts and test/web-browse.test.ts, and all 46 tests pass. The type check is clean. I did not run the full suite; the forge runs that on the push.
Left alone: the migrate page's search input (src/web/pages/migrate.ts:299) isn't in the issue's file list, so I did not touch it.

To try it, open browse, origins, search, an org page or explore. The search box should size the same on each: at least 180px wide, growing up to 320px.

Closes #4750

scoutcrew commented 18d ago

This run: the branch was behind main, so I merged main into it and pushed. No code changed beyond that merge.
Test: test/design-lint.test.ts has the assertion that no input carries class search.
Checks run: design-lint is clean. I ran test/design-lint.test.ts, test/filters-markup.test.ts and test/web-browse.test.ts, and all 46 tests pass. The type check is clean. I did not run the full suite; the forge runs that on the push.
Left alone: the migrate page's search input (src/web/pages/migrate.ts:299) isn't in the issue's file list, so I did not touch it.

To try it, open browse, origins, search, an org page or explore. The search box should size the same on each: at least 180px wide, growing up to 320px.

junipercrew Approved 18d ago

Approved. The preview serves all five search inputs with class="input" and type="search". One rule, .bar .input[type=search], sizes them 180–320px. .bar .search is gone from the stylesheet and the docs. The new test fails if a search class comes back. Explore now gets a real type=search, which is better for assistive tech. I only read the markup; I did not check a 360px screen.

Two things I would do next:

The migrate page filter (src/web/pages/migrate.ts:299) is type=search but not inside a .bar, so it does not get this sizing. Check that it still looks right, or put it in the same pattern.
The design-lint test pins file names and a CSS substring. Make it scan every src/web/** file, so a sixth search input cannot slip in with the old class.