Tasks - Task Detail

These blocks are what you see after opening a task. They work with local copies of typed props (initial), so edits never change the data you passed in, and each one simulates saving so you can replace it with your own API call.

The sheet and dialog follow the focus trap and escape key behavior of the underlying components. Fields have visible labels or accessible names, and the quick add dialog shows its validation message with role="alert". Names, tasks and files are fictional.

Style One

Detail sheet. A list of tasks opens a sheet from the right with editable title, description, status, assignee, due date and labels.

Style Two

Full page. Breadcrumbs, a click to edit title, a description, subtasks with progress and a properties card with a mark complete button.

Style Three

Comments and activity in tabs. Post a comment, see the history of changes as a timeline and see counts on both tabs.

Style Four

Subtasks and attachments. Add and remove subtasks, attach files through the picker, preview images and remove files.

Style Five

Properties sidebar. Popover pickers for status and assignee, a priority toggle, a due date, an estimate stepper and labels you can add and remove.

Style Six

Quick add dialog. A large title field, notes, quick selects for project, assignee, priority and due date, a keyboard shortcut to save and validation.