8cb4879...master · typeable/elm-ui

README.md+4

since splitsnapshots

@@ -66,6 +66,10 @@ 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+

69## Contributing

73## Contributing

70

74

71Want to help out fixing bugs or reporting issues?

75Want 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.5",

6+ "version": "1.1.8",

7 "exposed-modules": [

8 "Element",

9 "Element.Input",

src/Element.elm−5

@@ -1203,11 +1203,6 @@ 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−

1211-}

1206-}

1212download :

1207download :

1213 List (Attribute msg)

1208 List (Attribute msg)

src/Element/Input.elm+44−24

@@ -330,6 +330,8 @@ 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+

333-}

335-}

334button :

336button :

335 List (Attribute msg)

337 List (Attribute msg)

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

367

369

368 Just msg ->

370 Just msg ->

369 Events.onClick msg

371 Events.onClick msg

370− :: onEnter msg

372+ :: onKeyLookup

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+ )

371 :: attrs

383 :: attrs

372 )

384 )

373 )

385 )

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

445 ]

457 ]

446 ++ attrs

458 ++ attrs

447 in

459 in

448− applyLabel attributes

460+ applyLabel

449− label

450− (Internal.element

451− Internal.asEl

452− Internal.div

453− [ Internal.Attr <|

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

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

455− , Internal.Attr <|

462+ :: Internal.Attr

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

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

457 if checked then

464 if checked then

458 "true"

465 "true"

459

466

460 else

467 else

461 "false"

468 "false"

469+ )

462− , hiddenLabelAttribute label

470+ :: hiddenLabelAttribute label

471+ :: attributes

472+ )

473+ label

474+ (Internal.element

475+ Internal.asEl

476+ Internal.div

463− , Element.centerY

477+ [ Element.centerY

464 , Element.height Element.fill

478 , Element.height Element.fill

465 , Element.width Element.shrink

479 , Element.width Element.shrink

466 ]

480 ]

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

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

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

700 thumbShadowStyle

714 thumbShadowStyle

701 )

715 )

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

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

703 , Internal.Attr

717 , Internal.Attr

704 (Html.Events.onInput

718 (Html.Events.onInput

705 (\str ->

719 (\str ->

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

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

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

766 ++ [ Element.behindContent <|

780 ++ [ Element.behindContent <|

767 if vertical then

781 if vertical then

768− viewVerticalThumb factor thumbAttributes trackWidth

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

769

783

770 else

784 else

771− viewHorizontalThumb factor thumbAttributes trackHeight

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

772 ]

786 ]

773 )

787 )

774 Element.none

788 Element.none

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

1551

1565

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

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

1553

1567

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

1569+

1554-}

1570-}

1555multiline :

1571multiline :

1556 List (Attribute msg)

1572 List (Attribute msg)

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

2089 Json.field "key" Json.string

2105 Json.field "key" Json.string

2090 |> Json.andThen decode

2106 |> Json.andThen decode

2091 in

2107 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

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

2110+ Internal.Attr <|

2111+ Html.Events.preventDefaultOn "keydown"

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

2093

2113

2094

2114

2095{-| -}

2115{-| -}

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

2185defaultCheckbox checked =

2205defaultCheckbox checked =

2186 Element.el

2206 Element.el

2187 [ Internal.htmlClass "focusable"

2207 [ Internal.htmlClass "focusable"

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

2208+ , Element.width

2209+ (Element.px 14)

2189 , Element.height (Element.px 14)

2210 , Element.height (Element.px 14)

2190 , Font.color white

2211 , Font.color white

2191 , Element.centerY

2212 , Element.centerY

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

2221

2242

2222 else

2243 else

2223 1

2244 1

2224− ]

2245+ , Element.inFront

2225− (if checked then

2226− Element.el

2246+ (Element.el

2227 [ Border.color white

2247 [ Border.color white

2228 , Element.height (Element.px 6)

2248 , Element.height (Element.px 6)

2229 , Element.width (Element.px 9)

2249 , Element.width (Element.px 9)

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

2231 , Element.centerX

2251 , Element.centerX

2232 , Element.centerY

2252 , Element.centerY

2233 , Element.moveUp 1

2253 , Element.moveUp 1

2254+ , Element.transparent (not checked)

2234 , Border.widthEach

2255 , Border.widthEach

2235 { top = 0

2256 { top = 0

2236 , left = 2

2257 , left = 2

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

2239 }

2260 }

2240 ]

2261 ]

2241 Element.none

2262 Element.none

2242−

2263+ )

2243− else

2264+ ]

2244− Element.none

2265+ Element.none

2245− )

src/Element/Region.elm+5−1

@@ -101,7 +101,11 @@ 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+

104−{-| -}

108+-}

105description : String -> Attribute msg

109description : String -> Attribute msg

106description =

110description =

107 Internal.Describe << Internal.Label

111 Internal.Describe << Internal.Label

src/Internal/Model.elm+9−3

@@ -1478,7 +1478,9 @@ 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.

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

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

1482

1484

1483 ( newFlag, newAttrs, newStyle ) =

1485 ( newFlag, newAttrs, newStyle ) =

1484 renderHeight len

1486 renderHeight len

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

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

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

2243 ]

2245 ]

2244 )

2246 )

2247+ , Style

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

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

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

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

2251+ )

2246 (List.filterMap identity

2252 (List.filterMap identity

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

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

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

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

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

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

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

2651 ++ renderedProps

2657 ++ renderedProps

2652 ++ "\n}"

2658 ++ "\n}"

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

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

2654 ++ renderedProps

2660 ++ renderedProps

2655 ++ "\n}"

2661 ++ "\n}"

2656 ]

2662 ]

src/Internal/Style.elm+20−5

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

961 ]

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

963 [ Prop "display" "block"

964+ , Descriptor (dot classes.heightFill)

964− , Child "img"

965+ [ Child "img"

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

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

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

968+ ]

969+ ]

970+ , Descriptor (dot classes.widthFill)

971+ [ Child "img"

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

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

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

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

974+ ]

968 ]

975 ]

969 ]

976 ]

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

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

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

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

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

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

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

1379 -- instead of the expected content size.

1386 -- 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)

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

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

1395+ ]

1381 ]

1396 ]

1382 , Child (dot classes.heightFill)

1397 , Child (dot classes.heightFill)

1383 [ Prop "flex-grow" "100000"

1398 [ Prop "flex-grow" "100000"

tests-rendering/cases/open/LabelledInputAlignRight.elmnew file+28

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

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.elmnew file+46

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

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.elmnew file+63

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

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.elmnew file+19

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

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/Misc/ImageSizing.elm → tests-rendering/cases/resolved/Images/ImageSizing.elmrenamed+7−3

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

1module ImageSizing exposing (main)

2

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

4+-}

5+

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

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

4import Element.Border as Border

7import Element.Border as Border

5import Element.Font as Font

8import Element.Font as Font

6import Html exposing (Html)

9import Html exposing (Html)

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

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

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

12 E.image

15 E.image

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

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

14− E.width E.fill

17+ -- ,

18+ -- E.width E.fill

15− , E.height E.fill

19+ E.height E.fill

16 ]

20 ]

17 -- <| px 500 ]

21 -- <| px 500 ]

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

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

tests-rendering/cases/resolved/Layout/Columns/DistributeHeight.elmnew file+46

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

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.elmnew file+86

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

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.elmnew file+48

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

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/SafariTwo.elm → tests-rendering/cases/resolved/Layout/Columns/SafariTwo.elmrenamed

The content is the same.

tests-rendering/cases/resolved/Layout/SafariColumnBug.elmdeleted−14

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

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− ]