Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Kanban Board
Link to Figma: tba
Overview
- The Dynamic Kanban Board is a visual workflow management tool.
- It displays tasks or items in columns based on their status.
- Teams can track progress by moving items between stages.
- It supports drag-and-drop, creation, editing, and deletion of items.
- It is useful for Agile project management and task tracking.
...
The component maps field names as specified in the configuration, making it adaptable to various API response formats.
Usage
- Use the board to visualize work items by status.
- Choose it when users need to move items between stages via drag-and-drop.
Sizing & Layout
- Keep column headers short and scannable.
- Make cards concise using title, subtitle, and description templates.
- Add spacing around the board only through its padding control.
States & Feedback
- Use conditional icons on cards to communicate states (e.g., priority, blocked) rather than color alone.
- Require a confirmation step before deletions.
Interactions & Events
- Run setup on initialization (e.g., prefetch) and release resources on destruction using lifecycle events.
- Use the built-in dialogs to create and edit items when enabled.
Visibility & Authorization
- Show or hide the board based on contextual display rules (e.g., selected project).
- Apply policy-based visibility so unauthorized users do not see the board.
Content & Localization
- Provide a localized board title; keep it short and task-focused.
- Localize on-card text by feeding localized fields through the templates.
- Expose stable identifiers for authoring and test automation without affecting user-facing text.
Dos & Don’ts
| Do | Don’t |
|---|---|
| Localize the board title for all supported locales. | Hardcode an English-only heading. |
| Use conditional icons on cards to communicate state. | Rely on color-only cues. |
| Persist column moves via the board’s update mechanism. | Assume drag-and-drop alone saves changes. |
| Ask for confirmation before deleting an item. | Delete immediately without a safety check. |
| Enable pagination for statuses and items. | Load everything at once on large boards. |
| Build columns from the statuses source fields. | Hardcode column names or IDs. |
| Keep cards concise using title/subtitle/description templates. | Put long paragraphs into the title. |
| Hide the board when out of scope or unauthorized. | Show it and rely on backend errors to block action. |
Accessibility
...
- Provide a concise, localized board title so assistive tech announces meaningful context.
- Keep card content short and structured using title/subtitle/description templates.
- Convey state with icons triggered by rules (avoid color-only meaning).
- Include a confirmation step for destructive actions.
- Keep interactions predictable via lifecycle initialization/cleanup.
- Provide stable testing hooks/identifiers for automated checks.
- Reduce cognitive load on large boards using pagination for statuses and items.
- Hide irrelevant or unauthorized content using the board’s visibility controls.
