Ordered/Unordered Lists

[mdgriffith]

The library currently doesn't ship with any sort of way to construct the standard ol/ul/li list. Actually The css reset also removes the list styling too.

My initial thought is why do we need special tooling when you could just do something like:

column None []
    [ row None [] [ el Dot [] (text "•")  , text "First Item" ]
    , row None [] [ el Dot [] (text "•")  , text "Second Item" ]
    ]

This uses all the standard mechanisms for styling and spacing. It's massively more flexible. It works nicely with something like List.map or List.indexedMap for ordered lists.

I'm thinking just to keep it this way, but I figured I'd put it out there in case.

Thoughts?

[Dremora]

A list made with ul/ol/li is semantically a list. When a text with such list copied to another application, it will preserve the structure. text "•" means that the bullet will be copied as a character. This should be implemented using list-style-type instead.

[mdgriffith]

Copying is a good use-case, though I wonder if there are ways to cover that with a constructor instead of exposing specialized style properties.

bulletedList None [] -- implied column layout and <ul> element
                     -- sets all children as <li>
    [ row None [] [ el Dot [] (text "•"), text "First Item" ]
    , row None [] [ el Dot [] (text "•"), text "Second Item" ]
    ]

The above isn't quite there, but hits the general idea. You could make the bullet unselectable.

[Dremora]

-- sets all children as <li>

Yep, why not! Although, we should be careful: what happens if an element inside the list is an image?

I think we should be defining list style type only once per list, not per item. Thus it should be the option of the bulletedList. list-style-type does allow custom bullets, but we should make it easy to use predefined ones.

Something like this:

type UnorderedListType = Disc | Circle | Square | Custom String

bulletedList Disc None []
    [ row None [] [ text "First Item" ]
    , row None [] [ text "Second Item" ]
    ]

Note that there's A LOT more to the ordered list types, check out the MDN page I've linked above.

Also, let's not forget about list-style-position and list-style-image.

[mdgriffith]

I like that! I agree it should be easy to do the basic lists that everyone is used to.

Ok, it's obvious I need to read more about the list properties. I think we're on to something really nice though.