master..8cb4879 · typeable/elm-ui

README.md−4

@@ -66,10 +66,6 @@ The work is based off of a rewrite of the [Style Elements](https://github.com/md

66

67The community around `elm-ui` is maintaining a collection of examples called the [elm-ui-cookbook](https://github.com/rofrol/elm-ui-cookbook). If you are just starting out with `elm-ui`, or get stuck on specific things, this can be a great resource.

68

69−## Notes

70−

71−Make sure to have `<!DOCTYPE html>` on top of your application; otherwise, things might get messed up in some browsers.

72−

73## Contributing

69## Contributing

74

70

75Want to help out fixing bugs or reporting issues?

71Want to help out fixing bugs or reporting issues?

elm.json+1−1

@@ -3,7 +3,7 @@

3 "name": "mdgriffith/elm-ui",

4 "summary": "Layout and style that's easy to refactor, all without thinking about CSS.",

5 "license": "BSD-3-Clause",

6− "version": "1.1.8",

6+ "version": "1.1.5",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

src/Element.elm+5

@@ -1203,6 +1203,11 @@ newTabLink attrs { url, label } =

1203

1204

1205{-| A link to download a file.

1206+

1207+**Note** If you're using `Browser.application`, then this won't be enough to actually trigger a file download due to how `Browser.Navigation` works.

1208+

1209+[Here's a description of what needs to happen](https://github.com/elm/html/issues/175).

1210+

1206-}

1211-}

1207download :

1212download :

1208 List (Attribute msg)

1213 List (Attribute msg)

src/Element/Input.elm+24−44

@@ -330,8 +330,6 @@ The `onPress` handler will be fired either `onClick` or when the element is focu

330 , label = text "My Button"

331 }

332

333−**Note** If you have an icon button but want it to be accessible, consider adding a [`Region.description`](Element-Region#description), which will describe the button to screen readers.

334−

335-}

333-}

336button :

334button :

337 List (Attribute msg)

335 List (Attribute msg)

@@ -369,17 +367,7 @@ button attrs { onPress, label } =

369

367

370 Just msg ->

368 Just msg ->

371 Events.onClick msg

369 Events.onClick msg

372− :: onKeyLookup

370+ :: onEnter msg

373− (\code ->

374− if code == enter then

375− Just msg

376−

377− else if code == space then

378− Just msg

379−

380− else

381− Nothing

382− )

383 :: attrs

371 :: attrs

384 )

372 )

385 )

373 )

@@ -457,24 +445,22 @@ checkbox attrs { label, icon, checked, onChange } =

457 ]

445 ]

458 ++ attrs

446 ++ attrs

459 in

447 in

460− applyLabel

448+ applyLabel attributes

449+ label

450+ (Internal.element

451+ Internal.asEl

452+ Internal.div

453+ [ Internal.Attr <|

461− (Internal.Attr (Html.Attributes.attribute "role" "checkbox")

454+ Html.Attributes.attribute "role" "checkbox"

462− :: Internal.Attr

455+ , Internal.Attr <|

463− (Html.Attributes.attribute "aria-checked" <|

456+ Html.Attributes.attribute "aria-checked" <|

464 if checked then

457 if checked then

465 "true"

458 "true"

466

459

467 else

460 else

468 "false"

461 "false"

469− )

470− :: hiddenLabelAttribute label

462+ , hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

463+ , Element.centerY

478 , Element.height Element.fill

464 , Element.height Element.fill

479 , Element.width Element.shrink

465 , Element.width Element.shrink

480 ]

466 ]

@@ -713,7 +699,7 @@ slider attributes input =

713 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")

699 ("input[type=\"range\"]." ++ className ++ "::-ms-thumb")

714 thumbShadowStyle

700 thumbShadowStyle

715 )

701 )

716− , Internal.Attr (Html.Attributes.class (className ++ " ui-slide-bar focusable-parent"))

702+ , Internal.Attr (Html.Attributes.class (className ++ " focusable-parent"))

717 , Internal.Attr

703 , Internal.Attr

718 (Html.Events.onInput

704 (Html.Events.onInput

719 (\str ->

705 (\str ->

@@ -779,10 +765,10 @@ slider attributes input =

779 -- This is after `attributes` because the thumb should be in front of everything.

765 -- This is after `attributes` because the thumb should be in front of everything.

780 ++ [ Element.behindContent <|

766 ++ [ Element.behindContent <|

781 if vertical then

767 if vertical then

782− viewVerticalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackWidth

768+ viewVerticalThumb factor thumbAttributes trackWidth

783

769

784 else

770 else

785− viewHorizontalThumb factor (Internal.htmlClass "focusable-thumb" :: thumbAttributes) trackHeight

771+ viewHorizontalThumb factor thumbAttributes trackHeight

786 ]

772 ]

787 )

773 )

788 Element.none

774 Element.none

@@ -1565,8 +1551,6 @@ email =

1565

1551

1566By default it will have a minimum height of one line and resize based on it's contents.

1552By default it will have a minimum height of one line and resize based on it's contents.

1567

1553

1568−Use `Element.spacing` to change its line-height.

1569−

1570-}

1554-}

1571multiline :

1555multiline :

1572 List (Attribute msg)

1556 List (Attribute msg)

@@ -2105,11 +2089,7 @@ onKeyLookup lookup =

2105 Json.field "key" Json.string

2089 Json.field "key" Json.string

2106 |> Json.andThen decode

2090 |> Json.andThen decode

2107 in

2091 in

2108− -- We generally want these attached to the keydown event becaues it allows us to prevent default on things like spacebar scrolling the page.

2109− -- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

2110− Internal.Attr <|

2092+ Internal.Attr <| Html.Events.on "keyup" isKey

2111− Html.Events.preventDefaultOn "keydown"

2112− (Json.map (\fired -> ( fired, True )) isKey)

2113

2093

2114

2094

2115{-| -}

2095{-| -}

@@ -2205,8 +2185,7 @@ defaultCheckbox : Bool -> Element msg

2205defaultCheckbox checked =

2185defaultCheckbox checked =

2206 Element.el

2186 Element.el

2207 [ Internal.htmlClass "focusable"

2187 [ Internal.htmlClass "focusable"

2208− , Element.width

2188+ , Element.width (Element.px 14)

2209− (Element.px 14)

2210 , Element.height (Element.px 14)

2189 , Element.height (Element.px 14)

2211 , Font.color white

2190 , Font.color white

2212 , Element.centerY

2191 , Element.centerY

@@ -2242,8 +2221,9 @@ defaultCheckbox checked =

2242

2221

2243 else

2222 else

2244 1

2223 1

2245− , Element.inFront

2224+ ]

2225+ (if checked then

2246− (Element.el

2226+ Element.el

2247 [ Border.color white

2227 [ Border.color white

2248 , Element.height (Element.px 6)

2228 , Element.height (Element.px 6)

2249 , Element.width (Element.px 9)

2229 , Element.width (Element.px 9)

@@ -2251,7 +2231,6 @@ defaultCheckbox checked =

2251 , Element.centerX

2231 , Element.centerX

2252 , Element.centerY

2232 , Element.centerY

2253 , Element.moveUp 1

2233 , Element.moveUp 1

2254− , Element.transparent (not checked)

2255 , Border.widthEach

2234 , Border.widthEach

2256 { top = 0

2235 { top = 0

2257 , left = 2

2236 , left = 2

@@ -2260,6 +2239,7 @@ defaultCheckbox checked =

2260 }

2239 }

2261 ]

2240 ]

2262 Element.none

2241 Element.none

2263− )

2242+

2264− ]

2243+ else

2265− Element.none

2244+ Element.none

2245+ )

src/Element/Region.elm+1−5

@@ -101,11 +101,7 @@ announce =

101 Internal.Describe LivePolite

102

103

104−{-| Adds an `aria-label`, which is used by accessibility software to identity otherwise unlabeled elements.

105−

106−A common use for this would be to label buttons that only have an icon.

107−

108−-}

104+{-| -}

109description : String -> Attribute msg

105description : String -> Attribute msg

110description =

106description =

111 Internal.Describe << Internal.Label

107 Internal.Describe << Internal.Label

src/Internal/Model.elm+3−9

@@ -1478,9 +1478,7 @@ renderHeight h =

1478 Single

1479 cls

1480 "min-height"

1481− -- This needs to be !important because we're using `min-height: min-content`

1482− -- to correct for safari's incorrect implementation of flexbox.

1483− (String.fromInt minSize ++ "px !important")

1481+ (String.fromInt minSize ++ "px")

1484

1482

1485 ( newFlag, newAttrs, newStyle ) =

1483 ( newFlag, newAttrs, newStyle ) =

1486 renderHeight len

1484 renderHeight len

@@ -2244,11 +2242,7 @@ renderFocusStyle focus =

2244 , Just <| Property "outline" "none"

2242 , Just <| Property "outline" "none"

2245 ]

2243 ]

2246 )

2244 )

2247− , Style

2248− ((Internal.Style.dot classes.any ++ ":focus .focusable, ")

2245+ , Style (Internal.Style.dot classes.any ++ ":focus .focusable, " ++ Internal.Style.dot classes.any ++ ".focusable:focus")

2249− ++ (Internal.Style.dot classes.any ++ ".focusable:focus, ")

2250− ++ (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb")

2251− )

2252 (List.filterMap identity

2246 (List.filterMap identity

2253 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor

2247 [ Maybe.map (\color -> Property "border-color" (formatColor color)) focus.borderColor

2254 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor

2248 , Maybe.map (\color -> Property "background-color" (formatColor color)) focus.backgroundColor

@@ -2656,7 +2650,7 @@ renderStyle options maybePseudo selector props =

2656 , (selector ++ "-fs:focus-within {")

2650 , (selector ++ "-fs:focus-within {")

2657 ++ renderedProps

2651 ++ renderedProps

2658 ++ "\n}"

2652 ++ "\n}"

2659− , (".ui-slide-bar:focus + " ++ Internal.Style.dot classes.any ++ " .focusable-thumb" ++ selector ++ "-fs {")

2653+ , (".focusable-parent:focus ~ " ++ "." ++ classes.any ++ " " ++ selector ++ "-fs {")

2660 ++ renderedProps

2654 ++ renderedProps

2661 ++ "\n}"

2655 ++ "\n}"

2662 ]

2656 ]

src/Internal/Style.elm+5−20

@@ -961,17 +961,10 @@ baseSheet =

961 ]

962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)

963 [ Prop "display" "block"

964− , Descriptor (dot classes.heightFill)

965− [ Child "img"

964+ , Child "img"

966− [ Prop "max-height" "100%"

965+ [ Prop "max-height" "100%"

967− , Prop "object-fit" "cover"

968− ]

969− ]

970− , Descriptor (dot classes.widthFill)

971− [ Child "img"

972− [ Prop "max-width" "100%"

966+ , Prop "max-width" "100%"

973− , Prop "object-fit" "cover"

967+ , Prop "object-fit" "cover"

974− ]

975 ]

968 ]

976 ]

969 ]

977 , Class (dot classes.any ++ ":focus")

970 , Class (dot classes.any ++ ":focus")

@@ -1384,15 +1377,7 @@ baseSheet =

1384 -- This apparently is a different story for columns.

1377 -- This apparently is a different story for columns.

1385 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,

1378 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,

1386 -- instead of the expected content size.

1379 -- instead of the expected content size.

1387− -- So we add `min-height: min-content`, which isn't supported by IE, but works for all other browsers!

1388− -- Separately, 0% is different than 0px, but only for columns

1389− -- In columns, 0% will actually be calculated as `auto` for columns

1390− -- So, 0px is the one we want.

1391− [ Prop "flex-basis" "0px"

1392− , Prop "min-height" "min-content"

1393− , Descriptor (dot classes.heightExact)

1394− [ Prop "flex-basis" "auto"

1380+ [ Prop "flex-basis" "auto"

1395− ]

1396 ]

1381 ]

1397 , Child (dot classes.heightFill)

1382 , Child (dot classes.heightFill)

1398 [ Prop "flex-grow" "100000"

1383 [ Prop "flex-grow" "100000"

tests-rendering/cases/open/LabelledInputAlignRight.elmdeleted−28

@@ -1,28 +0,0 @@

1−module LabelledInputAlignRight exposing (view)

2−

3−import Testable.Element exposing (..)

4−import Testable.Element.Input as Input

5−

6−

7−view =

8− layout [] <|

9− column [ width fill ]

10− [ Input.text

11− [ width (px 200)

12− , alignRight

13− ]

14− { onChange = always False

15− , text = ""

16− , placeholder = Nothing

17− , label = Input.labelLeft [] (text "label")

18− }

19− , Input.text

20− [ width (px 200)

21− , alignRight

22− ]

23− { onChange = always False

24− , text = ""

25− , placeholder = Nothing

26− , label = Input.labelHidden "label"

27− }

28− ]

tests-rendering/cases/open/NearbyElementBordersOverlap.elmdeleted−46

@@ -1,46 +0,0 @@

1−module NearbyElementBordersOverlap exposing (view)

2−

3−{-| Elements placed with onLeft, onRight, above & below overlap main element's border

4−

5−

6−# inFront elements with width fill are contained within the parent's border

7−

8−<https://github.com/mdgriffith/elm-ui/issues/223>

9−

10−In addition to the overlap, it affects layout in unexpected ways: eg if the elements

11−are the same height, onLeft and onRight elements will be vertically offset

12−from the main element.

13−

14−-}

15−

16−import Testable.Element exposing (..)

17−import Testable.Element.Border as Border

18−

19−

20−blue =

21− rgb 0 0 1

22−

23−

24−green =

25− rgb 0 1 0

26−

27−

28−grey =

29− rgb 0.5 0.5 0.5

30−

31−

32−view =

33− layout [ width fill, height fill ] <|

34− el

35− [ centerX

36− , centerY

37− , Border.width 10

38− , Border.color green

39− , padding 50

40− , above <| el [ Border.color grey, Border.width 10 ] <| text "above"

41− , below <| el [ Border.color grey, Border.width 10 ] <| text "below"

42− , onRight <| el [ Border.color blue, Border.width 10 ] <| text "onRight"

43− , onLeft <| el [ Border.color blue, Border.width 10 ] <| text "onLeft"

44− ]

45− <|

46− text "Centre"

tests-rendering/cases/resolved/Images/ImageRegression.elmdeleted−63

@@ -1,63 +0,0 @@

1−module ImageRegression exposing (main)

2−

3−{-| <https://github.com/mdgriffith/elm-ui/issues/232>

4−-}

5−

6−import Browser

7−import Element exposing (Element, centerX, clipX, el, image, px, rgb255, row, shrink, width)

8−import Element.Background as Background

9−import Html exposing (Html, button, div, text)

10−import Html.Events exposing (onClick)

11−

12−

13−type alias Model =

14− Int

15−

16−

17−type Msg

18− = NoOp

19−

20−

21−update : Msg -> Model -> Model

22−update msg model =

23− model

24−

25−

26−view : Model -> Html Msg

27−view model =

28− Element.layout [] <|

29− row

30− [ centerX

31− , width shrink

32− , Background.color <| rgb255 255 255 255

33− ]

34− [ viewCard "qs" True

35− , viewCard "ah" False

36− ]

37−

38−

39−main : Program () Model Msg

40−main =

41− Browser.sandbox

42− { init = 0

43− , view = view

44− , update = update

45− }

46−

47−

48−viewCard : String -> Bool -> Element Msg

49−viewCard card bool =

50− let

51− source =

52− "https://hearts-bawolk.herokuapp.com/static/cards/" ++ card ++ ".png"

53−

54− overlapStyles =

55− if bool then

56− [ width (px 50)

57− , clipX

58− ]

59−

60− else

61− []

62− in

63− el overlapStyles (image [] { src = source, description = "" })

tests-rendering/cases/resolved/Images/ImageRegression2.elmdeleted−19

@@ -1,19 +0,0 @@

1−module ImageRegression2 exposing (main)

2−

3−{-| <https://github.com/mdgriffith/elm-ui/issues/228>

4−-}

5−

6−import Element exposing (..)

7−

8−

9−main =

10− Element.layout []

11− (Element.row [ width fill, height fill, explain Debug.todo ]

12− [ text "BEFORE"

13− , image []

14− { src = "https://placekitten.com/300/200"

15− , description = "kitten"

16− }

17− , text "AFTER"

18− ]

19− )

tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elmdeleted−46

@@ -1,46 +0,0 @@

1−module DistributeHeight exposing (main)

2−

3−import Browser

4−import Element exposing (column, el, fill, fillPortion, height, minimum, none, px, rgb, row, text, width)

5−import Element.Background as Bg

6−import Html as Html exposing (Html)

7−

8−

9−type alias Model =

10− ()

11−

12−

13−update : msg -> Model -> Model

14−update _ model =

15− model

16−

17−

18−view : model -> Html msg

19−view _ =

20− Element.layout [ height fill, width fill ] <|

21− column [ height fill, width fill ]

22− [ row

23− [ height

24− fill

25− , width fill

26− , Bg.color <| rgb 1 0 0

27− ]

28− [ el

29− [ height <| px 200

30− , width fill

31− , Bg.color <| rgb 1 0 1

32− ]

33− (text "Helloooo!")

34− ]

35− , row [ height fill, width fill, Bg.color <| rgb 0 1 0 ]

36− [ none ]

37− ]

38−

39−

40−main : Program () Model msg

41−main =

42− Browser.sandbox

43− { init = ()

44− , view = view

45− , update = update

46− }

tests-rendering/cases/resolved/Layout/Columns/DistributeHeightCorrectly2.elmdeleted−86

@@ -1,86 +0,0 @@

1−module Other exposing (main)

2−

3−import Browser

4−import Element exposing (..)

5−import Element.Border as Border

6−import Element.Events as Events

7−import Html exposing (Html)

8−import Html.Attributes

9−

10−

11−type alias Model =

12− { count : Int }

13−

14−

15−initialModel : Model

16−initialModel =

17− { count = 0 }

18−

19−

20−type Msg

21− = Increment

22− | Decrement

23−

24−

25−update : Msg -> Model -> Model

26−update msg model =

27− case msg of

28− Increment ->

29− { model | count = model.count + 1 }

30−

31− Decrement ->

32− { model | count = model.count - 1 }

33−

34−

35−view : Model -> Html Msg

36−view model =

37− viewElements model

38− |> layout []

39−

40−

41−viewElements : Model -> Element Msg

42−viewElements model =

43− el [ height fill ] <|

44− column [ height fill ]

45− [ el

46− [ height (fillPortion 1)

47− ]

48− <|

49− viewCounter model

50− , el

51− [ height (fillPortion 2)

52− ]

53− <|

54− viewCounters model

55− ]

56−

57−

58−flexBasisZero : Element.Attribute msg

59−flexBasisZero =

60− htmlAttribute (Html.Attributes.style "flex-basis" "0")

61−

62−

63−viewCounters : Model -> Element Msg

64−viewCounters model =

65− column [ height fill ]

66− (List.repeat model.count model

67− |> List.map viewCounter

68− )

69−

70−

71−viewCounter : Model -> Element Msg

72−viewCounter model =

73− column [ width fill, height fill, Border.width 1, Border.dotted ]

74− [ el [ Events.onClick Increment, Border.width 1, Border.rounded 3 ] <| text "+1"

75− , el [] <| text <| String.fromInt model.count

76− , el [ Events.onClick Decrement, Border.width 1, Border.rounded 3 ] <| text "-1"

77− ]

78−

79−

80−main : Program () Model Msg

81−main =

82− Browser.sandbox

83− { init = initialModel

84− , view = view

85− , update = update

86− }

tests-rendering/cases/resolved/Layout/Columns/DoNotCollapseBelow0.elmdeleted−48

@@ -1,48 +0,0 @@

1−module DoNotCollapseBelow0 exposing (main)

2−

3−{-|

4−

5−

6−# Safari bug for `el` heigh calculation in combination with `height fill`

7−

8−The problem appears to be that the height of the first el is 0, and therefore the second

9−text is rendered on the first.

10−

11−Versions

12−

13−OS: macOS Mojave 10.14.5

14−Browser: Safari

15−Browser Version: 12.1.1 (14607.2.6.1.1)

16−Elm Version: 0.19

17−Elm UI Version: 1.1.5

18−

19−<https://github.com/mdgriffith/elm-ui/issues/147>

20−

21−I was able to pinpoint the issue using git bisect to this fd08f1a commit, which lines up.

22−

23−<https://github.com/mdgriffith/elm-ui/commit/fd08f1a953484ba96f2d05037d4f208eab351514>

24−

25−-}

26−

27−import Browser

28−import Element exposing (column, el, fill, height, layout, scrollbarY, text)

29−import Html exposing (Html)

30−

31−

32−view : () -> Html ()

33−view () =

34− layout [ height fill ] <|

35− column

36− [ height fill ]

37− [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."

38− , text "Text below the el above"

39− ]

40−

41−

42−main : Program () () ()

43−main =

44− Browser.sandbox

45− { init = ()

46− , view = view

47− , update = \() () -> ()

48− }

tests-rendering/cases/resolved/Layout/SafariColumnBug.elmnew file+14

@@ -0,0 +1,14 @@

1+module SafariColumnBug exposing (main)

2+

3+import Browser

4+import Element exposing (column, el, fill, height, layout, scrollbarY, text)

5+import Html exposing (Html)

6+

7+

8+main =

9+ layout [ height fill ] <|

10+ column

11+ [ height fill ]

12+ [ el [] <| text "Element that Safari gives height 0, if inside an el and not just text."

13+ , text "Text below the el above"

14+ ]

tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elm → tests-rendering/cases/resolved/Layout/SafariTwo.elmrenamed

The content is the same.

tests-rendering/cases/resolved/Images/ImageSizing.elm → tests-rendering/cases/resolved/Misc/ImageSizing.elmrenamed+3−7

@@ -1,9 +1,6 @@

1module ImageSizing exposing (main)

2

3−{-| <https://github.com/mdgriffith/elm-ui/issues/62>

4−-}

5−

6−import Element as E exposing (column, el, px, row, text)

3+import Element as E exposing (column, el, row, text)

7import Element.Border as Border

4import Element.Border as Border

8import Element.Font as Font

5import Element.Font as Font

9import Html exposing (Html)

6import Html exposing (Html)

@@ -14,9 +11,8 @@ main =

14 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|

11 E.layout [ E.height E.fill, Border.width 5, E.explain Debug.todo ] <|

15 E.image

12 E.image

16 [ -- E.height (E.px 500)

13 [ -- E.height (E.px 500)

17− -- ,

18− -- E.width E.fill

14+ E.width E.fill

19− E.height E.fill

15+ , E.height E.fill

20 ]

16 ]

21 -- <| px 500 ]

17 -- <| px 500 ]

22 { src = "http://bburdette.github.io/music-reader.png"

18 { src = "http://bburdette.github.io/music-reader.png"