'/%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
IssueList
Dense rows of work grouped by status: priority, key, status, title, labels, due date and who has it, with keyboard navigation and selection.
import { IssueList, StatusIcon, PriorityIcon } from '@alea/ui';
Examples
Grouped by status
Rows grouped under each status with their count. Arrow keys move, Enter opens; turn on selection to pick several.
In progress1
In review1
Todo2
Backlog1
Done1
Status and priority
The rings and bars on their own; with label they are images named by their value, for when no text is next to them.
backlog
todo
progress
review
done
canceled
urgent
high
medium
low
none
Configurations
Every value of every property, side by side. Numbers match the legend below.
- Group By Status
groupByStatus - Selection Mode
selectionMode
Anatomy
The parts of the component and the class that styles each one.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent-solid…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-border-strong…--alea-status-danger…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-family-mono…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-regular…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…
Props
IssueList props
Dense rows of work: status, priority, key, title, labels, due date and who has it. Grouped by status; arrow keys move through each group, Enter opens.
| Prop | Type | Default | Description |
|---|---|---|---|
issuesrequired | Issue[] | - | The issues: id, title, status and optional key, priority, assignee, labels, due date and href. |
aria-label | string | - | Name of the list. Default "Issues". |
className | string | - | Extra class names for the root element. |
groupByStatus | boolean | true | Groups rows by status, each under a heading with its count. Default true. |
onOpen | ((issue: Issue) => void) | - | Called when a row is opened (Enter or click), when rows have no href. |
onSelectionChange | ((ids: Set<string>) => void) | - | Called with the selected ids. |
selectionMode | "multiple" | "none" | 'none' | Lets people select rows (checkboxes appear). |
StatusIcon props
The status of a piece of work as a small ring: dashed for backlog, empty for todo, filling for in progress, half for review, checked for done, crossed for canceled.
| Prop | Type | Default | Description |
|---|---|---|---|
statusrequired | "done" | "progress" | "backlog" | "todo" | "review" | "canceled" | - | backlog, todo, progress, review, done or canceled. |
className | string | - | Extra class names for the root element. |
label | boolean | - | Names it for screen readers (when it stands alone). Default: decorative, with the status said in text nearby. |
progress | number | 0.5 | For in progress: how far along, 0 to 1 (the ring fills). Default 0.5. |
size | number | 14 | Size in px. Default 14. |
PriorityIcon props
Priority as signal bars (low, medium, high), a filled square with ! for urgent, and a dash for none.
| Prop | Type | Default | Description |
|---|---|---|---|
priorityrequired | "none" | "medium" | "urgent" | "high" | "low" | - | none, urgent, high, medium or low. |
className | string | - | Extra class names for the root element. |
label | boolean | - | Names it for screen readers. Default decorative. |
size | number | 14 | Size in px. Default 14. |
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.
IssueList
- Variants
selectionModemultiplenone- States
- HoverFocusSelected
- 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-issues.alea-issues-group.alea-issues-head.alea-issues-count.alea-issues-list.alea-issue.alea-issue-check.alea-issue-key.alea-issue-title.alea-issue-meta.alea-issue-label.alea-issue-due- Data attributes
data-hrefdata-ondata-overdue
StatusIcon
- Variants
statusdoneprogressbacklogtodoreviewcanceled- 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-status-icon.alea-status-ring.alea-status-fill.alea-status-solid.alea-status-mark- Data attributes
data-status=tododata-status=progressdata-status=reviewdata-status=donedata-status=canceled
PriorityIcon
- Variants
prioritynonemediumurgenthighlow- 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-priority-icon.alea-priority-urgent.alea-priority-mark.alea-priority-dash.alea-priority-on.alea-priority-off
Accessibility
- Each status group is a grid list under a heading with its count; arrow keys move through the rows, Enter opens one.
- A row is named with everything its icons show: key, title, status, priority, assignee and due date.
- Status and priority icons are decorative inside rows; with label they become images named by their value.
- Overdue dates are red and still say the date, never color alone.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves into a group, then to the next group |
| Up or Down arrow | Previous or next row |
| Enter | Opens the row |
| Space | Selects the row (with selectionMode) |
Do and don't
Do
- Keep titles short and put details in the item itself.
- Group by the field people scan first, usually status.
Don't
- Don't hide the status behind color only.
- Don't put actions inside rows that compete with opening them.
In Figma
IssueRow with Status, Priority, Labels and Assignee; StatusIcon and PriorityIcon as separate components.