Skip to content

feat: components follow the Paper design; destructive becomes a tint - #11

Merged
YaelAnaya merged 2 commits into
mainfrom
feat/align-core-components-with-paper
Oct 3, 2026
Merged

YaelAnaya merged 2 commits into
mainfrom
feat/align-core-components-with-paper

Conversation

@YaelAnaya

Copy link
Copy Markdown
Contributor

Summary

  • Components follow the design file. Every component was compared with its specimen and spec text on the Paper page 02 — Core Components, and the code moved to the design where they disagreed.
    • Alert gains info, success and warning; info/success are role="status", warning/destructive role="alert".
    • Table gains TablePagination, a <tfoot> pager with a live range, rows per page, page n of N and first/previous/next/last buttons, plus loading and count-only states. It is exported, tested and documented.
    • Geometry and role fixes in Tabs, Breadcrumb, Pagination, Command, Combobox, Card, Item, Attachment, Dialog, Sheet, Empty, Input, Textarea, InputGroup, Switch, ButtonGroup, Toggle, ToggleGroup, Kbd and Sidebar.
  • Destructive becomes a tint. --destructive takes new values, loses --destructive-surface and gains --destructive-foreground.
    • Every destructive variant or state now uses the Button's recipe: the role over /10 of itself (/20 in dark), with a /20 hover (/30).
    • That covers Alert, Badge, the menus' destructive items, Attachment's error tile and the error toast.
  • Button drops the inline size. A link in prose is variant="link" with h-auto p-0.
  • The dark --input stroke is neutral-200 at 12%.
  • Fixes:
    • PopoverAnchor positioned nothing. Radix's popper registers anchors through an attach-only callback ref; the trigger registered last and then remounted, so the content measured a detached button at (0,0). The anchor now remounts once so it registers last.
    • DialogFooter showCloseButton now puts Close ahead of the call site's actions.
  • Docs site:
    • Navigation is grouped by the design's categories, with a three-lane layout and a table-of-contents rail.
    • Overlay demos have realistic content sized to it.
    • MDX code blocks get a copy button.
    • The preview stage has no background.

The Paper file was updated to match this branch (tokens, core components, project components and screens) outside this PR.

Notes for review

  • Contrast: text-destructive on its own /10 tint measures 3.99:1 in light, below 4.5:1 for body text. This is the Button recipe as chosen, now shared by Alert, Badge and the menus.
  • Breaking change: removing --destructive-surface and the inline Button size breaks consumers that use them. The package needs a minor bump, and possibly a note in the migration guide.

Test plan

  • pnpm verify passes locally: format, lint, typecheck, 152 unit tests, build, docs check and build, and the packed-package consumer test (12 tests)
  • Overlay demos, Alert, Badge and Button checked in a browser in light and dark
  • Popover anchor positioning checked in a browser (the anchor measures 134px, not 0)

Every component was compared with its specimen and spec text on the
"02 — Core Components" page of the design file, and the code moved to the
design where they disagreed:

- Alert gains `info`, `success` and `warning`; info and success announce
  as `role="status"`, warning and destructive as `role="alert"`. Padding,
  icon lane and type follow the specimen. Empty gets the specimen's room.
- Table gains `TablePagination`, a `<tfoot>` pager with a live range, rows
  per page, page n of N and first/previous/next/last, with a loading and a
  count-only state.
- Geometry and role fixes across Tabs, Breadcrumb, Pagination, Command,
  Combobox, Card, Item, Attachment, Dialog, Sheet, Input, Textarea,
  InputGroup, Switch, ButtonGroup, Toggle, ToggleGroup, Kbd and Sidebar.

Theme: `--destructive` takes new values and loses its `-surface`; it gains
`--destructive-foreground`. Every destructive variant or state now wears
the Button's recipe — the role over /10 of itself (/20 in dark), a /20
hover (/30) — Alert, Badge, the menus' destructive items, Attachment's
error tile and the error toast. Button drops the `inline` size; a link in
prose is `variant="link"` with `h-auto p-0`. The dark `--input` stroke is
neutral-200 at 12%.

Fixes:
- PopoverAnchor positioned nothing: Radix's popper takes its anchor from
  an attach-only callback ref, the trigger registers after the custom
  anchor and then remounts, and the content measured a detached button at
  the viewport's corner. The anchor now remounts once so it registers last.
- DialogFooter's `showCloseButton` puts Close ahead of the call site's
  actions, so the primary one keeps the trailing edge.

Tests, DESIGN.md, the component index and the affected catalog pages and
demos are updated to match.
…rlays

- Navigation is grouped the way the design file's inventory is (Actions,
  Forms, Navigation, Feedback, Overlays, Data display, Layout & shell) in
  the sidebar, the Components index and search; a page without a group
  fails the build.
- The docs layout is a three-lane grid with a hairline between navigation
  and content; component pages carry a "Components / group" eyebrow; the
  table of contents marks the current heading on a rail.
- Overlay demos (Dialog, Sheet, Drawer, Popover, HoverCard, Tooltip,
  DropdownMenu, ContextMenu) carry realistic content, sized to it rather
  than to the available space.
- Fenced code blocks in MDX get a copy button (CodeBlock), sharing the
  View Code panel's CopyButton.
- The preview stage has no background of its own.
@YaelAnaya
YaelAnaya merged commit 1720d1c into main Oct 3, 2026
1 check passed
@YaelAnaya
YaelAnaya deleted the feat/align-core-components-with-paper branch October 3, 2026 00:44
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