Lists Styles System

[georgeolaru]

A list of items is a fundamental practice on every page content as it's used to organize information for users. There are a large variety of list styles being used: from the basic bulleted list of paragraphs to the checkmark list for pricing table characteristics.

---

Beware of the styling fallacy: Doing the research on how other tools are providing customizations for the lists, I often notice that there are numerous options available (eg. solid or dashed dividers, icons choices, borders to simulate a table) and most of them doesn’t signify any purpose of the user. An example of purpose would be that the ordered list could be used to describe a sequence between list items like a food recipe.

Here I will cover some real-life examples that we can examine to identify the intention and use them as references.

The Lists Styles System

To add another stone to our design system, I suggest creating a list system which is intentional and purposeful.

Some guidelines below:

• in addition to the default list styles (bullet and numbered) we will add a no-bullet style for general purposes and an icon variation for bullets to highlight certain features (eg. checkmarks for pricing tables)
• we will use the “Color Signal” component to pursue the user in deciding the importance of that list in a certain context: a low signal will make the list less prominent on a page.
• a way to increase or decrease the connection between items (eg. horizontal borders to separate them even more, vertical connectors to bring them together in a timeline style)

Resources

• Figma Mockups ↗
• Siemens MindSphere Design System → List Patterns
• Google Material Design → Lists
• GOV.UK Design System → Lists

[georgeolaru]

Good job so far @madalingorbanescu! I took a fresh look, and below is my review:

• [x] Markers do not align vertically with the line of text. I think we need to find a way to position them dynamically and independent of the font size (eg. body text or headings with various font sizes)
• [x] Horizontal divider should be limited by the list width on the left side and should not be constrained by the text content
• [x] Within Editor I noticed that the list styles affect other blocks (eg. I notice some bullets when selecting the variations for the Columns block)

Ordered list

• [ ] I noticed that the counter doesn't take into consideration the Start value and Reverse list numbering block options

List indentation

• [x] When the Checkmark is used for an indented list, the icon becomes smaller and shifts off the center
• [x] Adjust vertical margins of the indented <ul> so that the list is visually linked to the parent list, not the list below. For this, I suggest removing the space between list items of an indented list (or at least halved), so the top margin of the indented <ul> always remain larger than the spacing of its <li> (see screenshot)

Here is a recording of the content that I used for testing:

And here is a gist with the sample content: https://gist.github.com/georgeolaru/955ae4d85ac812528e46e410ffc65be3

[madalingorbanescu]

I am going to close this issue now, and continue here.