elm-ui colors are ignored in component list.

[bhyland]

First of all, thanks so much for a great library! I tried out elm-book after the presentation at the last meetup and I think it'll see regular use.

I found the following issue when using elm-ui - it looks like elm-book's css is overriding elm-ui's colors in component lists. It's only with colours, and strangely it renders the last item in the component list correctly.

Description

1. Elm-UI Setup is as described in the docs for ElmBook.Custom
2. A Chapter contains a list of variations on a simple component using Elm-UI, with different colours for each component.
3. The Elm-UI colours are ignored for all items in the list except for the last. Note that font style and borders are rendered correctly, just the colours are incorrect.

Example

main =
    book
        "My Book"
        |> withChapters
            [ bugs
            ]

bugs : Chapter x
bugs =
    chapter ""
        |> renderComponentList
            [ ( "Blue, blue box", viewtest <| [Font.color blue
                                              , Border.width 1
                                              , Border.color blue
                                              , Element.padding 5] )
            , ( "Green italic, green box", viewtest <| [Font.color green
                                                       , Font.italic
                                                       , Border.width 1
                                                       , Border.color green
                                                       , Element.padding 5])
            , ( "Orange bold, orange box", viewtest <| [Font.color orange
                                                       , Font.bold
                                                       , Border.width 1
                                                       , Border.color orange
                                                       , Element.padding 5] )
            , ( "Red, red box", viewtest <| [Font.color red
                                            , Border.width 1
                                            , Border.color red
                                            , Element.padding 5] )
            ]
        
green : Element.Color
green =
    Element.rgb255 0x7F 0xC4 0x36

red =
    Element.rgb255 255 0 0

orange =
    Element.rgb255 0xFF 0x80 0x00

blue =
    Element.rgb255 0x44 0x84 0xCE

viewtest style =
    Element.el style <| Element.text "This is a test"

This example renders as follows:

Expected Behaviour

All examples are coloured as their labels suggest.

See the following screenshot, created by disabling "color: inherit;" for each item in the list in the inspector.

Tested With

Elm 19.1 elm-book 1.4.2 elm-ui 1.1.8

Tested in both Firefox and Chrome.

I have also confirmed that this happens with Element.Input.text

[georgesboris]

@bhyland sorry about taking so long to reply! I'm the worst with github notifications. Thanks for reporting! I'll take a look :)

[Mehgugs]

Hey this is an issue for me too, I managed to partially work around it but I don't really know why my "hack" fixes it. I suppose that elm-book defines some css classes that collide with the stylesheets elm-ui generates/uses.

-- I'm also using the set up for elm-ui as described in the elm-book documentation.
withComponentList items =
    case items of
        [] -> 
            Chapter.withComponentList []

        (firstLabel, first) :: rest ->
            (firstLabel, first |> Element.layout [] |> Element.html) :: rest
              |> Chapter.withComponentList