'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Workflow
ActivityFeed and PropertyList
What happened to an item, from people and agents, with comments and relative times, and its properties in a side panel.
import { ActivityFeed, PropertyList } from '@alea/ui';
Examples
An issue
The pieces together: the title and description, what happened (people and an agent), and the properties in a side panel.
APP-142
Render the home screen before the full sync
Show what we have as soon as the minimum state is there, instead of a spinner until everything loads.
Ana Rivas created the issue ·
TriageAgent added the labels Performance and Mobile ·
Bruno Díaz ·
Right now the spinner never ends on a cold start. Can we render first and load the rest later?AssistantAgent moved this from Todo to In progress ·
Properties
- Status
- In progress
- Priority
- Urgent
- Assignee
- Ana Rivas
- Cycle
- Cycle 144
- Labels
- PerformanceMobile
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent-strong…--alea-accent-subtle…--alea-border…--alea-border-strong…--alea-surface…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…
Radius
--alea-radius-md…--alea-radius-sm…
Type
--alea-font-size-sm…--alea-font-weight-medium…
Props
ActivityFeed props
What happened to an item, in order: people and agents, changes and comments, with relative times. A list a screen reader reads top to bottom.
| Prop | Type | Default | Description |
|---|---|---|---|
eventsrequired | ActivityEvent[] | - | The events to list: who did what, when, and any comment. |
aria-label | string | - | Name of the feed. Default "Activity". |
className | string | - | Extra class names for the root element. |
PropertyList props
The properties of an item in a side panel: label on the left, value (often an inline picker) on the right.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | { label: ReactNode; value: ReactNode; icon?: ReactNode; }[] | - | Label and value pairs: the value can be any node (a picker, a badge, an avatar and a name). |
className | string | - | Extra class names for the root element. |
title | ReactNode | - | A heading above. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
ActivityFeed
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-activity.alea-activity-item.alea-activity-avatar.alea-activity-agent.alea-activity-body.alea-activity-line.alea-activity-tag.alea-activity-time.alea-activity-comment
PropertyList
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-props.alea-props-title.alea-props-list.alea-props-row
Accessibility
- The feed is an ordered list, oldest first, so it reads top to bottom; times are time elements with the exact date.
- Agents are marked with a word, not only an icon.
- Properties are a description list: each label is read with its value.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through links and pickers in the feed and the properties |
Do and don't
Do
- Write actions as short sentences after the name: moved this to In progress.
- Show comments in full; collapse long runs of system events.
Don't
- Don't mix people and agents without saying which is which.
In Figma
ActivityItem with Type (Event, Comment, Agent) and PropertyRow.