Tracker
Issues and the board of Skribly Tracker, and the tasks the Agent pulls from any tracker. Status, priority and type each pair a glyph shape with a word, so nothing rests on colour; lists reflow from 320px; the board moves cards by pointer, keyboard, screen reader and a one-tap menu, and says what happened through live regions. Built to WCAG 2.2 AA as a target.
11 pages, 13 exports
- IssueKey
- IssueStatusBadge
- PriorityBadge
- IssueTypeBadge
- LabelBadge
- LabelList
- IssueRow
- IssueTable
- Board
- BoardColumn
- BoardCard
- BoardAnnouncer
- TaskCard
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { IssueKey, IssueStatusBadge, PriorityBadge, IssueTypeBadge, … } from '@skribly/ui/tracker'Pages in this groupLink to the section Pages in this group
- IssueKeyThe project key and number of an issue in the monospace face. Pick it wherever an issue is named, and pass href when the key should open the issue.IssueKey
- IssueStatusBadgeA status under the project’s own name, tinted by its category: not started, in progress, done or cancelled. Pick it for the status of an issue in lists, cards and headers.IssueStatusBadge
- PriorityBadgeThe priority of an issue as an arrow glyph and a word. Pick compact on cards, where only the glyph shows.PriorityBadge
- IssueTypeBadgeThe kind of an issue as a glyph and a word: bug, feature, task, improvement or epic. Pass icon for a kind the app defines itself.IssueTypeBadge
- LabelBadgeOne label with the colour the project picked for it. Pass onRemove where labels are edited.LabelBadge
- LabelListThe labels of an issue as a named, wrapping list. Pick max where space is short; the rest fold behind a +N button.LabelList
- IssueRowOne issue on one line, as on the dashboard. Pick it for short lists such as "Assigned to me"; use IssueTable for long lists people sort.IssueRow
- IssueTableThe issue list of a project on the shared Table, with sorting, empty, loading and error states. Pick stack, the default, to turn rows into cards below 36rem, or scroll to keep the grid in its own scrolling box.IssueTable
- BoardThe Kanban board of a project: a column per status, cards that move between them, and a voice that says how the move went. The board is controlled; apply onMove with moveBoardCards and save it. Turn on "Fail the next save" to see the error path.Board, BoardColumn, BoardCard, BoardAnnouncer
- Board statesA read-only board, the loading, error and empty states of the board, and a column that is still loading.Board, BoardColumn
- TaskCardA task from any connected tracker, as in the task list of the Agent. Pick it for lists where one task opens next to the list, and put the start button in actions.TaskCard