Support GFM task-lists

[seshrs]

Is your feature request related to a problem? Please describe. GitHub Flavored Markdown (GFM) defines task lists as unordered lists with disabled checkbox "bullets".

The HTML to render such a task-list (as generated by Kramdown GFM parser) is as follows:

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Here is an unchecked task list item.</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />And here is a checked task list item.</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Another unchecked item.</li>
</ul>

On GitHub-managed sites like on github.com, task lists are rendered as expected, as lists with checkboxes:

• [ ] Here is an unchecked task list item.
• [x] And here is a checked task list item.
• [ ] Another unchecked item.

Compare the above with a task-list using Primer CSS styles. Notice how the list-style is still disc, and the spacing is incorrect.

I couldn't find references to any styles for task-lists in Primer CSS. Most significantly, this affects task-list styling on pages-themes/primer, which is the default theme for GitHub Pages.

Describe the solution you'd like I found that the following rules style task-lists decently. (I derived this based on style rules from github.com.)

li.task-list-item {
  list-style-type: none;
}
li.task-list-item .task-list-item-checkbox {
  margin: 0 0.2em 0.25em -1.6em;
}

I imagine that the styles would have to be refined before being included in Primer CSS, while also taking into account accessibility (see https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Accessibility_concerns).

I'm not sure if the task-list-item and task-list-item-checkbox classes are appropriate. If Primer CSS prefers to use different class names, I guess Kramdown GFM parser can add an option to match the class-names.

Additional context CC @zpapanas who first noticed the issue (fixed in a project I maintain: eecs485staff/primer-spec#68)

[simurai]

I couldn't find references to any styles for task-lists in Primer CSS.

Currently the styling for .task-list-item is only available on github.com. But if this is something that would be useful to have in Primer CSS, we could consider moving the styles. 👍

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[seshrs]

Ping to keep this alive! CC @simurai

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[seshrs]

Ping (again) to keep the task open!

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[simurai]

I think still not fixed.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.