Run strip
Pass and fail history of pipeline runs as square cells.
Guidance
Run strips show the pass and fail history of a pipeline as small square cells, oldest first and
the newest at the end, as on Plugins and an asset's run history. Every status has a shape as well
as a colour: succeeded is a solid moss square, failed is crimson with an ×, partial is half
filled in ochre, skipped is an outline with a dash, queued is a dotted outline, and running is
slate with a centre dot that pulses only with live (never under reduced motion).
It is a one-row grid: Tab to it, then Left and Right move between runs (flipped in right to
left), Home and End jump to the oldest and newest, and each run's id, status, start time and
duration show in the ink data tooltip and are announced. Enter or Space (or a click) fires
mm-select. Escape hides the tooltip. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
runs | runs | Run[] | [] | The runs, oldest first, so the newest is at the end. |
label | label | string | '' | What the strip is, e.g. "Last 30 runs of postgres-shop". Starts the accessible summary. |
live | live | boolean | false | Lets a running cell pulse. Only for genuinely live data. |
selectable | selectable | boolean | false | Shows a pointer cursor; Enter, Space and clicks fire mm-select either way. |
timeZone | time-zone | string | 'UTC' | IANA time zone for start times. UTC by default. |
Events
| Event | Detail | Description |
|---|---|---|
mm-select | CustomEvent<{ run: Run, index: number }> | A run was chosen with Enter, Space or a click. |
CSS parts
| Part | Description |
|---|---|
strip | The focusable grid. |
cell | Each run cell. |
Examples
Every state of mm-run-strip in Storybook, with keyboard and screen reader tests.