feat(storybook): add overlay primitive stories#18122
Merged
Merged
Conversation
Vanilla shadcn Dialog with stories for default usage, header+footer composition, width override via className, and long-form scrollable content. Title hierarchy `UI / Primitives / Dialog` per #18121. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Cover `side: top|bottom|left|right`, `hideOverlay`, and a header+body+footer composition. Title hierarchy `UI / Primitives / Sheet` per #18121. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Cover the three `align` options (`start|center|end`) side-by-side, plus default, rich-content, and explicit-close compositions. Title hierarchy `UI / Primitives / Popover` per #18121. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Cover simple menu, submenus, checkbox items, radio items, and separator/label/shortcut composition. Title hierarchy `UI / Primitives / DropdownMenu` per #18121. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Cover placeholder, default-value, grouped items with labels and separators, disabled state (with and without value), error state via className override, and disabled-item composition. Title hierarchy `UI / Primitives / Select` per #18121. Note: `Select` has no built-in `hasError` variant; the error story applies `border-error` directly. A future cleanup PR could add the variant to match `Input`/`Textarea`. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Cover default usage, all four sides, and a render-count probe demonstrating that children persist across open/close cycles. Title hierarchy `UI / PersistentPanel` per #18121. Stories use a controlled wrapper since `PersistentPanel` is controlled-only (no `defaultOpen`). Component description contrasts with `Sheet`'s mount-on-open behavior so designers can see the difference at a glance. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
myelinated-wackerow
requested review from
minimalsm,
pettinarip and
wackerow
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This was referenced May 5, 2026
Cover Default, WithGroups, WithSeparators, WithShortcuts, WithDisabledItem, Empty (preset filter triggering CommandEmpty), InputWithKbdShortcut (kbd hint instead of search icon), InputWithCustomIcon, and AsDialog (`CommandDialog` modal palette). Title hierarchy `UI / Primitives / Command` per #18121. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Per team decision to keep the existing Chromatic snapshot budget controlled while these primitives get visual reference in Storybook. Snapshots can be re-enabled per-story once we assess which views need regression coverage. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
pettinarip
approved these changes
May 13, 2026
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
2 participants
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
Adds Storybook stories for overlay primitives in
src/components/ui/. This is PR 1 of 5 for #18121, scoped to overlay components. One commit per checkbox in the issue.Dialog— vanilla shadcn primitive (UI / Primitives / Dialog)Modal— expanded existing story to cover all sizes/variants/actionButton (UI / Modal)Sheet— sides,hideOverlay, header/footer composition (UI / Primitives / Sheet)Popover— alignment variations, rich content, explicit close (UI / Primitives / Popover)DropdownMenu— submenus, checkbox/radio items, separators (UI / Primitives / DropdownMenu)Select— placeholder, groups, disabled, error, disabled item (UI / Primitives / Select)PersistentPanel— sides, lazy-mount + persistence probe (UI / PersistentPanel)Command— default, groups, separators, shortcuts, disabled item, empty state, kbd-shortcut input, custom icon,CommandDialog(UI / Primitives / Command)All new files live in
src/components/ui/__stories__/to matchModal.stories.tsx,Button.stories.tsx, etc. Title hierarchy isUI / [Name]for canonical app components andUI / Primitives / [Name]for shadcn-regenerable primitives.Notes for review
Dialogdoesn't exposehideOverlayorsizeprops (onlySheetandModaldo); the Dialog story shows width viaclassNameoverride and points designers atModalfor canonical app sizing.Selecthas no built-inhasErrorvariant — the error story appliesborder-errordirectly and flags this as a candidate for a future cleanup PR (would mirrorInput/Textarea).card.stories.tsxlocation/expansion is out of scope here; separate concern.Test plan
Refs: #18121