Different lists (bullets, checks etc.)?

[hjalmers]

Currently we only have this defined in design library:
https://designlibrary.sebgroup.com/components/list/

In my opinion that's more of a grid or table, although the styling can be applied to a list too (should probably follow the style and design of a normal table). Nevertheless we need more list types.

Check lists
To accommodate for this use case we've added a check list too.

Bullet lists
Here's another use case from another project which requires "normal" bullets:

Examples
https://stackblitz.com/edit/list-options?embed=1&file=src/app/app.component.html&view=preview

[ghost]

@splashdust Kan man få bilder? Kommer inte åt länkarna.

[splashdust]

@JessiNygrenWalhed

Checklist:

Ordered list: (Redaktörer kan skapa dessa i valfri SEB-färg)

[hjalmers]

I've added a few more styles just to have something to start with here.

Ordered list is probably the one with highest priority as teams are starting to implement it and all implementations differ a bit, especially the use of colors. I think it would make sense to use the same colors for the following states:

• default state
• active state (list item represents active/current state in a flow i.e. using steps)
• disabled state (list item is not active)

For a list were users can interact with the items, in addition to the above we should also include states for:

• hover
• click/press (active state in a browser)
• focus (might be nice to for lists with tab support)

What do you guys think @splashdust @JessiNygrenWalhed?

[splashdust]

Yes, it makes sense set a standard for state-color mapping and interactive behavior. Maybe even define a few common use cases, and define how ordered lists should behave in those cases. Lists used for similar purposes in different apps should behave in similar ways.

I think different considerations apply if the list is not interactive however, like in the PWS example. In that case it is just a style that can be applied in a rich text editor, and all the items will have the same static color. In that case I think it enough that the numbers are in a colored square, that different colors aren't mixed in the same list, that the contrast between number and background is good, and so on.

@hjalmers @JessiNygrenWalhed

[ghost]

I would like to make a few sketches. Need to see some more examples. Try out some colours and sizes.

[hjalmers]

If you want, you can take a look at two pretty common uses cases here (at the end), personally adding more colors would make sense for highlighting that there's an error for a step using red (instead of the green), and yellow for pending, i.e. we're waiting for something before we can tell you if something went wrong (red) or if it's okay (green). Note sure what purple could be used for, perhaps steps yet to be completed if we don't want to use the disabled state (greyed out)? Just some ideas that I think would be useful:)

[ulde01]

I think the way SEB Bootstrap is, is good. Personally I like rounded bullets but other than that - thumbs up!