From b7f33bc50c9a289fcf3987bb56025705973b8d39 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 13:57:31 -0700 Subject: [PATCH 1/7] Fix missing label in example --- script/puppeteer-tests.js | 2 +- styleguide-app/Examples/Balloon.elm | 48 +++++++++++++++-------------- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index fac60fe9..fb0f044a 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -71,7 +71,7 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order', 'region'], - 'Balloon': ['color-contrast', 'label'], + 'Balloon': ['color-contrast'], 'Checkbox': ['region'], 'Loading': ['color-contrast'], 'Menu': ['region'], diff --git a/styleguide-app/Examples/Balloon.elm b/styleguide-app/Examples/Balloon.elm index f868ed20..13f1c22a 100644 --- a/styleguide-app/Examples/Balloon.elm +++ b/styleguide-app/Examples/Balloon.elm @@ -12,7 +12,7 @@ import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import EllieLink import Example exposing (Example) -import Html.Styled exposing (Html, fromUnstyled, text) +import Html.Styled exposing (Html, text) import Nri.Ui.Balloon.V1 as Balloon @@ -50,18 +50,27 @@ example = {-| -} type alias State = - { copy : Control String - , attributes : Control (List ( String, Balloon.Attribute )) - } + Control Settings init : State init = - { copy = Control.string "Hello, world!" - , attributes = controlAttributes + controlSettings + + +type alias Settings = + { copy : String + , attributes : List ( String, Balloon.Attribute ) } +controlSettings : Control Settings +controlSettings = + Control.record Settings + |> Control.field "copy" (Control.string "Hello, world!") + |> Control.field "attributes" controlAttributes + + controlAttributes : Control (List ( String, Balloon.Attribute )) controlAttributes = ControlExtra.list @@ -117,20 +126,14 @@ paddingOptions = {-| -} type Msg - = SetCopy (Control String) - | SetAttributes (Control (List ( String, Balloon.Attribute ))) + = SetAttributes (Control Settings) update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of - SetCopy copy -> - ( { state | copy = copy } - , Cmd.none - ) - SetAttributes attributes -> - ( { state | attributes = attributes } + ( attributes , Cmd.none ) @@ -138,22 +141,21 @@ update msg state = view : EllieLink.Config -> State -> List (Html Msg) view ellieLinkConfig state = let - copy = - Control.currentValue state.copy + currentValue = + Control.currentValue state in - [ Control.view SetCopy state.copy |> fromUnstyled - , ControlView.view + [ ControlView.view { ellieLinkConfig = ellieLinkConfig , name = moduleName , version = version , update = SetAttributes - , settings = state.attributes + , settings = state , toExampleCode = - \attrs -> + \{ copy, attributes } -> [ { sectionName = "Balloon" , code = "Balloon.balloon\n [ " - ++ String.join "\n , " (List.map Tuple.first attrs) + ++ String.join "\n , " (List.map Tuple.first attributes) ++ "\n ] " ++ "\n (text \"" ++ copy @@ -162,6 +164,6 @@ view ellieLinkConfig state = ] } , Balloon.balloon - (List.map Tuple.second (Control.currentValue state.attributes)) - (text copy) + (List.map Tuple.second currentValue.attributes) + (text currentValue.copy) ] From 47e57c559496a248b220a4be3eaf718f02e9c1b1 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 14:01:28 -0700 Subject: [PATCH 2/7] Fix Balloon color contrast failure by switching to greenDarkest bg color --- script/puppeteer-tests.js | 1 - src/Nri/Ui/Balloon/V1.elm | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index fb0f044a..91a63aa9 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -71,7 +71,6 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order', 'region'], - 'Balloon': ['color-contrast'], 'Checkbox': ['region'], 'Loading': ['color-contrast'], 'Menu': ['region'], diff --git a/src/Nri/Ui/Balloon/V1.elm b/src/Nri/Ui/Balloon/V1.elm index bda78acf..f6ac2a65 100644 --- a/src/Nri/Ui/Balloon/V1.elm +++ b/src/Nri/Ui/Balloon/V1.elm @@ -326,8 +326,8 @@ balloonTheme theme = Green -> batch - [ backgroundColor Colors.greenDark - , border3 (px 1) solid Colors.greenDark + [ backgroundColor Colors.greenDarkest + , border3 (px 1) solid Colors.greenDarkest , Fonts.baseFont , fontSize (px 15) , color Colors.white @@ -439,8 +439,8 @@ arrowTheme theme = Green -> batch - [ backgroundColor Colors.greenDark - , border3 (px 1) solid Colors.greenDark + [ backgroundColor Colors.greenDarkest + , border3 (px 1) solid Colors.greenDarkest , Fonts.baseFont , fontSize (px 15) , color Colors.white From b642b14b99f8eb2bb4d4843e688819ab36828ff2 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 14:16:10 -0700 Subject: [PATCH 3/7] Fix missing region around keyboard support notes --- script/puppeteer-tests.js | 10 ++-------- styleguide-app/KeyboardSupport.elm | 2 ++ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index 91a63aa9..9db83747 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -70,18 +70,12 @@ describe('UI tests', function () { } const skippedRules = { - 'Accordion': ['heading-order', 'region'], - 'Checkbox': ['region'], + 'Accordion': ['heading-order'], 'Loading': ['color-contrast'], - 'Menu': ['region'], - 'Modal': ['region'], - 'Message': ['region'], 'Page': ['color-contrast', 'select-name'], - 'RadioButton': ['duplicate-id', 'region'], - 'SegmentedControl': ['region'], + 'RadioButton': ['duplicate-id'], 'Select': ['label'], 'Switch': ['aria-allowed-attr'], - 'Tabs': ['region'], } const specialProcessing = { diff --git a/styleguide-app/KeyboardSupport.elm b/styleguide-app/KeyboardSupport.elm index a6ac7b93..aa0ac3f5 100644 --- a/styleguide-app/KeyboardSupport.elm +++ b/styleguide-app/KeyboardSupport.elm @@ -39,6 +39,8 @@ view keyboardSupport = ] (List.map viewKeyboardActions keyboardSupport) ] + |> List.singleton + |> aside [] viewKeyboardActions : KeyboardSupport -> Html msg From ffde04063d9c58ddfa0661c1d902ceab1b3faf12 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 14:16:50 -0700 Subject: [PATCH 4/7] Remove color contrast failure from loading --- script/puppeteer-tests.js | 1 - 1 file changed, 1 deletion(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index 9db83747..98c08cf0 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -71,7 +71,6 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order'], - 'Loading': ['color-contrast'], 'Page': ['color-contrast', 'select-name'], 'RadioButton': ['duplicate-id'], 'Select': ['label'], From 48d80f88fce2159e347a4833d160939a6f3e4c6d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 14:19:21 -0700 Subject: [PATCH 5/7] Fix color contrast issue on Page --- script/puppeteer-tests.js | 2 +- src/Nri/Ui/Page/V3.elm | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index 98c08cf0..b63139a0 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -71,7 +71,7 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order'], - 'Page': ['color-contrast', 'select-name'], + 'Page': ['select-name'], 'RadioButton': ['duplicate-id'], 'Select': ['label'], 'Switch': ['aria-allowed-attr'], diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm index ef0c98ae..d2aa85b3 100644 --- a/src/Nri/Ui/Page/V3.elm +++ b/src/Nri/Ui/Page/V3.elm @@ -17,6 +17,7 @@ import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes import Http import Nri.Ui.Button.V10 as Button +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Html.V3 exposing (viewIf) @@ -263,7 +264,7 @@ viewDetails detailsForEngineers = ] [] [ Html.styled Html.summary - [ color (hex "8F8F8F") ] + [ color Colors.gray45 ] [] [ Html.text "Details for NoRedInk engineers" ] , Html.styled Html.code From 3936ed26dc869d2f5cd1d335efd462f1a82841d6 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 14:24:32 -0700 Subject: [PATCH 6/7] Fix missing select for Page example --- script/puppeteer-tests.js | 1 - styleguide-app/Examples/Page.elm | 9 ++++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index b63139a0..9d3fd1ac 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -71,7 +71,6 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order'], - 'Page': ['select-name'], 'RadioButton': ['duplicate-id'], 'Select': ['label'], 'Switch': ['aria-allowed-attr'], diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm index fb0c1ab8..1e4e9a5b 100644 --- a/styleguide-app/Examples/Page.elm +++ b/styleguide-app/Examples/Page.elm @@ -54,7 +54,14 @@ example = , version = 3 , categories = [ Messaging ] , keyboardSupport = [] - , state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText } + , state = + { httpError = + Control.record identity + |> Control.field "httpError" CommonControls.httpError + , recoveryText = + Control.record identity + |> Control.field "recoveryText" initRecoveryText + } , update = update , subscriptions = \_ -> Sub.none , preview = From b920840d50f03085ac4e3bdd666660ded630fa36 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 14 Apr 2022 14:26:21 -0700 Subject: [PATCH 7/7] Fix Select missing label --- script/puppeteer-tests.js | 1 - styleguide-app/Examples/Select.elm | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index 9d3fd1ac..fb2300ad 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -72,7 +72,6 @@ describe('UI tests', function () { const skippedRules = { 'Accordion': ['heading-order'], 'RadioButton': ['duplicate-id'], - 'Select': ['label'], 'Switch': ['aria-allowed-attr'], } diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm index 41a413b9..1242be93 100644 --- a/styleguide-app/Examples/Select.elm +++ b/styleguide-app/Examples/Select.elm @@ -85,7 +85,7 @@ type alias State = {-| -} init : State init = - { label = Control.string "Tortilla Selector" + { label = Control.record identity |> Control.field "label" (Control.string "Tortilla Selector") , attributes = initControls }