Skip to content

feat(design-system): add focused component pages and simplify documentation - #7537

Draft
mahanti wants to merge 4 commits into
codex/design-system-densityfrom
codex/design-system-component-pages
Draft

feat(design-system): add focused component pages and simplify documentation#7537
mahanti wants to merge 4 commits into
codex/design-system-densityfrom
codex/design-system-component-pages

Conversation

@mahanti

@mahanti mahanti commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Each of the 55 catalog entries links through its category eyebrow (ending in →) to /design/components/<id>. A focused page contains just its title and live example in a small shared Card. The example retains its working controls and variants, and the container follows the shared theme and Normal/Compact density.

Every component is an indented child of All components in the navigation, matching Token table under Color. The navigation list scrolls independently so appearance controls remain available. The catalog shows its live previews without extra exploration links or source disclosures. Direct links and refreshes work with the existing static SPA setup, and invalid component URLs offer recovery.

Across the foundation, catalog, composition, and guide pages, headings lead directly into content. Page introductions, section subtitles, explanatory note boxes, and catalog descriptions are removed. Token values, labels, accessible help, and working example content remain; the open-source guide uses concise reference copy.

Stack 6 of 7: #7522#7523#7525#7533#7535 → this PR → #7556. Base: codex/design-system-density. All remain draft.

Validation:

  • Production build, TypeScript, formatting, token freshness, typography, APCA/control contrast, and all 8 token/schema/renderer tests pass.
  • All 33 Chromium tests pass (32 in the full run, plus the density test after updating its expected header spacing), covering all 55 focused routes, catalog and nested navigation, recovery, keyboard focus and interaction, disabled controls, portal density, retained preferences, responsive layouts at 390/884/1440, and accessibility in both themes.
  • The previous repository-wide just ci run stopped in the unchanged buzz-terminal::lifecycle_tests::default_prog_child_observes_the_login_argv0 test: the child did not report $0 within 10 seconds. This failure was also observed before these UI changes; later repository-wide stages were not reached. This layout refinement was revalidated with the design-system build, checks, and browser suite above.

Preview /design/components/buttons, /design/components/input, or follow a category eyebrow or component navigation link.

Signed-off-by: Arjun Mahanti <arjun@squareup.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
@mahanti mahanti changed the title feat(design-system): add focused pages for every component feat(design-system): add focused component pages and simplify documentation Sep 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant