Planning

KanbanBoard

A board of columns that people work in: drag a card between columns, check work off, and add a card at the foot of a column.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`Required	`string`
`fill`	`boolean`	Fits its container's height: each column scrolls on its own. Without it the board is as tall as its longest column.
`columns`Required	`KanbanBoardColumn[]`
`columnWidth`	`number`	Minimum column width in px (default 208).
`compact`	`boolean`	Use compact TaskCards, for narrow columns such as seven days across.
`addLabel`	`string`
`addPlaceholder`	`string`
`addKind`	`TaskCardProps['kind']`
`allowAdd`	`boolean`
`readOnly`	`boolean`
`doneKey`	`string`	Key of the Done column: checking a card moves it there, unchecking moves it back to the first column, and dropping a card there checks it.
`onChange`	`(columns: KanbanBoardColumn[]) => void`	Called with the whole board after every move, check or add.
`className`	`string`

Guidelines

A board of columns that people work in: drag a card between columns, check work off, and add a card at the foot of a column. Makado uses it for Projects, one column per status (To do, Pre-production, Filming, Editing, In review, Published). Each project card shows its brand with the revenue beside it, the title, and the content type. Dated to-dos belong on the MonthCalendar instead.

Provide: label (names the board for assistive tech), columns: a list of { key, title, subtitle, tag, highlight, emptyText, addable, cards, total, more }, where each card takes TaskCard's props plus a unique id. Optional doneKey (for status boards: checking a card moves it to that column), compact (narrow cards), columnWidth (minimum, default 208px; columns stretch to fill), addLabel, addPlaceholder, addKind, allowAdd, readOnly, and onChange(columns) to save changes.

A project's column is its status, so the card needs no badge. Moving the card is how the status changes, and on Home that also updates the project's mark on the calendar and the wins ring.
Keep the card to the project's four facts: brand, title, content type, revenue. Leave revenue off when there is none.
Keyboard: focus a card and press Alt with Left or Right to move it a column, Alt with Up or Down to reorder. Every move is announced.
A column that grows without end (Published) shows only its recent cards: pass those as cards, the full count as total, and more: { label: 'See all 306 published', href } for a link to the full list. On Home, Published shows the last 14 days and links to Projects.
On phones set columnWidth to about 260 so one column and the edge of the next show.
Put the board inside a Card or panel on background-elevated; the columns sit on background-layer-1.
fill fits the board to its container's height, and each column scrolls on its own. Home uses it so the whole page fits the window, with an Expand link that lets the board grow to its full height.
With fill, a column that has more cards below what shows gets a small More below pill at its foot (solid, not a fade). It scrolls the column down by most of its height (instantly with reduced motion) and disappears at the bottom.
Touch: press and hold a card for a moment, then drag it to another column or place; a lifted copy follows your finger, the board scrolls sideways near its edges, and letting go drops it. Moving before the hold is a normal scroll.