Elm UI: 1.0.0

https://ellie-app.com/3n6C2f2JGP3a1

An id is assigned to an Input.text, and shows up both on the placeholder and the input element itself. It should just apply to the input element.

Perhaps user-select: none should be used to prevent this on button elements?

Hi,

I wondered if there were any plans to add more elements for laying out text. In my specific case, I was looking for equivalents of <ol>/<ul>/<li>, but it got me thinking about other elements that aid in accessibility and typography/text layout, such as dl, <time>, <abbr>, <address>, <em>, <strong> etc.

I can't find any mention of anything like this in these issues, sorry if I missed something.

I can't find a way to catch a loading event from an image rendered with elm-ui.
Here is an ellie displaying two images, one with elm-ui and the other with the Html library. The custom handler only works for the second picture.

https://ellie-app.com/3fQjtP4GsPqa1

Expected behavior
it should work for both pictures.

• OS: Ubuntu 16.04
• Browser: Firefox 61.0.1
• elm 0.19
• elm-ui 1.0.0

There are various terms in design that start with el, e.g. the ellipse element in SVG, "elevation" in Material Design, etc. All the other functions and types in elm-ui are clear at the point of use. In the spirit of the "clarity over brevity" rule (borrowed from Swift API Guidelines), I suggest to rename the el element to element or something similar.

Using the latest versions of Safari and Chrome, running on a macbook, Input.search has different styles in the different browsers. Input.text and Input.multiline are unaffected.

Here is an Ellie that displays the issue: https://ellie-app.com/3qPVFzNkymfa1

SSCCE
https://ellie-app.com/3vqX29tHjjva1

Change line 60 from Long to Short to see the layout I was expecting.

Expected behavior
I was expecting that the height of el with fillPortion 10 would be 10x the height of el with fillPortion 1 on the same column., even though they both have contents that overflows but also both have scrollbarY set.

Versions

• OS: OSX
• Browser: Chrome
• Browser Version: 69
• Elm Version: 0.19
• Elm UI Version: 1.0.0

There's a footer but no header region in the Element.Region module.

Is there any good reason for this omission, or can it be added?

Thanks for a great library!

I'm not sure how I'm supposed to "separate" layout and style with elm-ui.

My initial idea was to create a Styles.elm file that exposes styles and do layout in my view.
I don't like the way I'm using List.append to add the alignRight. Any suggestions?
Or are there examples around that show a good way of separating code?

Styles.elm

title =
    [ Font.color (rgb255 0 255 0)
    , Font.size 20
    ]


body =
    [ Background.color (rgb255 40 40 40)
    ]

Main.elm

view : Model -> Browser.Document Msg
view model =
    { title = "gazet "
    , body =
        [ Element.layout Styles.body <|
            Element.row [ padding 10, spacing 7, width fill ]
                [ el Styles.title (text "hello!")
                , el Styles.title (text "hello!")
                , el (List.append [ alignRight ] Styles.title) (text "hello!")
                ]
        ]
    }

Here is an Ellie reproducing the issue: https://ellie-app.com/3vqbQn54jM3a1
As you see, there is a space before HOWEVER that should not be there.

This is using Elm 0.19 and Elm-UI 1.0.0 on both Firefox 62.0 and Chrome 69.0.3497.100 for Ubuntu 18.04.

There is a discrepancy between the docs and the implementation for use of Element.modular. The example in the docs is

scaled =
    Scale.modular 16 1.25

Font.size (scaled 4) -- 16 * 1.25 ^ (4 - 1) results in 31.25

But this fails as Font.size expects an Int rather than a Float.

To define a @font-face in CSS with a modern format like woff2, we not only need an url() but also an additional format('woff2') like so

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.woff2') format('woff2');
}

Current behavior

external :
    { url : String
    , name : String
    }
    -> Font

Expected behavior

external :
    { url : String
    , format : Maybe String
    , name : String
    }
    -> Font

... and Font should be extended to handle this as well.

Versions

• OS: Windows 8.1
• Browsers: Chrome 64, Firefox 62
• Elm Version: 0.19
• Elm UI Version: 1.0.0

Example
I've got an example here where 3 elements are sized using fillPortion 1, the middle element being an image. It works ok! But if you change the image fillportion to 2, the image displays at its full resolution.

https://ellie-app.com/3zztzKkg8X4a1

Expected behavior
I expected the image to still be in between the two other elements, but just a little larger - taking up 1/2 the width of the window rather than 1/3.

Versions

• OS: nixos
• Browser: firefox, chrome
• Browser Version: ff62.0.03, chromium Version 69.0.3497.81 (Developer Build) (64-bit)
• Elm Version 0.19.0
• Elm UI Version 1.1.0

SSCCE: ellie

This code:

Element.row
        [ Element.width Element.fill ]
        [ Element.row [ Element.centerX ]
            [ Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]
            , Element.paragraph [ Element.width Element.shrink ] [ Element.text "Hello world" ]
            ]
        ]

produces a row which is unexpected wide. It seems that the width of the row correspond to the expected width in the case where the two paragraphs didn't have any line-breaks.
The row is only too wide when given the attribute Element.centerX.
This only seems to happend when the row with centerX is inside a row with width fill.
The following ellie compares the example with and without Element.centerX.

Versions

• chromium version 69
• elm 0.19
• elm-ui 1.0

I have encountered this bug while upgrading an application from Elm 0.18 with stylish-elpehants 6.0.2 to Elm 0.19 with elm-ui 1.0.0.

When the border shadow offset property is a float that's value has any number after the "." that isn't zero, it doesn't display the shadow at all.

Example

Expected behavior
The expected behavior is for the shadow to display when a float value is given for the offset

Versions

• OS: [macOS Mojave]
• Browser [chrome]
• Browser Version [Version 69.0.3497.100 (Official Build) (64-bit)]
• Elm Version [0.19]
• Elm UI Version [1.0.0]

Why does the sample declare myRowOfStuff, when it's not used in main ?

Ellie: https://ellie-app.com/3qQ5nSvWmHja1

I'm trying to create two columns that each space their contents evenly across the entire page. I want each column to be on opposite side of the screen. The right column can either be rightAligned, or space contents evenly, but not both. If one re-arranges the properties, it seems that whatever comes last takes precedence.

Expected behavior
That the right column is at the right side of the page, and that the contents are spaced evenly in the vertical direction.

Versions

• OS: Mac OS X 10.11
• Browser: Safari 12
• Elm Version: 0.19
• Elm UI Version: 1.0.0

Un-expected behavior is that a transparent button still issues an event if you click on it. Easy enough to work around, but not what's indicated in the docs.

https://ellie-app.com/3CFndNgGLWya1

Expected behavior

According to the docs transparent elements ought to ignore mouse events.

Versions

• OS: nixos
• Browser: firefox
• Browser Version: 62.0.03
• Elm Version 0.19.0
• Elm UI Version 1.1.0

Really missing the prop function from style-elements. Has this been replaced by anything else? Very many things become impossible without it!

Elm 0.19 has special way of handeling links. This makes it so that if you want a [ href "download", download "" ] [ Html.text "Will download" ] to work, it should have file name set for its download attribute.

It's would be nice if Elm-ui would also support setting name for it's Element.download element.

Related to ELM issue - elm/html#175

There is currently no way to set the variant of a font.

This is important to make content look right for the specific situation it is in (tabular numbers, proper small caps, slashed 0s etc).

Sidenote: There is also a lower level implementation that allows more features to be used, but is a lot more cryptic called font-feature-settings

I would be happy to try my hand on a PR, if you want me to.

Elm-UI v1.0.0

• A (a fixed header) is "inFront" of B (the page content)
• Within B is an element C that has D "inFront" of it
• The display order is D > A > C > B instead of A > D > C > B

Full Example:
https://ellie-app.com/3hQD9cXMmdWa1

Related to #6

I have a column with centerX and scrollbars. It overflows. If I take away centerX, it doesn’t overflow.

Here's an example in Ellie. You can see the scrollbar/overflow behavior change when you click the Toggle button at the top of the column of numbers, which controls whether centerX is applied or not.

https://ellie-app.com/3sm9w3pJFhja1

• OS: Mac OS X
• Browser: Chrome, Safari
• Browser Version: Chrome 69.0.3497.100, Safari Version 12.0 (13606.2.11)
• Elm Version: 0.19
• Elm UI Version: 1.0.0

I believe it is impossible without the old screen function to create a fixed overlay over a page that extends beyond the viewport.

Ex: say you are making a news feed with a scrollable list of posts. When a user clicks on an image, you want to create a light box modal displaying a larger view of that image.

Afaik, your options are either to

1. fill height above the posts element, which will create a gigantic overlay with a probably incorrect center
2. subscribe to the height of the screen, store that value in your model, and set the height of the modal to that value. This is also problematic, as the user can scroll around the modal.

Proposed solution: bring back the screen function

Placeholder text appears above other things (like a semitransparent modal overlay, or dropdown menu text). Even trying to set z-indexes manually (via htmlAttribute) seems to have no effect.

https://ellie-app.com/3cMc65LsWJ4a1

Hey,

This might be a dumb question, but is there a way to not define onChange (or disable it) for a checkbox ?
I have a row with a few things, including a checkbox. When the user clicks anywhere on the row it toggles the checkbox, for that I have an onClick on the row that works just fine, the issue is that it's triggering both the onClick for the row and the onChange for the checkbox when the user clicks on the checkbox directly. It's not a huge issue, but it does end up saving the status twice with the server, which is a bit silly.

Thanks

Focus and blur currently don't work and require a manual work around by going into JS.

These should work out of the box.

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom

Hello, browsing the current package documentation (1.0.0) we still see several references to style-elements instead of elm-ui. Very minor, but it could be confusing for new folks!

Would it be worth mentioning that Element.rotate uses radians, as opposed to the alternatives?

Originally brought up in the Slack channel.

SSCCE

https://ellie-app.com/3Fsk9QQ9D6za1

module Main exposing (main)

import Element as E
import Element.Background as BG

myelement num =
    E.el [ E.centerX
         , E.width (E.px 100)
         , E.height (E.px 100)
         , BG.color (E.rgb 0 0.5 0.5)
        -- , E.explain Debug.todo
         ] (E.text (String.fromInt num))


view =
    E.wrappedRow [ E.spacing 10
                 , E.width E.fill
                -- , E.explain Debug.todo
                 , E.centerX]
        [ myelement 1
        , myelement 2
        , myelement 3
        , myelement 4
        , myelement 5
        , myelement 6
        ]

main =
    E.layout [] view

Expected behavior

Expected that both the first and second row remain centered when wrapping occurs. What actually happens is that the first row becomes right aligned and the second row becomes left aligned.

Versions

• OS: Windows 7
• Browser Firefox Dev Edition
• Browser Version 63.0b14
• Elm Version 0.19
• Elm UI Version 0.1.1

Diagnosis

Currently the way horizontal centering is achieved on the wrapped row is by adding property flex-grow: 1 to the first and last elements of the row. This strategy breaks down when the row is wrapped since the first element of the second row does not in general have flex-grow: 1

Temporary workarounds

The following Ellie has an attempt to add styles via Element.htmlAttribute but it fails because the css is added to the wrong elements: https://ellie-app.com/3FvRsWjVqrJa1

module Main exposing (main)

import Element as E
import Element.Background as BG
import Html.Attributes as HA

myelement attr num =
    E.el (attr ++ [ E.centerX
         , E.width (E.px 100)
         , E.height (E.px 100)
         , BG.color (E.rgb 0 0.5 0.5)
        -- , E.explain Debug.todo
         ]) (E.text (String.fromInt num))


view =
    E.wrappedRow [ E.spacing 10
                 , E.width E.fill
                -- , E.explain Debug.todo
                 , E.centerX
                 , E.htmlAttribute (HA.style "justify-content" "center")]
        [ myelement [E.htmlAttribute (HA.style "flex-grow" "0")] 1
        , myelement [] 2
        , myelement [] 3
        , myelement [] 4
        , myelement [] 5
        , myelement [E.htmlAttribute (HA.style "flex-grow" "0")] 6
        ]

main =
    E.layout [] view

The following is a workaround that works by adding css manually: https://ellie-app.com/3Fw9nkQX29ya1
It is the same as the SSCCE but with the following styles added manually (untested):

    .s.r > s:first-of-type.accx { flex-grow: 0 !important; }
    .s.r > s:last-of-type.accx { flex-grow: 0 !important; }
    .cx > .wrp { justify-content: center !important; }

I haven't tested how this would affect other content rendered by elm-ui

I think it would gain a lot of time for everybody to have an "official" (linked from the README and in the new issue template) way of creating SSCCE for elm ui.

We could create some templates in Ellie.

https://ellie-app.com/3fhCyrxjLw3a1

Quoting from https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element :

    [ el
        [ alignLeft
        , padding 5
        , Font.lineHeight 1
        ]
        (text "S")
    , text "o much text ...."
    ]

Should Font.lineHeight be spacing now?

Hi! Newbie here. I was wondering how can I get the height of the layout to fill the entire space of the body. This works in Ellie, of course, but how can I get the same behaviour for the root element of my site?

main =
    Element.layout [ height fill ] -- this only doesn't work :(
        myRowOfStuff

Thanks!

SSCCE
https://ellie-app.com/3jVVmmqcgTRa1

Expected behavior
I expect the textarea to be the same width as the black bar.

Versions

• OS: Linux
• Browser: Chrome 69, Firefox 63
• Elm Version: 19
• Elm UI Version: 1.0.0

SSCCE: https://ellie-app.com/3gtX5yDcg8La1

Specifying both Border.Glow and Border.innerGlow yields only the glow listed second. I would expect both glows to be present.

If there are any expected mutually exclusive attributes (e.g. dashed and dotted borders), they should be documented. A dashed glow doesn't seem to work, not that it's well-defined anyway.

macOS High Sierra, Safari 11.1.2, Elm 0.19, Elm UI 1.0.0

This is an issue reported by Leif Battermann in the Slack channel. SSCCE:

https://ellie-app.com/3DytzyCwXvga1

Expected behavior
The slider should render below the modal and not be accessible while the modal is present.

Versions

• OS: Windows 7
• Firefox Developer Edition
• Browser Version: 63.0b14
• Elm Version 0.19
• Elm UI Version 1.1.0

Workaround
The following ellie shows how to work around the issue:

https://ellie-app.com/3DBC5vydSxxa1

It involves rendering an Element.column with the modal as an Element.inFront and rendering the slider as a Element.row within. The z-index of the modal is manually set to 20.

Additional Research
Removing the z-index:10 from the input[type=range] reset does not work because it makes the slider non-functional in all cases.

The text option of a multiline input has unintuitive behavior. It can set the initial value of the input, but changing it doesn't update the input text. I use Element.Keyed as in the case below to update multiline input text. (Changing the key creates a new element with the provided text value.)

In this example, there are two inputs, each of which has its text field set by the same value - the model's text field. The left input is a multiline and the right is a multiline wrapped in a keyed element.

I'd expect the displayed text in each input to match it's text field, but an input only updates as long as it hasn't yet been typed into.

If you type into each input, then click the Update text and key button, the left input will not update, and the right input will update, since it is keyed and the key has just changed.

module Main exposing (main)

import Browser
import Debug
import Element exposing (..)
import Element.Background as Background
import Element.Input as Input
import Element.Keyed as Keyed


main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }


init =
    { text = "initial text"
    , key = "initial key"
    }


type Msg
    = SetText String
    | UpdateInput


update msg model =
    case msg of
        SetText string ->
            { model | text = string }

        UpdateInput ->
            { model
                | text = "updated text"
                , key = "updated key"
            }


options string =
    { onChange = SetText
    , text = string
    , placeholder = Just (Input.placeholder [] (text ""))
    , label = Input.labelAbove [] none
    , spellcheck = False
    }


view model =
    Element.layout [ width fill, height fill ] <|
        column [ width fill ]
            [ row [ width fill, height fill ]
                [ el [ width fill ]
                    (Input.multiline [] (options model.text))
                , Keyed.el [ width fill ]
                    ( model.key, Input.multiline [] (options model.text) )
                ]
            , Input.button
                [ width fill
                , paddingXY 10 10
                , Background.color (rgba 0 0 0 0.1)
                ]
                { onPress = Just UpdateInput
                , label = text "Update text and key"
                }
            , el [ centerX, padding 50 ] (text (Debug.toString model))
            ]

SSCCE: https://ellie-app.com/3zyY5PfnbG8a1

Expected behavior

Only one element can have focus at a time. So only one element should be decorated with Element.focused decorations at a time.

Actual behaviour

Clicking (focusing) a button will render that button and all following buttons as focused.

Versions

• OS: OSX 10.13.6
• Browser : verified in Safari 12.0 and Firefox 62.0.3, not yet tested elsewere
• Elm Version 19
• Elm UI Version 1.1.0

I just saw the excellent presentation you did at elm-conf, and I noted you were using alignLeft. I've worked on projects that had to support both left-to-right languages (english, etc.) and right-to-left (RTL) languages (hebrew, etc.), with CSS rules that could be generated to match either type of locale and would mirror the layout depending on the language. But for doing that, names like "left" and "right" are misleading, because they're only true for one type of locale. (For reference, Apple uses the names "leading" and "trailing" instead when making apps on iOS)

Do you think that elm-ui could support mirroring like this in the future, to make it easy to support both LTR and RTL locales with the same application?

And just to be clear, I'm merely curious right now; I'm not in the process of deciding to use elm-ui based on RTL support or anything like that.

To help with consistency, we created a new color package.

https://package.elm-lang.org/packages/avh4/elm-color/latest/Color

Elm-UI is a good candidate to use that new package.

There are two solutions:

1. Use the new Color type and the remove custom Color type from elm-ui.
2. Keep the elm-ui own Color type and create constructors that accept the new Color type.

I know 2. is needed to help elm-ui optimize (by keeping css string maybe) but I think the drawback of having multiple color type is too high and that 1. should be preferred.

Welcome!

SSCCE: https://ellie-app.com/3BzWHBgKGVwa1

Expected behavior
It's impossible to have more than one shadow, even of different types

Versions

• OS: Linux
• Browser Chromium
• Browser Version 69
• Elm Version 0.19.0
• Elm UI Version 1.1.0

The row that contains two scrollable columns needs to have clip and flex-shrink: 1 applied.

https://ellie-app.com/3fPGLp9mT3ma1

Versions

• Elm - 0.19
• elm-ui - 1.0.0

There's already a library for elm called elm-ui that has over 700 stars, this makes it very confusing as google picks up that library over yours. Why would you use a name that's already taken?

Element.textColumn appears to have a minimum width of 500px and maximum width of 750px that can't be overridden. Is there a reason for this as it prevents use for a Phone? Thanks.

SSCCE

https://ellie-app.com/3BpT5QZwypCa1

Expected behavior
I thought the link would remain in the paragraph in both cases, but in one it appears on a line by itself.

Versions

• OS: nixos
• Browser: firefox
• Browser Version: 62.0.03
• Elm Version 0.19.0
• Elm UI Version 1.1.0

Here's a minimal example showing a multiline element and an el, both using the same attributes. Both are set to height fill, but the multiline on the left doesn't fill the height of the parent, while the el on the right does.

module Main exposing (Msg(..), attributes, main, myText, options)

import Element exposing (..)
import Element.Input as Input



-- Attributes are used for both el and multiline input.


attributes =
    [ width fill, height fill, explain Debug.todo ]


myText =
    "Line 1\n\n\n\nLine 5"


options =
    { onChange = \string -> NoMsg
    , text = myText
    , placeholder = Just (Input.placeholder [] (text ""))
    , label = Input.labelAbove [] none
    , spellcheck = False
    }


main =
    Element.layout [ width fill, height fill ] <|
        row [ width fill, height fill ]
            [ Input.multiline attributes options
            , el attributes (text myText)
            ]


type Msg
    = NoMsg

They're definitely a must have for modern mobile development when making sliding navigation menus or animated burger icons.

https://ellie-app.com/3qXgY6XGw4ha1

A table is rendered backwards which results in weird focus behavior.

SSCCE: https://ellie-app.com/3B4HGWdB2gqa1

Expected behavior

Preformatted texts in Element.paragraph should be rendered as is, when style "white-space" "pre-wrap" is given.
I'm using this for (obviously) showing preformatted texts given by end users as is, respecting newlines and other whitespaces.

I recon this was working in elm-ui 1.0.0 (probably), but not working in 1.1.0.

Currently texts presented via Element.text are wrapped in <div>s which have display: inline; white-space: normal; style attached. This should be the culprit.
Although I suspect this is introduced for some other purposes, thus I cannot tell just removing this solves the problem or not.

As an alternative path, adding some special attribute so that preformatted texts can be rendered in paragraph would be cool, too.

Versions

• OS: Windows 10
• Chrome 69.0.3497.100
• Elm 0.19
• Elm UI Version 1.1.0