Design system hardening: charts, drawer, tokens, skeleton#117
Merged
Design system hardening: charts, drawer, tokens, skeleton#117
Conversation
…upport Compound component (Root, Header, Navigation, Grid, Controls, ControlItem, Footer) built on WAI-ARIA date picker grid pattern. Supports single and range selection, optional time inputs, locale-aware formatting via Intl, controlled or uncontrolled month navigation, accessibility label overrides, and custom day cell rendering. Includes Fieldset --fieldset-gap CSS variable for per-instance gap customization. Made-with: Cursor
Fix TimeInput blur phantom value creation, range time swap on reverse click and text input paths, aria-selected for in-range dates, impure state updater in goToMonth, and nav button disabling at min/max bounds. Add today indicator style, single commit path for Enter key, and tests for keyboard navigation, hover preview, input validation, and time preservation across date reordering. Made-with: Cursor
Add Scatter, Split, BarList, Funnel, Waterfall, and Sankey chart components. Remove LiveDot, LiveValue, and ActivityGrid. Consolidate Ranking into BarList. Keyboard accessibility: Enter/Space activation across all charts via useChartScrub onActivate callback, memoized handlers, tooltip positioning on arrow-key navigation, and focus-visible rings on all interactive chart elements. Fix broken shimmer animation on skeleton loading states (gradient instead of flat background-color). Rename pie-fade-in keyframe to chart-fade-in. Gate ariaLiveContent on showTooltip in StackedArea and Composed charts. Replace Split chart pop-in tooltip with legend swap on hover for zero layout shift. Add 8 Playwright keyboard interaction tests and a Bar chart test story. Fix pre-existing test locator issues (strict mode, color-contrast). Made-with: Cursor
- Reorder demo page h2 sections alphabetically (Calendar before Card) - Reorder chart h3 sub-sections alphabetically (Bar through Waterfall) - Add consistent 128px spacing between all h2 sections (9 missing spacers, 3 wrong margin values) - Fix Sankey layout scale factor to subtract padding before dividing by value sum, preventing initial placement overflow - Rewrite resolveCollisions to cascade shifts from bottom up (d3-sankey approach) — the previous implementation only shifted the topmost node, leaving bottom nodes past the plot height after relaxation - Decouple stage headers from label visibility so stages always render when the stages prop is provided - Position middle-column Sankey labels at node center instead of node.y0 - 6 to prevent overlap with neighboring link strokes - Shorten demo "Infrastructure" label to "Infra" to stay within the 40% label-width threshold at typical container widths Made-with: Cursor
The component functions as a date picker (inputs, controls, footer) rather than a bare calendar grid. Rename aligns with its actual role and clarifies that products compose it inside their own popover or dialog. Reorders demo page to maintain alphabetical section order. Made-with: Cursor
Remove Figma URLs from source comments, move FIGMA_FILE_KEY to env var, add .env.example, add homepage/bugs to package.json, and gitignore ephemeral plan directories and Cursor-generated environment.json. Made-with: Cursor
Replace "Grid" with "consuming product" in boundary, publishing, and build-component docs to keep Origin product-agnostic. Made-with: Cursor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Replace internal deployment URL with api.example.com in Drawer demo data and stories. Made-with: Cursor
Add Tokens section explaining generated files, note internal-only Figma scripts, and soften font requirement language. Made-with: Cursor
The library was never imported — all animation in Origin is pure CSS. Made-with: Cursor
Made-with: Cursor
…leanup Add analyticsName tracking to all 15 chart components. Rename props for consistency (showGrid->grid, onHover->onActiveChange, scrub->interactive, onClickItem->onClickDatum). Add interactive, animate, onActiveChange, yDomain, and loading/empty props where missing. Standardize ChartWrapper usage with ref forwarding, extract useMergedRef utility, add keyboard navigation to Pie and Uptime, replace class toggles with data-* attributes, and move inline styles to SCSS. Re-create LiveDot and LiveValue components. Add 24+ Storybook stories covering all new features. Made-with: Cursor
Replace single-prop-flip variant stories with args-driven controls across all components. Primary stories now expose boolean, enum, and number props in the Controls panel. Removes ~80 redundant stories that duplicated what a control toggle already demonstrates. Made-with: Cursor
…overage Switch popup from CSS border to outline for clean edge-to-edge rendering matching Base UI. Add aria-hidden to Handle, replace raw buttons with Button components in stories, rewrite ActionSheet with grouped card pattern, add IndentEffect story, and expand Playwright CT coverage to side panels, nested drawers, and indent effect. Made-with: Cursor
…efinements Made-with: Cursor
…round Made-with: Cursor
Skeleton.Group uses the Temani Afif CSS technique: each skeleton's ::before escapes to the Group wrapper via mask clipping, creating a unified shimmer sweep across all grouped elements. Works on iOS Safari (no background-attachment: fixed dependency). Alpha surface tokens ensure the shimmer adapts to any background color. Made-with: Cursor
jaymantri
force-pushed
the
ajay/design-system-hardening
branch
from
354fc1c to
6f39a3e
Compare
Replace custom skeleton CSS in Chart (loadingSkeleton, chartSkeleton, barListSkeleton, splitSkeleton) and Table (skeleton, skeleton-pulse) with imports of the Skeleton component. Removes ~100 lines of duplicated shimmer CSS and unifies loading visuals across all components on the same alpha tokens and timing. Made-with: Cursor
Charts: upgrade 11 interactive chart SVGs from role="img" to role="graphics-document document" with aria-roledescription per chart type. Add role="graphics-symbol img" with aria-label to navigable data points in Bar, Waterfall, Scatter, Split, and Uptime. Add aria-live polite regions to Sankey, Funnel, Waterfall, Split, and Uptime for screen reader tooltip announcements. Fixes: remove unused eslint-disable in DatePicker, remove useless null assignment, collapse Drawer calc to fix stylelint operator-no-newline, move Skeleton TestRef to test-stories for Playwright CT compatibility. Made-with: Cursor
When interactive is false, the chart is a static graphic — role="img"
is the correct ARIA role. Sparkline delegates to LineChart with
interactive={false} and expects role="img".
Made-with: Cursor
The Sparkline fixtures used Chart.Line without interactive={false},
so LineChart defaulted to interactive mode and rendered
role="graphics-document document" instead of the expected role="img".
Made-with: Cursor
Made-with: Cursor
coreymartin
approved these changes
Mar 5, 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
Test plan