Convert a markdown checklist item to a Task
Updated design proposal
With the addition of the Tasks widget, alongside feedback from the initial rollout of tasks from markdown, behavior as well as the UI controls have been revised.
Goals
- Focus the relationship between checklist and tasks list, with tasks list as the primary SSOT
- Avoid managing tasks from checklists, which creates significant complexity — the tasks widget is more predictable and centralizes tasks management
- Minimize (to the extent possible) UI distraction: showing icons on hover can naturally be somewhat distracting when scanning a list. Minimize this effect by avoiding highlights and pushing actions to the edges, out of the way of the content.
- The downside to this is that the actions will feel detached from the checklist item if the item text is short; this is acceptable in this case as this is a utility feature (users can create tasks w/o this shortcut) and the readability concern should outweigh this.
Design Proposal
See designs in the Design Manager
See walkthroughs for how content is handled
- 1 action per screen: Convert the first checklist item in order, then open the task, then convert the next
Details
On hover, show an action menu pinned to the top-right of the checklist item row (aligned with the checkbox and move action)
-
Changes from current iteration:
- pinned to right to minimize distraction alongside text
- menu instead of action to add enough friction to avoid needing a confirmation while also minimizing the UI (slim ellipsis vs more visually weighty icon)
Action menu contains "Convert to task" and "Delete" (originally planned, complements move action but not required for convert)
On "Convert", task is created and checklist item is removed; show toast with Undo
-
Changes from current iteration:
- removing checklist item to keep task management in Tasks and avoid unclear relationships
- does not open the Task immediately: I went back and forth on this, but not opening the Task immediately makes the toast more visible/usable while also allowing users to convert >1 item in succession. There is a clear downside to this which is that users will have to scroll the page to find and open the task they created.
Checklist items with content that doesn't fit in the title goes into the description
-
Changes from current iteration:
- Shift from error to proper handling
Other considerations
- Stacking icons, as in the original design, is appealing however current issue body has a minimum margin of only 16px, meaning we can't push actions into the margin. As a result stacking actions would require further indenting checklist items. Breaking the actions apart from the move control creates two control spaces, but each with different behavior (drag vs click), and also follows the standard "actions at the far right" pattern used in the Tasks widget and elsewhere.
- An alternative, seen in rich editors like Coda and Notion, is a combination move/action button. This typically sacrifices affordance for one action at the expense of the other but is likely easy to learn. One key difference is that this exists on all blocks in those editors, but here Move exists today only in lists, and Convert only in checklists. This could be explored later if patterns extend beyond lists.
- **Bulk Add:** there's no header or outer anchor to use for checklists, however bulk actions could be accomplished by either appending to the checklist count (all checklists at once) or by introducing a bulk add function to the Tasks widget, which could accept copy-pasted checklist items (would not remove checklist items, but would be more flexible).
Availability and Testing
Job e2e:package-and-test
will need to be run in the MR(s) that introduce(s) the change.
Ensure test coverage in unit/integration tests.
Release Notes
Teams often use markdown checklist items to outline tasks or completion criteria for an issue, but tracking more in-depth information related to the checklist item has always been limited and cumbersome. With the release of 15.9, you can seamlessly convert a markdown checklist item on an issue to a task, which enables teams to have a more robust experience tracking and managing an issue's dependencies by assigning and estimating tasks separately from issues.
https://docs.gitlab.com/ee/user/tasks.html#create-a-task-from-a-task-list-item