Repository navigation
feat(web): design system base components (lot 2) - #264
Open
jplanckeel wants to merge 11 commits into
Open
jplanckeel wants to merge 11 commits into
jplanckeel wants to merge 11 commits into
Conversation
Icon draws the 32 icons of the design system (16 px grid, 1.5 px stroke, square caps) from the reference paths; it is decorative unless it gets a title. Logo draws the highlighted T and the wordmark with the tokens. Also installs cmdk and @radix-ui/react-dialog for the command palette, and stubs matchMedia, ResizeObserver and scrollIntoView for jsdom in the shared test setup. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Variants primary, secondary and ghost, sizes md (38 px) and sm (30 px), icon and iconRight, square icon buttons, 2 px focus ring. Buttons default to type=button like the reference. The legacy variant and size names stay as temporary aliases until lot 5, so current screens keep working. cn() now knows the spacing and size tokens, so a caller's h-7 replaces h-control-md instead of fighting it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Kbd shows a key in mono 11 px within a rule (and follows the colours of a primary button). Highlight is the signature highlighter, with a mono data variant for running and now. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
StatusMark is the 22 px status tag (glyph with an inner sign and a mono
label), or the glyph alone coloured by its tone with label={false}. The
running glyph turns in 1.6 s and stops with prefers-reduced-motion.
ImpactMark is the magenta user impact marker, compact or labelled.
The theme gains the motion tokens of the brand book (ease, status spin,
drawer and palette entrances).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
SegmentedControl is an aria-pressed button group, controlled or not. MetricStrip shows three to five metrics in a sunken band; a value takes a colour only through its tone (failed, warning, impact), and a delta only when the trend is worse, with the warning glyph. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
EventRow lays out time, title over its metadata, then the compact ImpactMark and the StatusMark on the right edge, in a comfortable or a compact density; the selected row takes signature-wash. EventList is a listbox with a single tab stop: arrows, Home and End move the focus and the selection together (nextListIndex, tested on its own). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Four navigation groups with mono labels, router links, the active page in signature with aria-current, action counts, and a 60 px collapsed rail where names become tooltips and accessible names. An optional toggle sits at the bottom. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The graduated ruler: 8 px grid, hourly ticks with mono labels, event marks coloured by status, and the needle with its now highlighter kept inside the drawing. startHour and endHour set the window (from and to stay as aliases); the SVG has a descriptive accessible name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The event detail in the bandeau layout: type, status and time, the title, chips for service, environment and owner that filter the views, PR and ticket links with dashed empty slots, the user impact band, details and the history drawn from the changelog. It is a non-modal dialog, closes on Esc and slides in over 180 ms unless motion is reduced. toDrawerEvent() maps an API event to the drawer data (history sorted and worded from the changelog), and lib/format writes 15:04:12 and 07 apr 2026. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The ⌘K palette on cmdk inside a Radix dialog over the scrim: search field, groups in the given order, icons, mono hints and shortcut keys, the active item in signature-wash, substring filtering on label and hint, and a factual empty state. Enter runs the item, Esc closes; the panel fades in with a 4 px rise unless motion is reduced. Opening it with ⌘K comes with the shell in lot 3. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
/theme-test now shows every component in its states, light and dark side by side: icons and logo, buttons with keys and highlights, status and impact marks, segmented control and metric strip, the time ruler over an interactive event list, expanded and collapsed sidebars, the event drawer and the command palette. The showcase layout moves to pages/showcase. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
3 of 4 tasks
This branch has not been deployed
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
Lot 2 of
docs/design-system/IMPLEMENTATION.md: the base components of the "Surligneur" design system, inweb/src/components/ui, followingcomponents/*.md,reference/index.d.tsand the rendering ofreference/bundle.js/bundle.css. No page uses them yet (lots 3 and 4); they are all visible in/theme-test.Icon,icons.tsIconName; decorative unless titledLogoButtoniconRight,type="button"by default. Legacy variant and size names kept as temporary aliases (lot 5)Kbd,HighlightStatusMark,Glyphprefers-reduced-motionImpactMarkSegmentedControlaria-pressedbuttonsMetricStripsub,delta; onlyworseis colouredEventRow,EventListSidebarTimeRulerEventDrawerCommandPalettecmdkin a Radix dialog, groups, hints, keys, empty stateAlso:
lib/event-drawer.ts(API event → drawer data),lib/format.ts(15:04:12,07 apr 2026),lib/list-navigation.ts, motion tokens (120 / 180 ms, one easing),cn()aware of the spacing tokens, and jsdom stubs (matchMedia,ResizeObserver,scrollIntoView) in the test setup. New dependencies:cmdk,@radix-ui/react-dialog.Visible change on existing screens: buttons built on
ui/buttontake the design system sizes (md 38 px, sm 30 px) and borders.Test plan
npm run lint,npm run build:check,npm test(137 tests) pass inweb//theme-testchecked in light and dark, palette opened and driven with the keyboard in Chromiummain: only button sizes change/theme-testin both themes🤖 Generated with Claude Code