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

/explore's rows and filters draw §5's .row and .filters #4629

Merged opened this

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

Merged

`/explore` now draws each result with §5's `row()` and the filter bar with `.filters`, and no `explore-*` class is left in its markup. `bun test` passes on `explore`, `name-marks` and `design-lint`, and `bun scripts/design-lint.ts` is clean. I didn't run the whole suite. `bun x tsc --noEmit` couldn't run here ("Cannot find type definition file for 'bun'"), so the type check is unverified. I haven'…

shipped production is serving it deploy 1f09d72

opened this

/explore now draws each result with §5's row() and the filter bar with .filters, and no explore-* class is left in its markup. bun test passes on explore, name-marks and design-lint, and bun scripts/design-lint.ts is clean. I didn't run the whole suite. bun x tsc --noEmit couldn't run here ("Cannot find type definition file for 'bun'"), so the type check is unverified. I haven't looked at the page by eye, so the "looks the same" box isn't ticked.

What changed

  • Rows: the name link and owner mark sit in the row title. The description and the numbers form one ·-joined meta line. "Make it yours" is the trail. The code is in src/web/studio/explore.ts.
  • Styles: I removed the .explore-* rules from src/web/style/content.ts and struck them from the §5d list in docs/DESIGN.md. The search box now uses the existing .bar .search rule.
  • Tests: a new test in test/explore.test.ts fetches /explore and asserts class="row", row-title, filters mb, and no explore-. I changed one regex in test/name-marks.test.ts that matched the old <li class="row explore-row">; that test was tied to the old markup.

What looks different

  • Description and numbers: they share one truncated line instead of two. This is the thing to check by eye.
  • Search box: it is capped at 320px instead of filling the width.
  • Phone layout: the sideways-scrolling chip row with the fade and the stacked "Make it yours" button are gone. Chips now use the shared .filters .seg overflow behaviour.

I left docs/design/baseline.json alone: it has no counts to lower.

Closes #4583

commented

/explore now draws each result with §5's row() and the filter bar with .filters, and no explore-* class is left in its markup. bun test passes on explore, name-marks and design-lint, and bun scripts/design-lint.ts is clean. I didn't run the whole suite. bun x tsc --noEmit couldn't run here ("Cannot find type definition file for 'bun'"), so the type check is unverified. I haven't looked at the page by eye, so the "looks the same" box isn't ticked.

What changed

  • Rows: the name link and owner mark sit in the row title. The description and the numbers form one ·-joined meta line. "Make it yours" is the trail. The code is in src/web/studio/explore.ts.
  • Styles: I removed the .explore-* rules from src/web/style/content.ts and struck them from the §5d list in docs/DESIGN.md. The search box now uses the existing .bar .search rule.
  • Tests: a new test in test/explore.test.ts fetches /explore and asserts class="row", row-title, filters mb, and no explore-. I changed one regex in test/name-marks.test.ts that matched the old <li class="row explore-row">; that test was tied to the old markup.

What looks different

  • Description and numbers: they share one truncated line instead of two. This is the thing to check by eye.
  • Search box: it is capped at 320px instead of filling the width.
  • Phone layout: the sideways-scrolling chip row with the fade and the stacked "Make it yours" button are gone. Chips now use the shared .filters .seg overflow behaviour.

I left docs/design/baseline.json alone: it has no counts to lower.

commented

/explore now draws each result with §5's row() and the filter bar with .filters, and no explore-* class is left in its markup. The type error that failed the check is fixed and pushed. I haven't seen the forge's re-run of the check on this push.

The fix: rowHtml in src/web/studio/explore.ts was passing meta and trail as undefined. The repo's exactOptionalPropertyTypes setting rejects that. It now leaves those keys out when there is nothing to show. tsc --noEmit is clean here, and the explore and name-marks tests pass.

What changed

  • Rows: the name link and owner mark sit in the row title. The description and numbers form one ·-joined meta line. "Make it yours" is the trail.
  • Styles: the .explore-* rules are gone from src/web/style/content.ts and struck from the §5d list in docs/DESIGN.md. The search box uses the existing .bar .search rule. bun scripts/design-lint.ts was clean before this fix, and docs/design/baseline.json has no counts to lower.
  • Tests: a new test in test/explore.test.ts fetches /explore and asserts the §5 classes and no explore-. I changed one regex in test/name-marks.test.ts because it matched the old <li class="row explore-row">.

What looks different (not checked by eye)

  • The description and numbers share one truncated line instead of two.
  • The search box is capped at 320px instead of filling the width.
  • The phone layout's sideways-scrolling chip row with the fade, and the stacked "Make it yours" button, are gone. Chips now use the shared .filters .seg overflow behaviour.
Approved

Approved. /explore now uses §5 row() and .filters, no explore- class remains in the markup or CSS, DESIGN.md is updated, and the new test plus the name-marks regex cover it. The preview serves the new search form and filter bar. It has no result rows, so I could not see a row rendered. I also could not open the forge screenshots from my sandbox, so the phone and desktop look is unchecked. Next I would: (1) check a row on a 360px phone with a long description. The description and numbers now share one truncated meta line, so the numbers can be cut off. Consider putting the numbers first or letting the meta wrap. (2) Check the chip row on a phone. It loses the fade at the edge that told people there was more, and now scrolls with the shared .filters .seg rule.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs