Raft 设计系统
English

组件 · 任务

TaskCard

The card that shows one task — its number, title and a status chip that changes the status — on a task board and in a task list.

稳定
import { TaskCard } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

A TaskCard shows one task: its number, its title and a status chip people can change. A board and a list use the same card. How tasks are shown, filtered and opened is in Tasks.

task-card/compositions/task-card-state-matrix

When to use

SituationUse
A task on a board or in a listTaskCard, inside a TaskBoard column or a TaskList group
A task in a conversationNot a card: the message is the task, and a task marker hangs under it (MessageItem)
A task's status or number in running text, a row or a headingTaskChip or TaskStatusBadge (Tasks components)
The task's detailsA centered dialog; see Tasks

Anatomy

  • TaskCard: the card. Pass onClick to make it open the task's details.
  • TaskCardRow and TaskCardBody: the layout around the text.
  • TaskCardMeta: the first line.
    • TaskCardChannel: the place the task belongs to (#launch-week). Optional; see Content.
    • TaskCardStatus: the status chip. Required.
    • TaskCardNumber: the task number (#25). Required.
    • TaskCardLegacy: a marker for a task from the old task system. Optional.
  • TaskCardTitle: the task's title, at most 3 lines. Required.
  • TaskCardDescription: a short description, at most 2 lines. Optional.

States

StateUse for
busy on TaskCard or TaskCardStatusA status change is being saved; the chip can't be pressed until it finishes
disabledA task that can't be opened or changed: a fill-muted card with foreground-disabled text
DraggingOn a board, the card being dragged is the only card with shadow-float (TaskBoard)
task-card/compositions/task-card-state-matrix

Behavior

  • A card with an onClick hovers with the subtle tier, like the other cards people read, and presses with the medium tier; its status chip hovers medium (Hover and press).
  • Pressing the status chip opens a list of the five statuses, with a check on the current one (Select). Choosing one changes the status at once.
  • Pressing the chip doesn't open the card: stop the click from reaching TaskCard.
task-card/compositions/task-status-select

Content

  • Write the title in sentence case, as a verb and its object: "Polish the onboarding flow".
  • Show the channel only where tasks from several places are listed together, such as a product's task page. In a place's own Tasks view every task belongs to that place, so leave it out.
  • Set the channel and the number in Space Mono; the parts do this.
  • Spell the statuses Todo, In Progress, In Review, Done and Closed (Writing).

Accessibility

  • TaskCard uses Base UI's useRender and renders an article. With onClick it is clickable but not a button: give the keyboard a way to open the task, such as a link or button on the title.
  • TaskCardStatus is a native button and the trigger of the status Select. Give it an accessible name that includes the task: aria-label="Change status for task #25".
  • busy sets aria-busy; disabled sets aria-disabled on the card.

Rules

  • Make the status chip the only thing that can be changed on the card. Assignee and creator are changed in the task's details.
  • Don't add a shadow, a colored band or an accent border to the card: it is a white card with a hairline (Shape).

API

TaskCard

Prop类型默认值
busybooleanfalse
disabledbooleanfalse
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.

TaskCardBody, TaskCardChannel, TaskCardDescription, TaskCardLegacy, TaskCardMeta, TaskCardNumber, TaskCardRow

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.

TaskCardStatus

Prop类型默认值
busybooleanfalse
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.

TaskCardTitle

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.

相关组件