Detail panel

Details of what was selected in a view, so the view behind stays in place: in the playground, a collection’s tokens with their alias chains and values in the selected mode, a lint finding in full with the chain of its token, a token from the graph with its readings in every mode (as dta token get prints them), or an output file (or the generated dta.config.ts) as its text, with Copy and Download. A side panel next to the view from 1024 px of viewport width, a bottom sheet below.

When to use

For details of one row of a list or table that the visitor wants to read without losing their place: open, read, close, next row.
Not for the views themselves (those are Tabs) and not for confirmations or forms; there are no modal dialogs for content that belongs on the page.

A collection beside the view

Light

Graphite

Story: /stories/detail-panel/side/

A finding in the bottom sheet

Light

Graphite

Story: /stories/detail-panel/sheet/

An output file beside the view, with Copy and Download

Light

Output · CSS · 743 B

output/css/themes/branda.css

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-brand="branda"] {
  --colors-brand-primary: var(--colors-foundation-blue-500);
  --colors-brand-primary-dark: var(--colors-foundation-blue-700);
  --colors-brand-accent: var(--colors-foundation-sky-500);
  --colors-surface-default: var(--colors-foundation-white);
  --colors-surface-muted: var(--colors-foundation-gray-100);
  --colors-text-default: var(--colors-foundation-gray-900);
  --colors-text-muted: var(--colors-foundation-gray-500);
  --colors-text-on-primary: var(--colors-foundation-white);
  --effects-overlay-opacity: var(--effects-opacity-50);
  --effects-shadow-blur: var(--effects-blur-md);
  --typography-body-family: var(--typography-fontfamily-sans);
}

Graphite

Output · CSS · 743 B

output/css/themes/branda.css

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-brand="branda"] {
  --colors-brand-primary: var(--colors-foundation-blue-500);
  --colors-brand-primary-dark: var(--colors-foundation-blue-700);
  --colors-brand-accent: var(--colors-foundation-sky-500);
  --colors-surface-default: var(--colors-foundation-white);
  --colors-surface-muted: var(--colors-foundation-gray-100);
  --colors-text-default: var(--colors-foundation-gray-900);
  --colors-text-muted: var(--colors-foundation-gray-500);
  --colors-text-on-primary: var(--colors-foundation-white);
  --effects-overlay-opacity: var(--effects-opacity-50);
  --effects-shadow-blur: var(--effects-blur-md);
  --typography-body-family: var(--typography-fontfamily-sans);
}

Story: /stories/detail-panel/file/

An output file in the bottom sheet

Light

Output · CSS · 743 B

output/css/themes/branda.css

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-brand="branda"] {
  --colors-brand-primary: var(--colors-foundation-blue-500);
  --colors-brand-primary-dark: var(--colors-foundation-blue-700);
  --colors-brand-accent: var(--colors-foundation-sky-500);
  --colors-surface-default: var(--colors-foundation-white);
  --colors-surface-muted: var(--colors-foundation-gray-100);
  --colors-text-default: var(--colors-foundation-gray-900);
  --colors-text-muted: var(--colors-foundation-gray-500);
  --colors-text-on-primary: var(--colors-foundation-white);
  --effects-overlay-opacity: var(--effects-opacity-50);
  --effects-shadow-blur: var(--effects-blur-md);
  --typography-body-family: var(--typography-fontfamily-sans);
}

Graphite

Output · CSS · 743 B

output/css/themes/branda.css

/**
 * Do not edit directly, this file was auto-generated.
 */

[data-brand="branda"] {
  --colors-brand-primary: var(--colors-foundation-blue-500);
  --colors-brand-primary-dark: var(--colors-foundation-blue-700);
  --colors-brand-accent: var(--colors-foundation-sky-500);
  --colors-surface-default: var(--colors-foundation-white);
  --colors-surface-muted: var(--colors-foundation-gray-100);
  --colors-text-default: var(--colors-foundation-gray-900);
  --colors-text-muted: var(--colors-foundation-gray-500);
  --colors-text-on-primary: var(--colors-foundation-white);
  --effects-overlay-opacity: var(--effects-opacity-50);
  --effects-shadow-blur: var(--effects-blur-md);
  --typography-body-family: var(--typography-fontfamily-sans);
}

Story: /stories/detail-panel/file-sheet/

A token from the graph: every brand as dta token get reads it, names, its finding

Light

Graphite

Story: /stories/detail-panel/token/

A token from the phone list in the bottom sheet

Light

Graphite

Story: /stories/detail-panel/token-sheet/

Guidelines

One component, two presentations, one native <dialog>. Beside the view it is shown non-modal (show()), in the flow and sticky while the page scrolls. As the sheet it is modal (showModal()): fixed to the bottom, focus stays inside, the page behind is inert and veiled with bg-canvas at 80 %. Crossing 1024 px while open switches the presentation and keeps it open.
Focus: opening moves focus to the panel’s title, so a screen reader reads what opened; closing (the × button, Escape, or a tap on the sheet’s backdrop) returns focus to the row that opened it. Escape closes the side panel too.
Look: bg-surface with a stroke-ink outline in border-strong and radius-lg (it is the thing in focus); the sheet keeps the same complete outline (its side lines run down to the screen’s edge), rounds only its top corners and shows a grab handle. It once had only a top rule on rounded corners, which tapered off down the sides; borders are complete or straight (principle 3). A mono kicker in fg-subtle (Collection · brand · 0.94), a mono title. A finding’s kicker (error · no-dangling-aliases) carries its severity (kickerSeverity): the marker shape before it and the kicker in status-error-text or status-warning-text (Status colours).
Content: a meta line in fg-muted, optional actions (a file’s Copy button and Download, outline Buttons at 44 px), an optional mode switch (a segmented bg-subtle well with aria-pressed buttons), an optional message shown whole in mono (the finding as the CLI prints it), and lines: a token name, then its alias chain and value (→ {Colors.Foundation.Blue.700} #003f8a) in fg-muted, with a small swatch for colours. Or a file’s text (code): mono, as it is, every line whole (a line is never broken inside a token such as var(--colors-brand-primary)), under a hairline rule; a long line scrolls sideways inside the code’s own box, never the page (TICKET-114, replacing 079’s wrapping, which broke var(-- on phones). Paths in the kicker, title, meta, message and lines break after a / or . and keep their segments whole (Token path). The lines and the code scroll inside the panel (a focusable, named region), the head stays.
A token (from the Graph canvas or the Graph list, TICKET-078): kicker Token · color · Brand(Alias), the token’s name, a meta line (“Every brand, as dta token get reads it; the graph shows BrandA · Desktop.”), then one line per reading in the words of dta token get: the modes (BrandA, or every mode), the one the graph shows tagged in view in action-text, and the value and chain (#3b8fd9 Colors.Brand.Accent → Colors.Foundation.Sky.500), or unresolved: … with the error square, in status-error-text (a line’s severity). Under them its names in code (facts: CSS var(--colors-brand-accent), Tailwind --color-brand-accent, or the CLI’s “Not in the build output…”), then its findings (notes: the marker and the kicker error · no-dangling-aliases · BrandB in the status colours, the message in mono).
Ways on (links): outline Buttons at 44 px at the end of the body (full width in the sheet), above the step row. A finding about a token has “Show in graph”: the Graph view with that token selected, its brand and breakpoint shown and its row in view (the hash records it, #graph/<id>). A token has “Show in lint” (its first finding, one in view first) and “Show BrandB” for a finding in a brand the graph does not show (the graph switches to it). Back and forth, the panel follows.
The row that opened the panel is marked in the view (aria-current, tinted action-subtle); after “Show in graph” or “Show in lint” the row shown takes its place, so closing returns focus there.
Next in a list (next): for a finding, a step row ends the body and stays there while the lines above it scroll: “Next finding” (outline Button, 44 px, the full width of the sheet) and where you are, 2 of 3, in mono fg-muted. It goes through every finding in the Lint view’s order and wraps after the last; the view’s marked row follows. Focus stays on the button, a polite status says what is shown now (2 of 3: Colors.Surface.Muted), and closing returns focus to the row of the finding shown last. Shown only when there is more than one.
Motion: the side panel comes in from the right (space-6 and a fade, motion.duration.slow, motion.ease.enter) while the view’s column narrows; the sheet slides up from the bottom edge and its canvas backdrop fades in. Both leave the way they came (base, exit), with the content they showed. CSS only: @starting-style and discrete display/overlay transitions on the native <dialog>. After “Next finding” the new content fades in (dta-appear, base) while the head and the step row stay, and the position lights up (Changed). Under reduced motion they appear and go at once (the position’s highlight stays). See Motion.

Tokens used

Read from the component’s source:

--action-bg--action-subtle--action-text--bg-canvas--bg-subtle--bg-surface--border-default--border-strong--colors-brand-accent--fg-default--fg-muted--fg-subtle--font-mono--font-sans--motion-duration-base--motion-duration-fast--motion-duration-slow--motion-ease-enter--motion-ease-exit--motion-ease-standard--radius-full--radius-lg--radius-md--radius-sm--space-1--space-10--space-2--space-3--space-4--space-6--status-error-marker--status-error-text--status-warning-marker--status-warning-text--stroke-focus--stroke-hairline--stroke-ink--type-body-sm-line-height--type-body-sm-size--type-code-line-height--type-label-size--type-meta-letter-spacing--type-meta-line-height--type-meta-size--type-title-line-height--type-title-size