From 0c41188752a4143c077e919b79b2071d1be3d836 Mon Sep 17 00:00:00 2001 From: Tessa Kelly <tessakkelly@gmail.com> Date: Tue, 22 Mar 2022 09:11:43 -0700 Subject: [PATCH 1/5] Adds generated code to disclosure --- .../Examples/DisclosureIndicator.elm | 69 +++++++++++++++---- 1 file changed, 56 insertions(+), 13 deletions(-) diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index 9f8273a3..55aeece1 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -7,7 +7,9 @@ module Examples.DisclosureIndicator exposing (Msg, State, example) -} import Category exposing (Category(..)) -import Css +import Css exposing (Style) +import Debug.Control as Control exposing (Control) +import Debug.Control.View as ControlView import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes exposing (css) @@ -16,13 +18,6 @@ import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator import Nri.Ui.Text.V6 as Text -{-| -} -type alias State = - { largeState : Bool - , mediumState : Bool - } - - {-| -} example : Example State Msg example = @@ -42,6 +37,28 @@ example = , view = \state -> [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ] + , ControlView.view + { update = UpdateSettings + , settings = state.settings + , toExampleCode = + \settings -> + let + toCode viewName = + "DisclosureIndicator." + ++ viewName + ++ " " + ++ Tuple.first settings.css + ++ " " + ++ Tuple.first settings.isOpen + in + [ { sectionName = "Large" + , code = toCode "large" + } + , { sectionName = "medium" + , code = toCode "medium" + } + ] + } , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ] [ Button.button "Toggle large indicator" [ Button.onClick ToggleLarge, Button.small, Button.secondary ] @@ -61,16 +78,39 @@ example = {-| -} -init : State -init = - { largeState = False - , mediumState = False +type alias State = + { settings : Control Settings + , largeState : Bool + , mediumState : Bool } +{-| -} +init : State +init = + { settings = initSettings + , largeState = False + , mediumState = False + } + + +type alias Settings = + { css : ( String, List Style ) + , isOpen : ( String, Bool ) + } + + +initSettings : Control Settings +initSettings = + Control.record Settings + |> Control.field "css" (Control.value ( "[]", [] )) + |> Control.field "isOpen" (Control.value ( "False", False )) + + {-| -} type Msg - = ToggleLarge + = UpdateSettings (Control Settings) + | ToggleLarge | ToggleMedium @@ -78,6 +118,9 @@ type Msg update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of + UpdateSettings settings -> + ( { state | settings = settings }, Cmd.none ) + ToggleLarge -> ( { state | largeState = not state.largeState }, Cmd.none ) From 615ef0cfc472bb8e10aa4c2da209d4a68a13b25c Mon Sep 17 00:00:00 2001 From: Tessa Kelly <tessakkelly@gmail.com> Date: Tue, 22 Mar 2022 09:15:40 -0700 Subject: [PATCH 2/5] Use Control for state, rather than custom modeling --- styleguide-app/Debug/Control/Extra.elm | 18 ++++++++++ .../Examples/DisclosureIndicator.elm | 33 +++++++------------ 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/styleguide-app/Debug/Control/Extra.elm b/styleguide-app/Debug/Control/Extra.elm index 9600b409..c6bfd846 100644 --- a/styleguide-app/Debug/Control/Extra.elm +++ b/styleguide-app/Debug/Control/Extra.elm @@ -1,12 +1,14 @@ module Debug.Control.Extra exposing ( float, int , list, listItem, optionalListItem, optionalListItemDefaultChecked, optionalBoolListItem + , bool ) {-| @docs float, int @docs list, listItem, optionalListItem, optionalListItemDefaultChecked, optionalBoolListItem +@docs bool -} @@ -86,3 +88,19 @@ optionalBoolListItem name f accumulator = (Control.bool False) ) (Control.map (++) accumulator) + + +{-| -} +bool : Bool -> Control ( String, Bool ) +bool default = + Control.map + (\val -> + ( if val then + "True" + + else + "False" + , val + ) + ) + (Control.bool default) diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index 55aeece1..c335d84f 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -9,6 +9,7 @@ module Examples.DisclosureIndicator exposing (Msg, State, example) import Category exposing (Category(..)) import Css exposing (Style) import Debug.Control as Control exposing (Control) +import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import Example exposing (Example) import Html.Styled as Html @@ -36,6 +37,10 @@ example = ] , view = \state -> + let + attributes = + Control.currentValue state.settings + in [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ] , ControlView.view { update = UpdateSettings @@ -59,18 +64,16 @@ example = } ] } - , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ] - [ Button.button "Toggle large indicator" - [ Button.onClick ToggleLarge, Button.small, Button.secondary ] - , Button.button "Toggle medium indicator" - [ Button.onClick ToggleMedium, Button.small, Button.secondary ] - ] , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] - [ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState + [ DisclosureIndicator.large + [ Css.marginRight (Css.px 10) ] + (Tuple.second attributes.isOpen) , Html.text "I'm a 17px caret icon." ] , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] - [ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState + [ DisclosureIndicator.medium + [ Css.paddingRight (Css.px 8) ] + (Tuple.second attributes.isOpen) , Html.text "I'm a 15px caret icon." ] ] @@ -80,8 +83,6 @@ example = {-| -} type alias State = { settings : Control Settings - , largeState : Bool - , mediumState : Bool } @@ -89,8 +90,6 @@ type alias State = init : State init = { settings = initSettings - , largeState = False - , mediumState = False } @@ -104,14 +103,12 @@ initSettings : Control Settings initSettings = Control.record Settings |> Control.field "css" (Control.value ( "[]", [] )) - |> Control.field "isOpen" (Control.value ( "False", False )) + |> Control.field "isOpen" (ControlExtra.bool False) {-| -} type Msg = UpdateSettings (Control Settings) - | ToggleLarge - | ToggleMedium {-| -} @@ -120,9 +117,3 @@ update msg state = case msg of UpdateSettings settings -> ( { state | settings = settings }, Cmd.none ) - - ToggleLarge -> - ( { state | largeState = not state.largeState }, Cmd.none ) - - ToggleMedium -> - ( { state | mediumState = not state.mediumState }, Cmd.none ) From 2e6b1e207f8f571cf63525a4e7a8664f51140237 Mon Sep 17 00:00:00 2001 From: Tessa Kelly <tessakkelly@gmail.com> Date: Tue, 22 Mar 2022 09:20:49 -0700 Subject: [PATCH 3/5] Support css styles --- styleguide-app/Examples/DisclosureIndicator.elm | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index c335d84f..3a978bed 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -66,13 +66,13 @@ example = } , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] [ DisclosureIndicator.large - [ Css.marginRight (Css.px 10) ] + (Tuple.second attributes.css) (Tuple.second attributes.isOpen) , Html.text "I'm a 17px caret icon." ] , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] [ DisclosureIndicator.medium - [ Css.paddingRight (Css.px 8) ] + (Tuple.second attributes.css) (Tuple.second attributes.isOpen) , Html.text "I'm a 15px caret icon." ] @@ -102,7 +102,17 @@ type alias Settings = initSettings : Control Settings initSettings = Control.record Settings - |> Control.field "css" (Control.value ( "[]", [] )) + |> Control.field "css" + (Control.choice + [ ( "[ Css.marginRight (Css.px 8) ]" + , Control.value + ( "[ Css.marginRight (Css.px 8) ]" + , [ Css.marginRight (Css.px 8) ] + ) + ) + , ( "[]", Control.value ( "[]", [] ) ) + ] + ) |> Control.field "isOpen" (ControlExtra.bool False) From b21a30637ac4dde906dae96a6047ff79804db65f Mon Sep 17 00:00:00 2001 From: Tessa Kelly <tessakkelly@gmail.com> Date: Tue, 22 Mar 2022 09:22:54 -0700 Subject: [PATCH 4/5] Make the names of the helpers a touch more clear --- styleguide-app/Examples/DisclosureIndicator.elm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index 3a978bed..d82d3f95 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -68,13 +68,13 @@ example = [ DisclosureIndicator.large (Tuple.second attributes.css) (Tuple.second attributes.isOpen) - , Html.text "I'm a 17px caret icon." + , Html.text "large is a 17px caret icon." ] , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] [ DisclosureIndicator.medium (Tuple.second attributes.css) (Tuple.second attributes.isOpen) - , Html.text "I'm a 15px caret icon." + , Html.text "medium is a 15px caret icon." ] ] } From 360ccc23ed5e336d13ecbebdc24dd9216a265ecc Mon Sep 17 00:00:00 2001 From: Tessa Kelly <tessakkelly@gmail.com> Date: Tue, 22 Mar 2022 17:03:28 -0700 Subject: [PATCH 5/5] Elm review --- styleguide-app/Examples/DisclosureIndicator.elm | 1 - 1 file changed, 1 deletion(-) diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index d82d3f95..798722ec 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -14,7 +14,6 @@ import Debug.Control.View as ControlView import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes exposing (css) -import Nri.Ui.Button.V10 as Button import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator import Nri.Ui.Text.V6 as Text