master..8cb4879 · typeable/elm-ui

git.iko.soy/typeable/elm-ui

17 files changed+56−426

unifiedsplit

README.md−4

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

6666

6767The 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.

6868

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−

7369## Contributing

7470

7571Want to help out fixing bugs or reporting issues?

elm.json+1−1

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

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

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

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

6− "version": "1.1.8",

6+ "version": "1.1.5",

77 "exposed-modules": [

88 "Element",

99 "Element.Input",

src/Element.elm+5

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

12031203

12041204

12051205{-| 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+

12061211-}

12071212download :

12081213 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

330330 , label = text "My Button"

331331 }

332332

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−

335333-}

336334button :

337335 List (Attribute msg)

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

369367

370368 Just msg ->

371369 Events.onClick 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− )

370+ :: onEnter msg

383371 :: attrs

384372 )

385373 )

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

457445 ]

458446 ++ attrs

459447 in

460− applyLabel

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

462− :: Internal.Attr

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

448+ applyLabel attributes

449+ label

450+ (Internal.element

451+ Internal.asEl

452+ Internal.div

453+ [ Internal.Attr <|

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

455+ , Internal.Attr <|

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

464457 if checked then

465458 "true"

466459

467460 else

468461 "false"

469− )

470− :: hiddenLabelAttribute label

471− :: attributes

472− )

473− label

474− (Internal.element

475− Internal.asEl

476− Internal.div

477− [ Element.centerY

462+ , hiddenLabelAttribute label

463+ , Element.centerY

478464 , Element.height Element.fill

479465 , Element.width Element.shrink

480466 ]

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

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

714700 thumbShadowStyle

715701 )

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

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

717703 , Internal.Attr

718704 (Html.Events.onInput

719705 (\str ->

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

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

780766 ++ [ Element.behindContent <|

781767 if vertical then

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

768+ viewVerticalThumb factor thumbAttributes trackWidth

783769

784770 else

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

771+ viewHorizontalThumb factor thumbAttributes trackHeight

786772 ]

787773 )

788774 Element.none

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

15651551

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

15671553

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

1569−

15701554-}

15711555multiline :

15721556 List (Attribute msg)

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

21052089 Json.field "key" Json.string

21062090 |> Json.andThen decode

21072091 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 <|

2111− Html.Events.preventDefaultOn "keydown"

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

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

21132093

21142094

21152095{-| -}

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

22052185defaultCheckbox checked =

22062186 Element.el

22072187 [ Internal.htmlClass "focusable"

2208− , Element.width

2209− (Element.px 14)

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

22102189 , Element.height (Element.px 14)

22112190 , Font.color white

22122191 , Element.centerY

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

22422221

22432222 else

22442223 1

2245− , Element.inFront

2246− (Element.el

2224+ ]

2225+ (if checked then

2226+ Element.el

22472227 [ Border.color white

22482228 , Element.height (Element.px 6)

22492229 , Element.width (Element.px 9)

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

22512231 , Element.centerX

22522232 , Element.centerY

22532233 , Element.moveUp 1

2254− , Element.transparent (not checked)

22552234 , Border.widthEach

22562235 { top = 0

22572236 , left = 2

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

22602239 }

22612240 ]

22622241 Element.none

2263− )

2264− ]

2265− Element.none

2242+

2243+ else

2244+ Element.none

2245+ )

src/Element/Region.elm+1−5

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

101101 Internal.Describe LivePolite

102102

103103

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+{-| -}

109105description : String -> Attribute msg

110106description =

111107 Internal.Describe << Internal.Label

src/Internal/Model.elm+3−9

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

14781478 Single

14791479 cls

14801480 "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")

14841482

14851483 ( newFlag, newAttrs, newStyle ) =

14861484 renderHeight len

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

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

22452243 ]

22462244 )

2247− , Style

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

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

22522246 (List.filterMap identity

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

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

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

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

26572651 ++ renderedProps

26582652 ++ "\n}"

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

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

26602654 ++ renderedProps

26612655 ++ "\n}"

26622656 ]

src/Internal/Style.elm+5−20

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

961961 ]

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

963963 [ Prop "display" "block"

964− , Descriptor (dot classes.heightFill)

965− [ Child "img"

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

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

968− ]

969− ]

970− , Descriptor (dot classes.widthFill)

971− [ Child "img"

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

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

974− ]

964+ , Child "img"

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

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

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

975968 ]

976969 ]

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

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

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

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

13861379 -- 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"

1395− ]

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

13961381 ]

13971382 , Child (dot classes.heightFill)

13981383 [ 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)

3+import Browser

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

5+import Html exposing (Html)

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 @@

11module ImageSizing exposing (main)

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)

74import Element.Border as Border

85import Element.Font as Font

96import Html exposing (Html)

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

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

1512 E.image

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

17− -- ,

18− -- E.width E.fill

19− E.height E.fill

14+ E.width E.fill

15+ , E.height E.fill

2016 ]

2117 -- <| px 500 ]

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