Raft 设计系统
English

组件 · 任务

Tasks

The parts every task view shares — the status badge and task chip that show where a task is, the status pixels, and the shell of a task panel.

稳定也叫 TaskChip, TaskStatusBadge, TaskStatusIcon, TasksPanel, task marker, task status
import { Tasks } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

These are the parts every task view shares. TaskStatusBadge writes a task's status as a status chip: the status's soft tint, its pixel and its name. TaskChip is the same chip carrying a task instead: the task marker under a message, or a task mentioned in running text. TasksPanelRoot and its parts are the shell of a page of tasks. The five statuses and how tasks are shown are in Tasks; their colors are in Color.

tasks/compositions/task-status

When to use

SituationUse
A task's status: on a card, in properties, in detailsTaskStatusBadge
A task under a messageTaskChip in the message footer (MessageItem)
A task mentioned in running textTaskChip with variant="inline"
A task's status as a pixel beside a wordTaskStatusIcon
A page or a tab of tasksTasksPanelRoot with its toolbar and viewport
A task as a row on a board or in a listTaskCard
How an agent isAn agent state chip (Status)

Anatomy

  • TaskStatusBadge: a TaskChip with the status pixel and the status name, which the caller supplies.
  • TaskChip: the chip. status sets its tint. Its children are a status icon, then the task number, then the assignee.
  • TaskStatusIcon, and TaskTodoIcon, TaskInProgressIcon, TaskInReviewIcon, TaskDoneIcon, TaskClosedIcon: the status pixel.
  • TasksPanelRoot: the column of a task page.
    • TasksPanelToolbar: the bar on top, with a seam under it. It holds TasksPanelToolbarNewTask, TasksPanelToolbarFilters and TasksPanelToolbarView (Board / List), and lays them out for narrow screens. TasksPanelToolbarGroup and TasksPanelToolbarLabel are for anything else in it.
    • TasksPanelViewport: the scrolling content: a TaskBoard or a TaskList.
    • TasksPanelEmpty: holds an EmptyState when there are no tasks.
  • TaskLoadingList, TaskLoadingRow: placeholder rows while tasks load.
  • taskStatusSoft, taskStatusStrong and TASK_STATUS_IDS: the recipes for building another status surface from the same task-status-* tokens.
tasks/compositions/tasks-panel

Variants

VariantUse for
variant="default"A chip on its own: under a message, on a card, in a details row
variant="inline"A chip in running text; it follows the size of the text around it
size="sm"A default chip in one row with small badges, such as the metadata row of an Activity item
task-chip/compositions/task-chip-variants
task-chip/compositions/task-chip-in-footer
task-chip/compositions/task-chip-in-markdown
task-chip/compositions/task-chip-sizes

States

  • Loading: loading dims a TaskChip and ignores the pointer while the task is resolved.
  • The panel is loading: TaskLoadingList, the same size as the cards it stands for (Feedback).
  • No tasks: TasksPanelEmpty, with one empty state when there are no tasks and another when the filters match none.
  • Failed to load: an error at the panel's scope, with Retry.
task-chip/compositions/task-chip-statuses
tasks/compositions/tasks-empty-states
tasks/compositions/tasks-error

Behavior

  • Make a status chip on a task card a button that opens the list of statuses, with a down arrow after the name (TaskCard). The other ways to change a status are in Tasks.
  • Make the task marker under a message open the task.

Content

  • Spell the statuses Todo, In Progress, In Review, Done and Closed. TaskStatusBadge has no built-in label: the caller passes it, and translates it.
  • Set the task number in Space Mono: #25 (Typography).
  • In a task marker, write the number, then the assignee: #25 @Bugen.

Accessibility

None of these parts wraps a Base UI primitive; TaskChip renders a <span> unless render makes it a link or a button.

  • The status pixel is hidden from assistive technology. Always pass the status name, or keep the task number next to it.
  • Render a task marker that opens the task as an <a> or a <button>, and give it an aria-label that says what it opens ("Open task #25") when its text doesn't. A title is not an accessible name.

Rules

  • Build any new surface that shows a task status from taskStatusSoft and taskStatusStrong, so a status has one color everywhere.
  • Don't give a chip a border: the tint is a highlight, not a sticker (Status).
  • A chip splits its padding evenly between its two ends: 7px each, 5px when sm, 4.5px inline, the same total as before. The status pixel is drawn to its edges, so the space before it is all padding; with 2px less on that end, the pixel sat 6px from the edge and the last letter 8.5px (Alignment).

API

TasksPanelEmpty, TasksPanelRoot, TasksPanelToolbar, TasksPanelToolbarFilters, TasksPanelToolbarGroup, TasksPanelToolbarLabel, TasksPanelToolbarNewTask, TasksPanelToolbarView, TasksPanelViewport, TaskLoadingList, TaskLoadingRow

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskChip

Prop类型默认值
loadingbooleanfalse
size`sm` lines the chip up with an `sm` Badge in the same row.TaskChipSize"default"
status (required)TaskStatusId
variantTaskChipVariant"default"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TaskClosedIcon, TaskDoneIcon, TaskInProgressIcon, TaskInReviewIcon

接受其元素的全部属性。

TaskStatusIcon

Prop类型默认值
status (required)TaskStatusId

Also takes the attributes of its element.

TaskTodoIcon

接受其元素的全部属性。

TaskStatusBadge

Prop类型默认值
childrenBadge text. The caller owns the copy (and its localization); Raft never hardcodes a status label here.ReactNode
sizeSame as `TaskChip`'s `size`: `sm` lines up with an `sm` Badge.TaskChipSize"default"
status (required)TaskStatusId
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件

改动

  • 0.5.58 · FixedTaskChip / TaskStatusBadge size="sm" take the sm Badge's own box (padding, border, line height), so it no longer drifts from the Badge beside it.
  • 0.5.55 · FixedTaskChip / TaskStatusBadge size="sm" now also match the sm Badge's font weight and letter spacing (Elegant 500 / 0.22px, Brutal 700), so the chip no longer reads as a different font beside the Badges in slock's Activity card row. The default size and the inline variant are unchanged.
  • 0.5.54 · AddedTaskChip and TaskStatusBadge take size="sm", which gives the chip the sm Badge's text size and height (Elegant 11px / 18px, Brutal 10px / 20px; icon 10px) for a chip that shares a row with Badges, such as slock's Activity card metadata row. The default size and the inline variant are unchanged.
  • 0.5.41 · ChangedTaskStatusBadge now renders through TaskChip and has no look of its own: a status badge in a task panel and the task chip under a message share one shape, size, border and colour and differ only in content (status icon + the caller's label). Visible change: in Elegant the badge goes from 12px to the chip's 13px with a hairline border and a 19px height; in Brutal from bold 12px at 20px tall to the chip's medium 13px at about 18px tall, so rows that carry it are about 2px shorter. data-slot="task-status-badge" and data-status are kept; no API change.
  • 0.5.39 · FixedBrutal TaskStatusBadge draws a 1px black keyline instead of 2px, matching TaskChip and Badge; py-px keeps it exactly 20px tall, so surrounding layout does not move (Elegant unchanged).
  • 0.5.38 · FixedTaskChip's inline variant no longer paints its own neutral fill and transparent border over the status styling: task references inside message bodies take the same per-status fill, border, text and icon colours as the task chip under a message (Elegant; Brutal unchanged; font size and baseline rules untouched).
  • 0.5.33 · ChangedSteps markers take the task-status colours shared with TaskChip (--task-status-*), so each status has its own colour: finished = Done (green), in progress = In Progress (blue), failed = danger (red), and waiting is neutral grey (the Closed ink). Brutal: solid status fill, ink outline and ink text, as the Brutal TaskChip. Elegant: the status's soft wash, strong ink and a 35% hairline, as the Elegant TaskChip; waiting steps follow naive-ui with no fill and the ring, number and title in the disabled grey.
  • 0.5.31 · FixedTaskStatusBadge in Brutal is a square, hard-edged tag again (no radius, 2px black border, bold, 20px tall), matching the Brutal TaskChip and Badge. 0.5.30 rendered it as a rounded pill. Elegant is unchanged.