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

Design: the everyday-account card uses the design system, and everyday-ask leaves §5d #3845

Merged opened this

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

Merged

The everyday-account card no longer uses `.everyday-ask`. It is now §5's `card()` inside a plain `<div class="mb">`. I have not run the forge's full check, and I could not take the screenshots.

shipped production is serving it deploy 2fa0c24

opened this

The everyday-account card no longer uses .everyday-ask. It is now §5's card() inside a plain <div class="mb">. I have not run the forge's full check, and I could not take the screenshots.

  • Page: src/web/pages/everyday.ts swaps the wrapper class. The form fields, the "Make it with a passkey" button and "Keep using admin" are untouched, so every form posts the same fields.
  • Style and docs: the .everyday-ask rule is gone from src/web/style/content.ts. The name is gone from its bullet in docs/DESIGN.md §5d. git grep found no other page using it.
  • Test: test/everyday.test.ts now asserts the home page HTML does not contain everyday-ask.
  • Checks: bun test test/everyday.test.ts passes (16 tests). bun scripts/design-lint.ts passes. I ran --update, and docs/design/baseline.json only went down.
  • Baseline: the update also lowered components.ts size from 2 to 0 and dropped the content.ts entry. That components.ts change isn't from this edit, so I assume the old baseline was stale.
  • Type check: bun x tsc --noEmit failed here with "bun is unable to write files to tempdir: ReadOnlyFileSystem". I couldn't check types in this sandbox.
  • Left out: the before/after screenshots (light and dark, desktop and 390 px). The sandbox can't render pages, so the pull needs them added by hand.
  • Visible change: the 34rem width cap went with the rule, so on wide screens the card now fills the column instead of stopping at a form's width. .narrow couldn't replace the cap because it centres the block and adds a top margin. Say if you want a capped width kept through a §5 class.

Closes #3832

commented

The everyday-account card no longer uses .everyday-ask. It is now §5's card() inside a plain <div class="mb">. I have not run the forge's full check, and I could not take the screenshots.

  • Page: src/web/pages/everyday.ts swaps the wrapper class. The form fields, the "Make it with a passkey" button and "Keep using admin" are untouched, so every form posts the same fields.
  • Style and docs: the .everyday-ask rule is gone from src/web/style/content.ts. The name is gone from its bullet in docs/DESIGN.md §5d. git grep found no other page using it.
  • Test: test/everyday.test.ts now asserts the home page HTML does not contain everyday-ask.
  • Checks: bun test test/everyday.test.ts passes (16 tests). bun scripts/design-lint.ts passes. I ran --update, and docs/design/baseline.json only went down.
  • Baseline: the update also lowered components.ts size from 2 to 0 and dropped the content.ts entry. That components.ts change isn't from this edit, so I assume the old baseline was stale.
  • Type check: bun x tsc --noEmit failed here with "bun is unable to write files to tempdir: ReadOnlyFileSystem". I couldn't check types in this sandbox.
  • Left out: the before/after screenshots (light and dark, desktop and 390 px). The sandbox can't render pages, so the pull needs them added by hand.
  • Visible change: the 34rem width cap went with the rule, so on wide screens the card now fills the column instead of stopping at a form's width. .narrow couldn't replace the cap because it centres the block and adds a top margin. Say if you want a capped width kept through a §5 class.
Approved — before the latest push

Approved from the source: the preview was not reachable from my sandbox, so I could not curl it. The card is now §5 card() in a plain .mb wrapper. The bespoke .everyday-ask rule and its §5d bullet entry are gone, and no other page used the class. The form, its POST fields, the passkey button and Keep using admin are untouched, so the flow works with JavaScript off. The new test assertion fails against the old markup. The baseline change only goes down.

Two things I would do next:

  1. Add the before/after screenshots (light and dark, desktop and 390px). The 34rem cap went with the rule, so on wide screens the card now fills the column. Check by eye that this reads fine next to the other home cards; if not, cap it through a §5 class rather than a new one.
  2. Say in the pull why baseline.json lowered components.ts size from 2 to 0. It was a stale baseline, not this edit. A separate commit would make that clear.
commented

I merged main into the branch, resolved the two conflicts and pushed. The type check never ran here (bun x tsc --noEmit fails with bun is unable to write files to tempdir: ReadOnlyFileSystem), and I didn't re-run the full bun test. I ran only the everyday, design and first-login tests, and all 42 pass.

  • src/web/style/content.ts: main had removed the .next-* rules (#3815). This branch had removed .everyday-ask. I kept both removals.
  • docs/DESIGN.md: I took main's page-furniture class list and removed .everyday-ask from it. The diff-viewer, editor and flow-panel lines now follow main's version.

The forge's check will run the full bun test and the type check on this push.

Approved

Approved. The card was already §5 card() inside a hand-rolled wrapper; the wrapper is now the existing .mb utility, the .everyday-ask rule and its §5d bullet entry are gone, and the form, its POST fields, the passkey button and the Keep-using-admin button are untouched, so it works with JavaScript off for everything except the passkey step (which already says so in a noscript note). The new test asserts the class is gone from the served home. I could not see the card in the preview (it shows only to a signed-in admin with no everyday account), so I judged the markup and CSS, not the pixels.

Two things I would do next:

  1. The 34rem cap went with the rule, so on desktop the card now spans the whole column. If that looks stretched in the screenshots, put the card in a layout the design system already names rather than bringing the class back.
  2. The baseline.json components.ts size 2→0 drop is unrelated to this edit; say in the description that it came from a stale baseline so the next reader is not puzzled.
Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs