feat(storybook): add display primitive stories#18124
Merged
Merged
Conversation
Cover Default block usage, SkeletonLines, SkeletonCardContent, SkeletonCard, and SkeletonCardGrid sub-components. Title hierarchy `UI / Skeleton` 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 Default, Sizes (em-scaled via text-* utilities), WithLabel, and InsideButton compositions. Title hierarchy `UI / Spinner` 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 Default, Colors (`disabled|primary`), Values (0/25/50/75/100), and WithLabel composition. Title hierarchy `UI / Primitives / Progress` 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 TwoLevel, ThreeLevel, WithCurrentPage (BreadcrumbPage), and WithEllipsis (collapsed deep hierarchy). Title hierarchy `UI / Primitives / Breadcrumb` 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 VerticalScroll, HorizontalScroll (explicit `ScrollBar orientation`), and ShortContent (no scrollbar). Title hierarchy `UI / Primitives / ScrollArea` 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 Closed, Open (`defaultOpen`), WithCustomTrigger (asChild + data-state icon swap), and ListOfDetails composition. Title hierarchy `UI / Primitives / Collapsible` 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 Default (2-line clamp), OneLine, ThreeLines, FourLines, LineCounts (all four side-by-side), and ShortText edge case. Title hierarchy `UI / TruncatedText` per #18121. 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. |
4 tasks
Cover BarUsage, LineUsage, AreaUsage (stacked), PieUsage, TooltipIndicators (`dot|line|dashed`), and HiddenLabel. Each story uses `ChartContainer` with a `config` map and references colors via the generated `--color-<key>` CSS variables. Title hierarchy `UI / Chart` 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 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>
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 the display primitives in
src/components/ui/. This is PR 3 of 5 for #18121, scoped to display components. One commit per checkbox in the issue.UI / Primitives / Tabs.UI / Skeleton.UI / Spinner.disabled|primary), Values (0/25/50/75/100), WithLabel. TitleUI / Primitives / Progress.UI / Primitives / Breadcrumb.ScrollBar orientation), ShortContent. TitleUI / Primitives / ScrollArea.UI / List.defaultOpen), WithCustomTrigger (data-state icon swap), ListOfDetails. TitleUI / Primitives / Collapsible.UI / TruncatedText.dot|line|dashed), HiddenLabel. TitleUI / Chart.Title hierarchy follows the convention established in #18122 / #18123:
UI / Primitives / [Name]for shadcn-regenerable primitives,UI / [Name]for app-canonical components with custom shapes.Notes for review
Spinnerhas no built-in size prop; sizing is driven byfont-size. Stories demonstrate scaling via Tailwindtext-*utilities.TruncatedTextuses client-sideuseTranslationfor the Show more / Show less label; Storybook's preview wiresnext-intlso the toggle works without per-story setup.CollapsibleWithCustomTriggershows the canonical pattern for swapping chevrons viagroup-data-[state=open].ScrollAreahorizontal scrolling requires an explicitScrollBar orientation='horizontal'; the default ScrollBar is vertical-only.Breadcrumbuses the project's i18n-awareLink; the storybook preview wires next-intl so links render without errors.Chartstories reference colors viavar(--color-<key>)CSS variables generated from theconfigmap — designers can recolor a chart by editing the config without touching the Recharts JSX.Test plan
TruncatedTexttoggle works with both Show more and Show less labels renderingRefs: #18121