Partially Checked Checkboxes in Gitlab Markdown
Problem to solve
The user has a nested tasklist like so:
- [ ] Task A
- [ ] Task A.1
- [ ] Task A.2
- [ ] Task A.3
- [ ] Task BThe user finishes Task A.1. Task A is now 33% complete. Often, in plaintext, users might show this with something like the following:
|
|
|
Given that this is already a convention, it'd make sense to make use of it and render a "partially checked" checkbox, instead of just not rendering a checkbox at all, and breaking the flow of the list. If we stick with the above syntax, or even just pick one stub to support, we'll also still preserve markdown's simplistic syntax, and gitlab markdown source will still look just as readable as the HTML render.
Intended users
Anyone who might want to have better at-a-glance understanding of which tasks are completed to what degree. Also, people who already currently use this syntax won't have their markdown renders break.
User experience goal
The user should be able to use at least some of the above syntax in markdown source. When rendered, it should be either an empty checkbox at least. However, ideally, a partially-checked checkbox would be rendered.
Pulling from the example above, we can see that with the current implementation, Task A will just get rendered incorrectly, whereas all the other checkboxes (including the children of Task A, curiously) get rendered fine.
- [-] Task A
-
Task A.1 -
Task A.2 -
Task A.3
-
-
Task B
View Screenshot for historical accuracy
Proposal
This jsfiddle demonstrates how this might be rendered using html5's indeterminate property.
Here's a minimal html stub for the same demonstration:
<html>
<body>
<input type="checkbox" id="check">
<label for="check">Partial Checkbox</label>
<script>
document.getElementById('check').indeterminate = true;
</script>
</body>
</html>When rendered, this gives something like the following screenshot:
