mdgriffith / style-elements

Create styles that don't mysteriously break!
http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
BSD 3-Clause "New" or "Revised" License
445 stars 49 forks source link

Wired spacing and spreading for row children in version 4.1 #104

Open AionDev opened 6 years ago

AionDev commented 6 years ago

I've also posted this issue in slack this space should not be here

customCheckBox : (Bool -> msg) -> Bool -> String -> Element Styles Variations msg
customCheckBox myTag isChecked labelText =
    { onChange = myTag
    , label = el None [ paddingLeft 5 ] <| text labelText
    , checked = isChecked
    , options = []
    , icon =
        (\bool ->
            if bool then
                FontAwesome.check Color.red 16
                    |> html
                    |> el None [ vary IsChecked True, width <| px 20, height <| px 20 ]
            else
                el None [ width <| px 20, height <| px 20 ] empty
        )
    }
        |> Input.styledCheckbox None [ verticalCenter ]
newView : Model -> Element Styles Variations Msg
newView model =
    [ customCheckBox NoOpWithBool False "individual"
    , customCheckBox NoOpWithBool True "business"
    ]
        |> row None []

If i add a el wrapper to customCheckBox like so:

solvedCustomCheckBox : (Bool -> msg) -> Bool -> String -> Element Styles Variations msg
solvedCustomCheckBox myTag isChecked labelText =
    { onChange = myTag
    , label = el None [ paddingLeft 5 ] <| text labelText
    , checked = isChecked
    , options = []
    , icon =
        (\bool ->
            if bool then
                FontAwesome.check Color.red 16
                    |> html
                    |> el None [ vary IsChecked True, width <| px 20, height <| px 20 ]
            else
                el None [ width <| px 20, height <| px 20 ] empty
        )
    }
        |> Input.styledCheckbox None [ verticalCenter ]
        |> el None [] -- a simple el solves it.

I get zero spacing as expected: no space as expected

Now as you suggested in slack i downgraded back to 4.0 and the first version of customCheckBox works. But this is a very nasty bug, and my hole app got affected by this. Everything was messed up - every row - especially in forms that have multiple input controls one after another ..

So i can't just fix everything by wrapping in el's -- actually for some other components i have that doesn't even work. It's not intuitive what to do.

I hope this has a simple solution. Thank you 😄