Repository navigation
feat: components follow the Paper design; destructive becomes a tint - #11
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
info,successandwarning; info/success arerole="status", warning/destructiverole="alert".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.--destructivetakes new values, loses--destructive-surfaceand gains--destructive-foreground./10of itself (/20in dark), with a/20hover (/30).inlinesize. A link in prose isvariant="link"withh-auto p-0.--inputstroke is neutral-200 at 12%.PopoverAnchorpositioned 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 showCloseButtonnow puts Close ahead of the call site's actions.The Paper file was updated to match this branch (tokens, core components, project components and screens) outside this PR.
Notes for review
text-destructiveon its own/10tint 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.--destructive-surfaceand theinlineButton size breaks consumers that use them. The package needs a minor bump, and possibly a note in the migration guide.Test plan
pnpm verifypasses locally: format, lint, typecheck, 152 unit tests, build, docs check and build, and the packed-package consumer test (12 tests)