All components (204)

History

Data · History · .amset-history

What it is and when to use it

What has been happening to something (an order, an invoice, a ticket): each entry with what happened, when, who did it and the detail, joined by a line.

When to use it

As an activity log on the page of an order, an invoice or a customer.
tone on an entry for what matters, with the common vocabulary (neutral, accent, info, success, warning, error): a payment as success, a reminder as info, a rejection as error; icon to tell them apart at a glance.
sort="oldest-first" when it reads as a story from beginning to end. It only reverses what it receives: it does not sort by date.
A date given as a Date is written with dateFormat in the language of the LocaleProvider (or in locale, if passed); as text ("2 h ago") it appears as is.
In a side panel, inside a container with data-density="compact": density is global, not a prop.

When not to

For the phases of a process that moves forward: Steps (or OrderStatus for tracking a shipment).
For a thread of messages between people: Conversation.

Keyboard: none; whatever goes inside the detail is what gets traversed.

Accessibility: it is an ordered list (ol) with a name (label) and each date given as a Date goes in a time with its datetime: it can be read, copied and understood without seeing the line that joins them. The icons and the dots are decorative. With no entries it says that nothing has happened ("Nothing has happened yet", or whatever empty says) instead of leaving an empty list.

Fine-tuning: CSS variables --amset-history-*: -author, -brand, -date, -detail, -detail-padding, -dot, -gap, -icon, -line, -slot, -title. The size (size) changes the circle, its icon, the gap and the font sizes. The gap between entries is set by density, not by size.

What it looks like

Order receivedOctober 1
Payment confirmedOctober 1
DeliveredOctober 3

<History
  label="Order history"
  entries={[
    { key: '1', title: 'Order received', date: 'October 1' },
    { key: '3', title: 'Delivered', date: 'October 3' },
  ]}
/>

Props

Import it with import { History } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`entries`required	`readonly HistoryEntry[]`	—
`label`required	`string`	What this history is of: "Invoice activity". Required.
`className`	`string`	Merged with the library classes; it does not replace them.
`dateFormat`	`Intl.DateTimeFormatOptions`	How each date is written. Short date and time by default.
`empty`	`ReactNode`	—
`locale`	`string`	Replaces the provider's language in dates. Without it, the provider decides.
`size`	`"sm" \| "md" \| "lg"`	—
`sort`	`"newest-first" \| "oldest-first"`	Newest on top (default) or at the bottom. It only sorts what it is given.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-history-brand`	`1.5rem`
`--amset-history-line`	`2px`
`--amset-history-icon`	`0.875rem`
`--amset-history-dot`	`0.5rem`
`--amset-history-gap`	`var(--amset-space-3)`
`--amset-history-title`	`var(--amset-text-base)`
`--amset-history-date`	`var(--amset-text-xs)`
`--amset-history-author`	`var(--amset-text-sm)`
`--amset-history-detail`	`var(--amset-text-sm)`
`--amset-history-detail-padding`	`var(--amset-space-2) var(--amset-space-3)`

How to change it

.amset-history {
  --amset-history-brand: ...;
  --amset-history-line: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: