Data
Metric
One reading, on a plate: a label, a figure, and what qualifies it.
Usage
When to reach for it
import { Metric } from '@misoto22/design'Notes
One reading, on a plate: a label, a figure, and what qualifies it.
Distinct from BigNumber, which is the same idea at headline scale for the ONE figure a view is about, and which needs the charts entry. This is the tile that appears four across on a console: smaller, monospaced rather than editorial, and carrying two things BigNumber has nowhere for — a status tone, and a free slot under the number that is not a delta. Those two are the whole reason it exists; a dashboard whose tiles have to be a <div> because the delta does not apply is a dashboard with two tile designs in it.
The figure is monospace and tabular by construction, because four of these in a row are read down the column as much as along it, and proportional digits put the same magnitude at two different widths.
Anatomy
| Element | Description |
|---|---|
| Platerequired | An <article> at --radius with a hairline round it and 12px of padding, or whatever asChild is handed. It has no heading and no landmark: a row of four is a row of readings, not four sections. |
| Labelrequired | label as an eyebrow at --ink-3-aa. Nothing binds it to the figure programmatically, so document order is the whole association. |
| Tone dot | A StatusDot beside the label when tone is set, un-pulsed and aria-hidden. Decoration by construction, which is why whatever it means has to be in detail as well. |
| Figurerequired | value in the mono face at --fs-item with tabular figures, printed exactly as handed over — no unit, currency or locale is guessed. Tabular because four tiles in a row are read down the column as much as along it. |
| Detail | detail under the figure at --ink-2 in the small step. One line: what makes the number a reading rather than a count. |
| Aside | aside, last, unwrapped and unstyled: a Sparkline, a denominator, a caveat. Unlike BigNumber’s note slot it carries no margin of its own, so a tight tile stays tight. |
Best practices
Do
- Put whatever the tone means into detail as well. The dot is aria-hidden by construction, so a tile whose only account of a failure is that it is red says nothing at all to a screen reader, and nothing in greyscale.
- Format value at the call site. It is printed exactly as handed over, which is what lets a locale, a currency and a unit be decided once by the application rather than guessed four times by four tiles.
- Give the slotted child no children of its own under asChild. The label and the figure are injected into it, so `<Link href="/jobs" />` is the whole call — a child with content of its own gets that content and the tile both.
Don’t
- Do not reach for this where there is one figure and a change to report. BigNumber has a delta, a direction stated by the call site and an announced verdict; a tone dot is not any of those, and re-implementing them in aside gets the announcement wrong.
- Do not write a sentence into detail under asChild. The whole tile is inside one link, so the link’s accessible name is every word in it read in order, and a clause added there is a clause read out every time the link is reached.
- Do not put a heading inside one. The plate is an <article> with no name, so a heading in it opens a section a screen reader will list — four tiles then read as four sections of the page rather than as one row of figures.
Examples
default
Four across, which is the arrangement this exists for. The figures are monospace and tabular by construction, so the same magnitude is the same width in every tile and the column reads as a column rather than as four unrelated numbers. Each tone dot is aria-hidden, so whatever it means is in the line under the figure as well — a tile whose only account of a failure is that it is red says nothing at all to a screen reader, and nothing in greyscale. Every value arrives already formatted: the locale, the unit and the currency are the application's decision, made once rather than guessed four times.
63,851
newest yesterday
0
failing since Tuesday
12
3 waiting on approval
7
all reconciled
a tile that is a link
asChild hands the whole plate to the caller's own element, which is how a tile becomes a link without this package importing a router. The slotted child takes no children of its own — the label, the figure and the line under them are injected into it, so an anchor written as a self-closing tag is the whole call. Because the tile IS the link, its accessible name is every word in it read in order, which is the reason to keep the detail line short here even where a longer one would read fine on a plain tile.
Accessibility
- The tone dot is aria-hidden without exception, so colour is never the only carrier — the words in detail are.
- value is taken already formatted. The component does not guess a unit, a currency or a locale.
- Under asChild the tile becomes the caller’s element, so the link or button is the whole plate rather than a target inside it.