a3202e2 · typeable/elm-ui

.github/ISSUE_TEMPLATE/bug-unexpected-behavior-report.md+1−1

@@ -8,7 +8,7 @@ about: Capture any unexpected behavior or bugs you've found with this library

8

9If you can, please put together a [Short, Self Contained, Correct, Example](http://sscce.org/) of what you're encountering. It really helps if the example is as succinct as possible.

10

11−Here's a basic template in [ellie](https://ellie-app.com/3fhCyrxjLw3a1) to get you started!

11+Here's a basic template in [ellie](https://www.ellie-app.com/3fhCyrxjLw3a1) to get you started!

12

13**Expected behavior**

14A clear and concise description of what you expected to happen.

.github/workflows/label-issues-from-body.ymlnew file+14

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

1+name: "Label issue from body keyword"

2+on:

3+ issues:

4+ types: [opened, edited]

5+

6+jobs:

7+ test:

8+ runs-on: ubuntu-latest

9+ steps:

10+ - uses: Naturalclar/issue-action@v1.0.0

11+ with:

12+ keywords: '["https://ellie-app.com/"]'

13+ labels: '["has-ellie"]'

14+ github-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/label-issues.yml → .github/workflows/label-issues-from-comments.ymlrenamed+2−3

@@ -1,4 +1,4 @@

1−name: "Set Issue Label"

1+name: "Label issue from comment keyword"

2on:

3 issue_comment:

4 types: [created, edited]

@@ -19,10 +19,9 @@ jobs:

19 github-token: "${{ secrets.GITHUB_TOKEN }}"

20 - uses: Amwam/issue-comment-action@v1.3.1

21 with:

22− keywords: '["#has-ellie"]'

22+ keywords: '["#has-ellie", "https://ellie-app.com/"]'

23 labels: '["has-ellie"]'

24 github-token: "${{ secrets.GITHUB_TOKEN }}"

25−

26 - uses: Amwam/issue-comment-action@v1.3.1

25 - uses: Amwam/issue-comment-action@v1.3.1

27 with:

26 with:

28 keywords: '["#no-ellie"]'

27 keywords: '["#no-ellie"]'

notes/classifying-issues.md+2−2

@@ -19,8 +19,8 @@ If you add a comment to an issue that references a label, that label will be ass

19 - **Has Test** - `#has-test` - Once we have an ellie for the problem, we want a version of that code in the codebase so I can easily take a look.

20 - The thing to do is to open a PR that copies that ellie into the [`tests-rendering/cases/open`](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open) directory. Give it a succinct, human name.

21 - Rename the `Element.*` imports as `Testable.Element.*`

22− - Add a link to the issue, the title of the issue, and the body of the issue to the module comment. [Here's an example](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open/InFrontSize)

22+ - Add a link to the issue, the title of the issue, and the body of the issue to the module comment. [Here's an example](https://github.com/mdgriffith/elm-ui/tree/master/tests-rendering/cases/open/InFrontSize.elm)

23− - Test is compiling - Optionally you can see if the test is compiling by first `cd tests-rendering` and then running `elm make cases/open/{The file}.elm --open --dir=view -- --output=view/elm.js --debug`

23+ - Test is compiling - Optionally you can see if the test is compiling by first `cd tests-rendering` and then running `elm-live cases/open/{The file}.elm --open --dir=view -- --output=view/elm.js --debug`

24 - If it does not compile, flag the issue as `#test-not-compiling`. Don't worry about fixing it unless it's really obvious what needs to happen.

25 - Check if the test passes. Do that by opening `tests-rendering/cases/view/view.html` after running the above compilation. If it says all passes, likely you should flag the issue as `#test-incorrectly-passing`.

26 - If it's failing, you can flag as `#test-failing`

tests-rendering/cases/open/FocusStylePrecedingElements.elmnew file+38

@@ -0,0 +1,38 @@

1+module FocusStylePrecedingElements exposing (main)

2+

3+{-|

4+

5+

6+# `focused` style applied to an element when any element with a lower tab index is focused

7+

8+<https://github.com/mdgriffith/elm-ui/issues/198>

9+

10+When I add a focused attribute, the styles therein are applied not only when

11+the element is focused, but also when any element with a lower tab index is focused.

12+This behaviour is not browser-specific.

13+

14+To reproduce, tab through to the buttons in the Ellie below. As soon as the first

15+button has focus, the third button (which is the only one with a focused attribute)

16+is highlighted as well.

17+

18+I narrowed down the reason for this behaviour to this CSS selector:

19+.s:focus ~ .fc-250-50-50-255-fs:not(.focus)

20+

21+Disabling it produces the correct focus behaviour.

22+

23+-}

24+

25+import Testable.Element exposing (..)

26+import Testable.Element.Font as Font

27+import Testable.Element.Input as Input

28+

29+

30+main =

31+ layout [] <|

32+ column []

33+ [ Input.button [] { onPress = Nothing, label = text "Button" }

34+ , Input.button [] { onPress = Nothing, label = text "Button" }

35+ , Input.button [ focused [ Font.color <| rgb255 250 50 50 ] ] { onPress = Nothing, label = text "Button" }

36+ , Input.button [] { onPress = Nothing, label = text "Button" }

37+ , Input.button [] { onPress = Nothing, label = text "Button" }

38+ ]