Repository navigation
feat(studio): Skeleton, Card and MetricCard kit components - #782
Closed
LinuxDevil wants to merge 4 commits into
Closed
LinuxDevil wants to merge 4 commits into
LinuxDevil wants to merge 4 commits into
Conversation
Skeleton is an aria-hidden shimmer block (static under reduced motion); SkeletonRows renders a block of them (div rows or table rows) with one visually-hidden "Loading" status. Card is the shared panel with an optional title/description/actions header that labels a section. MetricCard is a KPI tile: overline label, 24px tabular value, a delta toned by goodWhen with a spoken "up 12% vs previous window" phrase, and an aria-hidden --chart-1 sparkline. Each ships its own CSS file. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…orCell A loading table with no rows renders six SkeletonRows (one cell per visible column, right-aligned columns aligned right) instead of an empty body. ErrorCell renders an error message as danger text behind a 14px alert icon, truncated with a tooltip. The table is restyled per the design brief: sticky 36px header with 12px/500 muted labels, hairline column dividers, lucide sort arrows, tabular right-aligned numbers, 500-weight first column, accent inset on the selected row, plain-text cells titled for truncation, icon pager buttons. e2e row helpers skip skeleton rows; docShots gains x-kit shots for the traces empty state, the loading table and the open filter bar. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…tate tiles TimeRangePicker's presets and Custom sit in one segmented control (surface-2 track, selected segment on surface with a hairline lift); roles, aria-pressed and names are unchanged. FilterBar's search box gets a search icon and the brief's input focus ring; facet buttons a chevron and a count pill. EmptyState's icon is now a lucide component (default Inbox, null for none) drawn in a 40px tile; Traces passes SearchX for its filtered-out state. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ows, kit review fixes The table wrap clips instead of scrolling while the table fits, so it is no scroll container and the sticky header sticks to the screen's scroller; it switches to a horizontal scroller (.dt-scroll-x) only while the table is wider than its container. New opt-in `maxHeight` prop makes the wrap a bounded two-axis scroller with the header sticking inside it. `min-height: min-content` stops a height-limited flex column (Scores with an eval open) squeezing the table to nothing; Card's edge-to-edge body uses overflow: clip for the same sticky reason. Also: pager has no side padding outside an edge-to-edge card; compact in-row buttons only under .dt-actions; header labels ellipsise inside the flex row (.dt-label); MetricCard ignores a non-finite delta and drops non-finite sparkline points; TimeRangePicker's Custom shows an open state while its inputs are shown. docShots' Scores shot waits for the evals table rows; revamp proves the sticky header and the sideways scroll fallback. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.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
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.
Kit part 1: Skeleton, Card, MetricCard, ErrorCell; DataTable sticky header + skeleton loading; segmented TimeRangePicker; iconed FilterBar and EmptyState. Size-check tarball 16.37 -> 16.38 MB (budget 16.46); studio dist +10.5 KB.
Ticket: D3a (Agent Forge Studio redesign, audit/forge-redesign/PLAN.md)
Changes
Verification: focused vitest,
tsc --noEmit, eslint, affected Playwright specs, light + dark screenshots reviewed; full suite and fallow run in CI.🤖 Generated with Claude Code