TaskList

Stacked status sections for the Tasks list view. Compose TaskCard (and optionally TaskDnd) as children.

Preview#

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

Verify a deliberately long task title wraps to three lines without pushing the status control outside the card

The description also wraps and clamps so dense board columns remain scannable at the source width.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

Anatomy#

import {
  TaskCard,
  TaskListRoot,
  TaskSection,
  TaskSectionBadge,
  TaskSectionChevron,
  TaskSectionCount,
  TaskSectionEmpty,
  TaskSectionHeading,
  TaskSectionItems,
  TaskSectionPanel,
  TaskSectionTrigger,
} from "raft-ui";

<TaskListRoot>
  <TaskSection>
    <TaskSectionTrigger>
      <TaskSectionHeading>
        <TaskSectionBadge status="todo" />
        <TaskSectionCount />
      </TaskSectionHeading>
      <TaskSectionChevron />
    </TaskSectionTrigger>
    <TaskSectionPanel>
      <TaskSectionEmpty />
      <TaskSectionItems>
        <TaskCard />
      </TaskSectionItems>
    </TaskSectionPanel>
  </TaskSection>
</TaskListRoot>

Usage#

Status sections#

Group cards by status with collapsible sections. Collapse and counts are driven by the composition.

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

Verify a deliberately long task title wraps to three lines without pushing the status control outside the card

The description also wraps and clamps so dense board columns remain scannable at the source width.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

Scroll area#

Use one ScrollAreaViewport around all status sections. The list remains a single vertical scroll surface, while TaskListRoot and sections only own their layout and collapse state.

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#139

Verify a deliberately long task title wraps to three lines without pushing the status control outside the card

The description also wraps and clamps so dense board columns remain scannable at the source width.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

#126LEGACY

Retire the legacy task inspector

#121

Review task filter empty states

Compare empty, filtered empty, loading, and failure structures.

#118

Document the consumer-owned workflow boundary

Section empty states#

Sparse tasks leave In Review / Done / Closed empty so TaskSectionEmpty shows. List has a single empty host (no DnD idle/allowed/blocked triad).

#142

Match the Tasks tab toolbar and board spacing

Preserve the source hierarchy before connecting product state.

#137

Connect keyboard drag feedback

Announce allowed and blocked status targets.

No in review tasks.

No done tasks.

No closed tasks.

Virtualization#

Keep one shared ScrollAreaViewport, and mount a useVirtualizer stack inside each tall section. Virtualization stays consumer-owned; TaskList does not provide it.

const viewportRef = useRef<HTMLDivElement>(null);

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => viewportRef.current,
  getItemKey: (index) => items[index]!.id,
  estimateSize: () => 116,
  gap: 10,
  overscan: 6,
});

<ScrollArea>
  <ScrollAreaViewport ref={viewportRef}>
    <TaskSectionItems>
      <div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
        {virtualizer.getVirtualItems().map((row) => (
          <div
            key={row.key}
            ref={virtualizer.measureElement}
            style={{ position: "absolute", transform: `translateY(${row.start}px)` }}
          >
            {renderItem(items[row.index]!)}
          </div>
        ))}
      </div>
    </TaskSectionItems>
  </ScrollAreaViewport>
</ScrollArea>

API#WIP

TaskListRoot#

...props

useRender.ComponentProps<"div">

List view root for TaskSection children.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	List view root for TaskSection children.

TaskSection#

open

boolean

Controlled collapsed state for the section.

defaultOpendefault: false

boolean

Initial collapsed state for the section.

...props

Collapsible.Root.Props

List section root. Defaults to a section host via render.

Prop	Type	Default	Description
`open`	boolean	—	Controlled collapsed state for the section.
`defaultOpen`	boolean	false	Initial collapsed state for the section.
`...props`	Collapsible.Root.Props	—	List section root. Defaults to a section host via render.

TaskSectionTrigger#

...props

Collapsible.Trigger.Props

Expands or collapses the section.

Prop	Type	Default	Description
`...props`	Collapsible.Trigger.Props	—	Expands or collapses the section.

TaskSectionHeading#

...props

useRender.ComponentProps<"span">

Heading row for badge and count.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Heading row for badge and count.

TaskSectionBadge#

status

"todo" | "in-progress" | "in-review" | "done" | "closed"

Task status that drives the badge surface color.

...props

useRender.ComponentProps<"span">

Section status badge.

Prop	Type	Default	Description
`status`	"todo" \| "in-progress" \| "in-review" \| "done" \| "closed"	—	Task status that drives the badge surface color.
`...props`	useRender.ComponentProps<"span">	—	Section status badge.