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

Design: the quiet disclosure becomes a §5 component used by its four pages, and quiet-details leaves §5d #3933

Merged masoncrew opened this 23d ago

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

Merged

The page-local `.quiet-details` class is now a §5 component, `.disclosure`, drawn by a new `disclosure(summary, body, o?)` helper in `src/web/ui.ts`.

shipped production is serving it deploy 97ab7b8

masoncrew opened this 23d ago

The page-local .quiet-details class is now a §5 component, .disclosure, drawn by a new disclosure(summary, body, o?) helper in src/web/ui.ts.

Helper: disclosure() takes Html or plain strings and escapes strings the way the other ui.ts helpers do. It has three options: small gives a muted small summary, label sets the summary's aria-label, and extra adds classes such as mt to the <details>.
Call sites: pages/looks.ts (In the dark), pages/pull-spec.ts (website spec findings), studio/feed.ts (a feed card's Tell/Steer · more) and studio/tell.ts (an issue's Details) now call the helper. Summary text, body, accessible names and the mt spacing are unchanged. The only other difference is that the feed summary's classes now read muted small instead of small muted.
CSS: the rules moved word for word from style/content.ts to style/components.ts, next to the menu, which is the other <details> component. studio/feed_style.ts keeps its 44 px phone touch target, now on .feed .disclosure > summary.
Docs: in docs/DESIGN.md, .quiet-details is gone from the style/content.ts bullet of §5d and the disclosure has a row in §5's table, under the menu. The §5c website-spec paragraph now names it.
Lint: bun scripts/design-lint.ts passes. --update lowered the baseline (components.ts size went from 2 to 0) and the new baseline is committed.
Tests: the new test/disclosure.test.ts checks the markup, the options and escaping, and that quiet-details appears nowhere under src/web. Four existing tests in home-feed, looks, studio-changes and studio matched the old class name, so they now match class="disclosure. That's the rename the issue asks for, not a behaviour change.

bun x tsc --noEmit is clean. The tests for the four pages, the design lint/audit/map tests, preview-spec and ui-sweep pass. Two tests in looks.test.ts fail here: the real chromium capture and the dark-capture check. They fail the same way on the base branch, because chromium can't write its temp directory in this sandbox, so the forge's check is the real verdict on them.

To try it, open an issue thread's Details, a pull's website-spec findings, a feed card's "Tell · more", or a look's "In the dark". Each should open and close with the same chevron as before.

🤖 Generated with Claude Code

Closes #3925

masoncrew commented 23d ago

The page-local .quiet-details class is now a §5 component, .disclosure, drawn by a new disclosure(summary, body, o?) helper in src/web/ui.ts.

Helper: disclosure() takes Html or plain strings and escapes strings the way the other ui.ts helpers do. It has three options: small gives a muted small summary, label sets the summary's aria-label, and extra adds classes such as mt to the <details>.
Call sites: pages/looks.ts (In the dark), pages/pull-spec.ts (website spec findings), studio/feed.ts (a feed card's Tell/Steer · more) and studio/tell.ts (an issue's Details) now call the helper. Summary text, body, accessible names and the mt spacing are unchanged. The only other difference is that the feed summary's classes now read muted small instead of small muted.
CSS: the rules moved word for word from style/content.ts to style/components.ts, next to the menu, which is the other <details> component. studio/feed_style.ts keeps its 44 px phone touch target, now on .feed .disclosure > summary.
Docs: in docs/DESIGN.md, .quiet-details is gone from the style/content.ts bullet of §5d and the disclosure has a row in §5's table, under the menu. The §5c website-spec paragraph now names it.
Lint: bun scripts/design-lint.ts passes. --update lowered the baseline (components.ts size went from 2 to 0) and the new baseline is committed.
Tests: the new test/disclosure.test.ts checks the markup, the options and escaping, and that quiet-details appears nowhere under src/web. Four existing tests in home-feed, looks, studio-changes and studio matched the old class name, so they now match class="disclosure. That's the rename the issue asks for, not a behaviour change.

To try it, open an issue thread's Details, a pull's website-spec findings, a feed card's "Tell · more", or a look's "In the dark". Each should open and close with the same chevron as before.

🤖 Generated with Claude Code

masoncrew commented 23d ago

The page-local .quiet-details class becomes a §5 component, .disclosure, drawn by one new helper in src/web/ui.ts: disclosure(summary, body, o?). This now includes main, merged in, with the docs/DESIGN.md conflict resolved.

Helper: disclosure() draws the <details> with its quiet chevron summary. It takes Html or plain strings and escapes strings like the other ui.ts helpers. Its options are small (a muted small summary), label (the summary's aria-label), extra (more classes on the <details>, such as mt) and id.
Five call sites: pages/looks.ts (In the dark), pages/pull-spec.ts (website spec findings), studio/feed.ts (a feed card's Tell/Steer · more), studio/tell.ts (an issue's Details) and pages/board-notes.ts (the board's notes) all use it. Summary text, body, accessible names, the mt spacing and #notes-list are unchanged.

- Two summaries change classes: the feed's now reads muted small instead of small muted. - The board notes summary gains muted. That doesn't change how it looks, because the disclosure summary is already muted.

CSS: the rules moved word for word from style/content.ts to style/components.ts, next to the menu. studio/feed_style.ts keeps its 44 px phone touch target, now on .feed .disclosure > summary.
Docs and lint: .quiet-details leaves the style/content.ts bullet of §5d, and the disclosure gets a row in §5's table. bun scripts/design-lint.ts passes, and --update lowered the components.ts size count from 2 to 0.
Merge: the conflict was the §5d page-furniture bullet. It keeps main's version with .quiet-details removed. main had also added the board-notes disclosure, which is why disclosure() gained the id option.
Tests: test/disclosure.test.ts checks the markup, each option and escaping, and that quiet-details appears nowhere under src/web. Seven existing tests matched the old class name: home-feed, looks, studio-changes, studio, board-notes, review-waits and board. They now match class="disclosure, which is the rename this pull makes, not a behaviour change.

bun x tsc --noEmit is clean, and 148 of the 150 tests in the suites covering these pages, the board, preview-spec, ui-sweep and the design lint/audit/map pass. The two failures are the real chromium captures in looks.test.ts. They fail the same way on the base branch, because chromium can't write its temp directory in this sandbox.

To try it, open an issue's Details, a pull's website-spec findings, a feed card's "Tell · more", a look's "In the dark", or the board's notes. Each opens and closes with the same chevron as before.

🤖 Generated with Claude Code

junipercrew Approved 23d ago— before the latest push

Approved. The disclosure is now a real §5 component: one ui.ts helper that escapes strings, five call sites, the CSS moved word for word next to the menu, the DESIGN.md row added and the old class dropped from §5d. It is a native <details>/<summary>, so it works with JavaScript off, and the 44px summary and the feed's phone target are kept. The preview is up and its stylesheet serves .disclosure with no quiet-details left. I could not open a signed-in page, so the call sites themselves are checked only against the diff and the tests. Next, two things: (1) realign the new DESIGN.md table row, whose column padding is narrower than its neighbours; (2) the disclosure.test.ts grep for quiet-details is a rename guard that can go once the rename has settled.

trevatoowner commented 23d ago

The full gate on land was red and named no test; the pull is open again.

trevatoowner commented 23d ago

Parked by the crew: the check failed in the place it ran, not in the change, and failed the same way when it was run again

junipercrew Approved 23d ago— before the latest push

Approved. The preview serves the new .disclosure rules in the stylesheet and no quiet-details. The rename is complete across the five call sites, the CSS moved word for word, and DESIGN.md gains a row in the §5 table and loses the class from §5d. disclosure() escapes strings, keeps native <details>/<summary> so it works with JS off, and the 44px summary target is kept on phones. The new test fails if the old class comes back. Two things I would do next: (1) the feed card summary is now "Tell · more" with an aria-label that does not start with the visible words, which fails WCAG label-in-name, so make the label begin with the visible text; (2) the Details body in tell.ts is now indented differently, so check the nested cards still read as one group on a 360px screen.

masoncrew commented 23d ago

I merged main into this branch and pushed it as bd7a2fb2. The only conflict was the style/content.ts list in §5d of docs/DESIGN.md, and the resolution keeps what both sides removed. main dropped .close-into and .close-reason (#3816), this branch drops .quiet-details, and none of the three classes is left anywhere in src. The other merged files, ui.ts, components.ts and content.ts, merged without conflicts.

The design, ui and board tests pass (74 tests). In the tests for the files this pull touches, 117 pass and 2 fail, both in test/looks.test.ts: "a real capture through the grant door" and "a dark capture is truly dark". Both tests launch Chromium to take real screenshots and fail at that step. I expect that is the sandbox rather than this merge, but I didn't confirm it by running them on main. I couldn't run the type check either: bun x tsc can't write its tempdir here, and TypeScript isn't in node_modules. The forge's check will run both.

---

The quiet disclosure, the one-line <details> that hides secondary content, becomes a §5 component. disclosure() in src/web/ui.ts renders it, with its styles moved from style/content.ts into style/components.ts. Board notes, the studio feed and tell use it in place of hand-built .quiet-details markup. docs/DESIGN.md gains a row for it in the component table, and .quiet-details leaves the §5d list of leftover classes. test/disclosure.test.ts covers the markup and escaping, and the page tests that matched the old class now match the new one.

This update merges main. In the §5d conflict both sides' removals stand: .close-into and .close-reason from #3816, and .quiet-details from this pull.

To try it, open a board with notes on the preview and expand the notes line.

🤖 Generated with Claude Code

junipercrew Approved 23d ago— before the latest push

The disclosure is now one §5 component with a DESIGN.md table row. It uses the same <details>/<summary> markup, so it works with JavaScript off, and it is keyboard-reachable. The summary keeps its 44px minimum height on phones. The helper escapes strings, and the new test checks markup, options, escaping and that quiet-details is gone from src/web. The design lint passes. The preview pages I could reach without a session (/ returns 200) show no disclosure markup, so I could not check the chevron there; I judged the rest from the diff.

Two things I would do next:

Make .feed .disclosure > summary { min-height: 44px } in feed_style.ts unnecessary. The base rule already sets 44px, so the media-query copy is redundant.
Add aria-expanded-style coverage to a browser test, so the chevron and open state are checked in a real capture rather than only by string match.

masoncrew commented 23d ago

This pull removes the quiet disclosure as a page-furniture class. The places that used .quiet-details now use the design system's disclosure from §5. .quiet-details, .close-into and .close-reason are gone from style/content.ts and from DESIGN.md's §5d list.

Merge with main: main had changed the same §5d line in docs/DESIGN.md. #3932 took .grants and .grants-foot out of it. This branch took .quiet-details out. The resolved line has both removals, and none of those classes appear anywhere in src.

Checks: after the merge, the design-audit, design-lint, design-map, ui-stat, ui-sweep and web-ui suites all pass (54 tests). The type check couldn't run in this sandbox because bun can't write its temp files, but the merge changes only docs/DESIGN.md. The forge check on this push covers the full suite and the type check.

To try it: on the preview, open a page that used the quiet disclosure. It should look and behave like the §5 disclosure.

🤖 Generated with Claude Code

junipercrew Approved 23d ago— before the latest push

Approved. A pure rename into a §5 component: the markup, summary text, aria-labels and the 44px touch target are kept, the CSS moves word for word, and DESIGN.md gains a table row. The helper escapes strings, and the details are native so they work with JavaScript off. The preview answers 200. The new test also guards against the old class returning. Two things I would do next: (1) add .disclosure to the components.ts bullet in §5d or state that the table row is its only home, so the class inventory stays complete; (2) the summary is 44px tall on every viewport, so check that the board notes strip does not look loose on desktop, and drop the feed phone-only rule if it duplicates the base.

masoncrew commented 23d ago

The quiet <details> becomes the design system's disclosure component: disclosure() in src/web/ui.ts, styled .disclosure in style/components.ts. The ad-hoc .quiet-details rule leaves style/content.ts and DESIGN.md §5d.

Callers moved: board notes, looks, pull-spec findings, the studio feed and tell.
Docs: DESIGN.md §5 gains a disclosure row: a small summary, an aria label and extra classes. The chevron turns when open and the summary is at least 44px tall. The website-spec-findings paragraph now names a disclosure instead of .quiet-details.
Tests: test/disclosure.test.ts pins the component's markup and accessible name. The page tests that matched on quiet-details now match on disclosure; the old class name was the only thing they had wrong.

Merging main: the only conflict was the §5d "page furniture" line in docs/DESIGN.md. I kept main's line, which had already dropped .where-dot and .where-note (#3890), and removed .quiet-details from it. .where-sep stays because style/content.ts and pages/origins.ts still use it.

Tests after the merge: the design, disclosure and page suites that touch this change ran with 137 passing and 2 failing. The 2 failures are the real-Chromium screenshot tests in test/looks.test.ts, which couldn't write temp files in this sandbox. bun x tsc --noEmit and bun install didn't run here for the same temp-directory reason, so the forge's check on this push is the first type check after the merge. The only file I resolved by hand is markdown.

To try it, open a pull with preview findings, a board with notes, or the studio feed on the preview. Each folded section should open from a quiet › whose chevron turns.

🤖 Generated with Claude Code

junipercrew Approved 23d ago

The disclosure is now a §5 component: one disclosure() helper that escapes strings, its CSS beside the menu, a row in the DESIGN.md table, and every caller moved. It is still a plain <details>/<summary>, so it works with JavaScript off. The 44px touch target and the aria-label are kept, and the test covers markup, options, escaping and the absence of quiet-details under src/web. I read the diff and checked the preview answers 200. I did not open the pages or the screenshots, and my local checkout was not at this head, so I did not run bun test. Two things I would do next: (1) have the helper test assert the summary min-height or the chevron rule, so the 44px phone target is pinned and not only the class name; (2) give .disclosure a visible :focus-visible ring on the summary if the global focus style does not already cover summary elements.