From b5fc602a49d4f673c588d5c542f28c9c400593be Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 11:18:41 -0700 Subject: [PATCH 01/12] Copy over v8 to v9 --- src/Nri/Ui/SegmentedControl/V9.elm | 335 +++++++++++++++++++++++++++++ 1 file changed, 335 insertions(+) create mode 100644 src/Nri/Ui/SegmentedControl/V9.elm diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm new file mode 100644 index 00000000..9127320d --- /dev/null +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -0,0 +1,335 @@ +module Nri.Ui.SegmentedControl.V9 exposing (Config, Option, Width(..), view, viewSpa, ToggleConfig, viewToggle, viewOptionalSelectToggle) + +{-| + +@docs Config, Option, Width, view, viewSpa, ToggleConfig, viewToggle, viewOptionalSelectToggle + +Changes from V7: + + - remove dependence on Nri.Ui.Icon.V5 + - fix icons overlowing the segmented control + +-} + +import Accessibility.Styled exposing (..) +import Accessibility.Styled.Aria as Aria +import Accessibility.Styled.Role as Role +import Accessibility.Styled.Widget as Widget +import Css exposing (..) +import EventExtras +import Html.Styled +import Html.Styled.Attributes as Attr exposing (css, href) +import Html.Styled.Events as Events +import Nri.Ui +import Nri.Ui.Colors.Extra exposing (withAlpha) +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Svg.V1 as Svg exposing (Svg) +import Nri.Ui.Util exposing (dashify) + + +{-| + + - `onClick` : the message to produce when an option is selected (clicked) by the user + - `options`: the list of options available + - `selected`: the value of the currently-selected option + - `width`: how to size the segmented control + - `content`: the panel content for the selected option + +-} +type alias Config a msg = + { onClick : a -> msg + , options : List (Option a) + , selected : a + , width : Width + , content : Html msg + } + + +{-| Same shape as Config but without the content +-} +type alias ToggleConfig a msg = + { onClick : a -> msg + , options : List (Option a) + , selected : a + , width : Width + } + + +{-| Same shape as ToggleConfig but with an optional selected. This would ideally +be the same as ToggleConfig but we as Zambonis don't have time in the ticket to +also upgrade all existing uses of viewToggle. Katie is mentally noting this as a +good hackday clean up but if you find it and fix it first, that's great too! +-} +type alias ToggleConfigWithOptionalSelection a msg = + { onClick : a -> msg + , options : List (Option a) + , selected : Maybe a + , width : Width + } + + +{-| -} +type alias Option a = + { value : a + , icon : Maybe Svg + , label : String + } + + +{-| -} +type Width + = FitContent + | FillContainer + + +{-| -} +view : Config a msg -> Html msg +view config = + viewHelper Nothing config + + +{-| Creates a segmented control that supports SPA navigation. +You should always use this instead of `view` when building a SPA +and the segmented control options correspond to routes in the SPA. + +The first parameter is a function that takes a `route` and returns the URL of that route. + +-} +viewSpa : (route -> String) -> Config route msg -> Html msg +viewSpa toUrl config = + viewHelper (Just toUrl) config + + +{-| Creates _just the toggle_ when need the ui element itself and not a page control +-} +viewToggle : ToggleConfig a msg -> Html msg +viewToggle config = + tabList + [ css + [ displayFlex + , cursor pointer + ] + ] + (List.map + (viewTab + { onClick = config.onClick + , selected = Just config.selected + , width = config.width + , selectedAttribute = Widget.selected True + , maybeToUrl = Nothing + } + ) + config.options + ) + + +{-| Creates _just the toggle_ when need the ui element itself and not a page +control. Since this element is used for a selection and not for page navigation, +it seems reasonable to handle nothing being selected. Additionally, this feels +like under the hood it should be radio buttons or something that denotes +selection instead of buttons. Again, Katie is mentally noting this clean up for +hackday but if your heart sees fit, update if you'd like! +-} +viewOptionalSelectToggle : ToggleConfigWithOptionalSelection a msg -> Html msg +viewOptionalSelectToggle config = + tabList + [ css + [ displayFlex + , cursor pointer + ] + ] + (List.map + (viewTab + { onClick = config.onClick + , selected = config.selected + , width = config.width + , selectedAttribute = Widget.selected True + , maybeToUrl = Nothing + } + ) + config.options + ) + + +viewHelper : Maybe (a -> String) -> Config a msg -> Html msg +viewHelper maybeToUrl config = + let + selected = + config.options + |> List.filter (\o -> o.value == config.selected) + |> List.head + in + div [] + [ tabList + [ css + [ displayFlex + , cursor pointer + ] + ] + (List.map + (viewTab + { onClick = config.onClick + , selected = Just config.selected + , width = config.width + , selectedAttribute = Aria.currentPage + , maybeToUrl = maybeToUrl + } + ) + config.options + ) + , tabPanel + (List.filterMap identity + [ Maybe.map (Aria.labelledBy << tabIdFor) selected + , Just <| css [ paddingTop (px 10) ] + ] + ) + [ config.content + ] + ] + + +tabIdFor : Option a -> String +tabIdFor option = + "Nri-Ui-SegmentedControl-Tab-" ++ dashify option.label + + +panelIdFor : Option a -> String +panelIdFor option = + "Nri-Ui-SegmentedControl-Panel-" ++ dashify option.label + + +viewTab : + { onClick : a -> msg + , selected : Maybe a + , width : Width + , selectedAttribute : Attribute msg + , maybeToUrl : Maybe (a -> String) + } + -> Option a + -> Html msg +viewTab config option = + let + idValue = + tabIdFor option + + element attrs children = + case config.maybeToUrl of + Nothing -> + -- This is for a non-SPA view + button + (Events.onClick (config.onClick option.value) + :: attrs + ) + children + + Just toUrl -> + -- This is a for a SPA view + Html.Styled.a + (href (toUrl option.value) + :: EventExtras.onClickPreventDefaultForLinkWithHref + (config.onClick option.value) + :: attrs + ) + children + in + element + (List.concat + [ [ Attr.id idValue + , Role.tab + , css sharedTabStyles + ] + , if Just option.value == config.selected then + [ css focusedTabStyles + , config.selectedAttribute + ] + + else + [ css unFocusedTabStyles ] + , case config.width of + FitContent -> + [] + + FillContainer -> + [ css expandingTabStyles ] + ] + ) + [ case option.icon of + Nothing -> + text "" + + Just svg -> + span + [ css + [ maxWidth (px 18) + , width (px 18) + , maxHeight (px 18) + , height (px 18) + , display inlineBlock + , verticalAlign textTop + , lineHeight (px 15) + , marginRight (px 8) + ] + ] + [ Svg.toHtml svg ] + , text option.label + ] + + +sharedTabStyles : List Style +sharedTabStyles = + [ padding2 (px 6) (px 20) + , height (px 45) + , Fonts.baseFont + , fontSize (px 15) + , fontWeight bold + , lineHeight (px 30) + , margin zero + , firstOfType + [ borderTopLeftRadius (px 8) + , borderBottomLeftRadius (px 8) + , borderLeft3 (px 1) solid Colors.azure + ] + , lastOfType + [ borderTopRightRadius (px 8) + , borderBottomRightRadius (px 8) + ] + , border3 (px 1) solid Colors.azure + , borderLeft (px 0) + , boxSizing borderBox + , cursor pointer + , property "transition" "background-color 0.2s, color 0.2s, box-shadow 0.2s, border 0.2s, border-width 0s" + , textDecoration none + , hover + [ textDecoration none + ] + , focus + [ textDecoration none + ] + ] + + +focusedTabStyles : List Style +focusedTabStyles = + [ backgroundColor Colors.glacier + , boxShadow5 inset zero (px 3) zero (withAlpha 0.2 Colors.gray20) + , color Colors.navy + ] + + +unFocusedTabStyles : List Style +unFocusedTabStyles = + [ backgroundColor Colors.white + , boxShadow5 inset zero (px -2) zero Colors.azure + , color Colors.azure + , hover + [ backgroundColor Colors.frost + ] + ] + + +expandingTabStyles : List Style +expandingTabStyles = + [ flexGrow (int 1) + , textAlign center + ] From 6b2cabe74e07ca14aed6227482ec3c6bc47554a7 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 11:22:38 -0700 Subject: [PATCH 02/12] Use v9 in the example --- styleguide-app/Examples/SegmentedControl.elm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index a62bf17f..544b8004 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -18,7 +18,7 @@ import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attr import Html.Styled.Events as Events import Nri.Ui.Colors.V1 as Colors -import Nri.Ui.SegmentedControl.V8 as SegmentedControl +import Nri.Ui.SegmentedControl.V9 as SegmentedControl import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon @@ -26,7 +26,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon {-| -} example : Example State Msg example = - { name = "Nri.Ui.SegmentedControl.V8" + { name = "Nri.Ui.SegmentedControl.V9" , state = init , update = update , subscriptions = \_ -> Sub.none From f0d57573d44cea9abfdfefd1e1843e92da310df7 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 11:28:37 -0700 Subject: [PATCH 03/12] Unify toggle select into one --- src/Nri/Ui/SegmentedControl/V9.elm | 45 +------------------- styleguide-app/Examples/SegmentedControl.elm | 31 ++------------ 2 files changed, 5 insertions(+), 71 deletions(-) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index 9127320d..2e7b6513 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -1,8 +1,8 @@ -module Nri.Ui.SegmentedControl.V9 exposing (Config, Option, Width(..), view, viewSpa, ToggleConfig, viewToggle, viewOptionalSelectToggle) +module Nri.Ui.SegmentedControl.V9 exposing (Config, Option, Width(..), view, viewSpa, ToggleConfig, viewToggle) {-| -@docs Config, Option, Width, view, viewSpa, ToggleConfig, viewToggle, viewOptionalSelectToggle +@docs Config, Option, Width, view, viewSpa, ToggleConfig, viewToggle Changes from V7: @@ -49,19 +49,6 @@ type alias Config a msg = {-| Same shape as Config but without the content -} type alias ToggleConfig a msg = - { onClick : a -> msg - , options : List (Option a) - , selected : a - , width : Width - } - - -{-| Same shape as ToggleConfig but with an optional selected. This would ideally -be the same as ToggleConfig but we as Zambonis don't have time in the ticket to -also upgrade all existing uses of viewToggle. Katie is mentally noting this as a -good hackday clean up but if you find it and fix it first, that's great too! --} -type alias ToggleConfigWithOptionalSelection a msg = { onClick : a -> msg , options : List (Option a) , selected : Maybe a @@ -105,34 +92,6 @@ viewSpa toUrl config = -} viewToggle : ToggleConfig a msg -> Html msg viewToggle config = - tabList - [ css - [ displayFlex - , cursor pointer - ] - ] - (List.map - (viewTab - { onClick = config.onClick - , selected = Just config.selected - , width = config.width - , selectedAttribute = Widget.selected True - , maybeToUrl = Nothing - } - ) - config.options - ) - - -{-| Creates _just the toggle_ when need the ui element itself and not a page -control. Since this element is used for a selection and not for page navigation, -it seems reasonable to handle nothing being selected. Additionally, this feels -like under the hood it should be radio buttons or something that denotes -selection instead of buttons. Again, Katie is mentally noting this clean up for -hackday but if your heart sees fit, update if you'd like! --} -viewOptionalSelectToggle : ToggleConfigWithOptionalSelection a msg -> Html msg -viewOptionalSelectToggle config = tabList [ css [ displayFlex diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index 544b8004..c249b7b7 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -56,16 +56,8 @@ example = , Html.h3 [] [ Html.text "Toggle only view" ] , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ] , SegmentedControl.viewToggle - { onClick = Select - , options = buildOptions "Toggle-Only " options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] - , selected = state.selected - , width = options.width - } - , Html.h3 [] [ Html.text "Toggle only view without a default" ] - , Html.p [] [ Html.text "Used when you only need the ui element and not a page control but don't want a default." ] - , SegmentedControl.viewOptionalSelectToggle { onClick = MaybeSelect - , options = buildOptions "Toggle-Only " options [ Do, Re, Mi ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] + , options = buildOptions "Toggle-Only " options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] , selected = state.optionallySelected , width = options.width } @@ -103,21 +95,11 @@ type ExampleOptionSelect | Three -type ExampleOptionMaybeSelect - = Do - | Re - | Mi - - {-| -} type alias State = { selectedNav : ExampleOptionNav - , selected : ExampleOptionSelect - , optionallySelected : Maybe ExampleOptionMaybeSelect + , optionallySelected : Maybe ExampleOptionSelect , optionsControl : Control Options - - -- , optionsControlSelect - -- , optionsControlMaybeSelect : } @@ -125,7 +107,6 @@ type alias State = init : State init = { selectedNav = A - , selected = One , optionallySelected = Nothing , optionsControl = optionsControl } @@ -159,8 +140,7 @@ optionsControl = {-| -} type Msg = SelectNav ExampleOptionNav - | Select ExampleOptionSelect - | MaybeSelect ExampleOptionMaybeSelect + | MaybeSelect ExampleOptionSelect | ChangeOptions (Control Options) @@ -173,11 +153,6 @@ update msg state = , Cmd.none ) - Select id -> - ( { state | selected = id } - , Cmd.none - ) - MaybeSelect id -> ( { state | optionallySelected = Just id } , Cmd.none From deb9e6006719148e641b3fa39bbc27ed8a55d207 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 11:31:13 -0700 Subject: [PATCH 04/12] Rename to clarify roles --- src/Nri/Ui/SegmentedControl/V9.elm | 20 ++++++++++---------- styleguide-app/Examples/SegmentedControl.elm | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index 2e7b6513..db3fd6f6 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -1,8 +1,8 @@ -module Nri.Ui.SegmentedControl.V9 exposing (Config, Option, Width(..), view, viewSpa, ToggleConfig, viewToggle) +module Nri.Ui.SegmentedControl.V9 exposing (NavConfig, Option, Width(..), view, viewSpa, SelectConfig, viewSelect) {-| -@docs Config, Option, Width, view, viewSpa, ToggleConfig, viewToggle +@docs NavConfig, Option, Width, view, viewSpa, SelectConfig, viewSelect Changes from V7: @@ -37,7 +37,7 @@ import Nri.Ui.Util exposing (dashify) - `content`: the panel content for the selected option -} -type alias Config a msg = +type alias NavConfig a msg = { onClick : a -> msg , options : List (Option a) , selected : a @@ -46,9 +46,9 @@ type alias Config a msg = } -{-| Same shape as Config but without the content +{-| Same shape as NavConfig but without the content -} -type alias ToggleConfig a msg = +type alias SelectConfig a msg = { onClick : a -> msg , options : List (Option a) , selected : Maybe a @@ -71,7 +71,7 @@ type Width {-| -} -view : Config a msg -> Html msg +view : NavConfig a msg -> Html msg view config = viewHelper Nothing config @@ -83,15 +83,15 @@ and the segmented control options correspond to routes in the SPA. The first parameter is a function that takes a `route` and returns the URL of that route. -} -viewSpa : (route -> String) -> Config route msg -> Html msg +viewSpa : (route -> String) -> NavConfig route msg -> Html msg viewSpa toUrl config = viewHelper (Just toUrl) config {-| Creates _just the toggle_ when need the ui element itself and not a page control -} -viewToggle : ToggleConfig a msg -> Html msg -viewToggle config = +viewSelect : SelectConfig a msg -> Html msg +viewSelect config = tabList [ css [ displayFlex @@ -111,7 +111,7 @@ viewToggle config = ) -viewHelper : Maybe (a -> String) -> Config a msg -> Html msg +viewHelper : Maybe (a -> String) -> NavConfig a msg -> Html msg viewHelper maybeToUrl config = let selected = diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index c249b7b7..dae0a225 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -55,7 +55,7 @@ example = } , Html.h3 [] [ Html.text "Toggle only view" ] , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ] - , SegmentedControl.viewToggle + , SegmentedControl.viewSelect { onClick = MaybeSelect , options = buildOptions "Toggle-Only " options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] , selected = state.optionallySelected From 17c6c856bdcbf531cc546b45e5c608749a68dd61 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 15:38:47 -0700 Subject: [PATCH 05/12] Realize the only difference was the aria role and just pass that in --- src/Nri/Ui/SegmentedControl/V9.elm | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index db3fd6f6..d23134b9 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -106,6 +106,7 @@ viewSelect config = , selectedAttribute = Widget.selected True , maybeToUrl = Nothing } + Role.radio ) config.options ) @@ -134,6 +135,7 @@ viewHelper maybeToUrl config = , selectedAttribute = Aria.currentPage , maybeToUrl = maybeToUrl } + Role.tab ) config.options ) @@ -165,9 +167,10 @@ viewTab : , selectedAttribute : Attribute msg , maybeToUrl : Maybe (a -> String) } + -> Html.Styled.Attribute msg -> Option a -> Html msg -viewTab config option = +viewTab config ariaRole option = let idValue = tabIdFor option @@ -195,7 +198,7 @@ viewTab config option = element (List.concat [ [ Attr.id idValue - , Role.tab + , ariaRole , css sharedTabStyles ] , if Just option.value == config.selected then From f8aa17936865e5cb1eaa064285e23eddbaba8228 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 15:43:53 -0700 Subject: [PATCH 06/12] Use more purpose-generic language --- src/Nri/Ui/SegmentedControl/V9.elm | 36 +++++++++++++++--------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index d23134b9..1791112a 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -99,7 +99,7 @@ viewSelect config = ] ] (List.map - (viewTab + (viewSegment { onClick = config.onClick , selected = config.selected , width = config.width @@ -128,7 +128,7 @@ viewHelper maybeToUrl config = ] ] (List.map - (viewTab + (viewSegment { onClick = config.onClick , selected = Just config.selected , width = config.width @@ -141,7 +141,7 @@ viewHelper maybeToUrl config = ) , tabPanel (List.filterMap identity - [ Maybe.map (Aria.labelledBy << tabIdFor) selected + [ Maybe.map (Aria.labelledBy << segmentIdFor) selected , Just <| css [ paddingTop (px 10) ] ] ) @@ -150,9 +150,9 @@ viewHelper maybeToUrl config = ] -tabIdFor : Option a -> String -tabIdFor option = - "Nri-Ui-SegmentedControl-Tab-" ++ dashify option.label +segmentIdFor : Option a -> String +segmentIdFor option = + "Nri-Ui-SegmentedControl-Segment-" ++ dashify option.label panelIdFor : Option a -> String @@ -160,7 +160,7 @@ panelIdFor option = "Nri-Ui-SegmentedControl-Panel-" ++ dashify option.label -viewTab : +viewSegment : { onClick : a -> msg , selected : Maybe a , width : Width @@ -170,10 +170,10 @@ viewTab : -> Html.Styled.Attribute msg -> Option a -> Html msg -viewTab config ariaRole option = +viewSegment config ariaRole option = let idValue = - tabIdFor option + segmentIdFor option element attrs children = case config.maybeToUrl of @@ -199,15 +199,15 @@ viewTab config ariaRole option = (List.concat [ [ Attr.id idValue , ariaRole - , css sharedTabStyles + , css sharedSegmentStyles ] , if Just option.value == config.selected then - [ css focusedTabStyles + [ css focusedSegmentStyles , config.selectedAttribute ] else - [ css unFocusedTabStyles ] + [ css unFocusedSegmentStyles ] , case config.width of FitContent -> [] @@ -238,8 +238,8 @@ viewTab config ariaRole option = ] -sharedTabStyles : List Style -sharedTabStyles = +sharedSegmentStyles : List Style +sharedSegmentStyles = [ padding2 (px 6) (px 20) , height (px 45) , Fonts.baseFont @@ -271,16 +271,16 @@ sharedTabStyles = ] -focusedTabStyles : List Style -focusedTabStyles = +focusedSegmentStyles : List Style +focusedSegmentStyles = [ backgroundColor Colors.glacier , boxShadow5 inset zero (px 3) zero (withAlpha 0.2 Colors.gray20) , color Colors.navy ] -unFocusedTabStyles : List Style -unFocusedTabStyles = +unFocusedSegmentStyles : List Style +unFocusedSegmentStyles = [ backgroundColor Colors.white , boxShadow5 inset zero (px -2) zero Colors.azure , color Colors.azure From a4c0d07c3aeba123919fb7a9a9eed16aac6964cf Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 15:55:32 -0700 Subject: [PATCH 07/12] Make tab only pertain to the tab behavior! --- src/Nri/Ui/SegmentedControl/V9.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index 1791112a..7259315b 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -92,7 +92,7 @@ viewSpa toUrl config = -} viewSelect : SelectConfig a msg -> Html msg viewSelect config = - tabList + div [ css [ displayFlex , cursor pointer From 7df0165660a3db18ebcec7c02dcfd66f685f5f2b Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 15:56:53 -0700 Subject: [PATCH 08/12] update doc comments --- src/Nri/Ui/SegmentedControl/V9.elm | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index 7259315b..9659f271 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -46,7 +46,13 @@ type alias NavConfig a msg = } -{-| Same shape as NavConfig but without the content +{-| + + - `onClick` : the message to produce when an option is selected (clicked) by the user + - `options`: the list of options available + - `selected`: if present, the value of the currently-selected option + - `width`: how to size the segmented control + -} type alias SelectConfig a msg = { onClick : a -> msg @@ -88,7 +94,8 @@ viewSpa toUrl config = viewHelper (Just toUrl) config -{-| Creates _just the toggle_ when need the ui element itself and not a page control +{-| Creates _just the segmented select_ when you need the ui element itself and +not a page control -} viewSelect : SelectConfig a msg -> Html msg viewSelect config = From 08bd22fa7b97c767fd48347310f4b826f4a55077 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Fri, 22 May 2020 16:14:24 -0700 Subject: [PATCH 09/12] Expose my module --- elm.json | 1 + tests/elm-verify-examples.json | 1 + 2 files changed, 2 insertions(+) diff --git a/elm.json b/elm.json index 282edee2..b6419deb 100644 --- a/elm.json +++ b/elm.json @@ -46,6 +46,7 @@ "Nri.Ui.PremiumCheckbox.V6", "Nri.Ui.SegmentedControl.V6", "Nri.Ui.SegmentedControl.V8", + "Nri.Ui.SegmentedControl.V9", "Nri.Ui.Select.V5", "Nri.Ui.Select.V7", "Nri.Ui.Slide.V1", diff --git a/tests/elm-verify-examples.json b/tests/elm-verify-examples.json index 0adfe07a..2b0f7845 100644 --- a/tests/elm-verify-examples.json +++ b/tests/elm-verify-examples.json @@ -42,6 +42,7 @@ "Nri.Ui.PremiumCheckbox.V6", "Nri.Ui.SegmentedControl.V6", "Nri.Ui.SegmentedControl.V8", + "Nri.Ui.SegmentedControl.V9", "Nri.Ui.Select.V5", "Nri.Ui.Select.V7", "Nri.Ui.Slide.V1", From b56d9d725bc25994308aca44b19a3a8463105bb3 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Tue, 26 May 2020 11:03:37 -0700 Subject: [PATCH 10/12] Add Role.radioGroup to select view --- src/Nri/Ui/SegmentedControl/V9.elm | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Nri/Ui/SegmentedControl/V9.elm b/src/Nri/Ui/SegmentedControl/V9.elm index 9659f271..f3010693 100644 --- a/src/Nri/Ui/SegmentedControl/V9.elm +++ b/src/Nri/Ui/SegmentedControl/V9.elm @@ -104,6 +104,7 @@ viewSelect config = [ displayFlex , cursor pointer ] + , Role.radioGroup ] (List.map (viewSegment From 36c41639438fd06471a171b44ff711ef1a8b4344 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Tue, 26 May 2020 11:06:16 -0700 Subject: [PATCH 11/12] Rename Toggle to Select in example and remove prefix --- styleguide-app/Examples/SegmentedControl.elm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index dae0a225..79e4134b 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -53,11 +53,11 @@ example = , width = options.width , content = Html.text ("[Content for " ++ Debug.toString state.selectedNav ++ "]") } - , Html.h3 [] [ Html.text "Toggle only view" ] + , Html.h3 [] [ Html.text "Select only view" ] , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ] , SegmentedControl.viewSelect { onClick = MaybeSelect - , options = buildOptions "Toggle-Only " options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] + , options = buildOptions "" options [ One, Two, Three ] [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] , selected = state.optionallySelected , width = options.width } From b6a9b04ad24576fb333b020a9b0078df142fa044 Mon Sep 17 00:00:00 2001 From: Katie Hughes Date: Tue, 26 May 2020 11:07:39 -0700 Subject: [PATCH 12/12] Add SegmentedControl to the Inputs category too --- styleguide-app/Examples/SegmentedControl.elm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index 79e4134b..8b00de8f 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -62,7 +62,7 @@ example = , width = options.width } ] - , categories = [ Widgets ] + , categories = [ Inputs, Widgets ] }