From 4301048a1614eed631e2d030aeeacde045db5881 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 7 May 2019 12:14:51 -0700 Subject: [PATCH] Rename the indicator views --- src/Nri/Ui/DisclosureIndicator/V2.elm | 18 ++++------ .../Examples/DisclosureIndicator.elm | 34 ++++++++++--------- 2 files changed, 25 insertions(+), 27 deletions(-) diff --git a/src/Nri/Ui/DisclosureIndicator/V2.elm b/src/Nri/Ui/DisclosureIndicator/V2.elm index bb9824d1..63db702e 100644 --- a/src/Nri/Ui/DisclosureIndicator/V2.elm +++ b/src/Nri/Ui/DisclosureIndicator/V2.elm @@ -1,8 +1,8 @@ -module Nri.Ui.DisclosureIndicator.V2 exposing (view, viewInline) +module Nri.Ui.DisclosureIndicator.V2 exposing (medium, small) {-| A caret that indicates that a section can expand. When the isOpen attribute is passed in as True, it will rotate. A "disclosure indicator" is a standard term for something that indicates that section can expand. -@docs view, viewInline +@docs medium, small -} @@ -20,21 +20,17 @@ type alias Config = {-| -} -view : Config -> Html msg -view config = +medium : Config -> Html msg +medium config = viewWithStyle [ marginRight (px 10) ] (px 15) config -{-| The inline variant of the indicator is smaller and occupies -less vertical space so it can be inlined in lists or tables -without breaking text flow. Also, it rotates from right to -down direction when expanding. --} -viewInline : Config -> Html msg -viewInline config = +{-| -} +small : Config -> Html msg +small config = viewWithStyle [ padding2 (px 0) (px 8) ] (px 9) diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index dd9d8931..c1a065a3 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -1,7 +1,9 @@ module Examples.DisclosureIndicator exposing (Msg, State, example, init, update) -{- \ - @docs Msg, State, example, init, update, +{-| + +@docs Msg, State, example, init, update + -} import Css @@ -15,14 +17,14 @@ import Nri.Ui.Fonts.V1 as Fonts {-| -} type Msg - = DisclosureIndicatorToggle Bool - | InlineDisclosureIndicatorToggle Bool + = ToggleMedium Bool + | ToggleSmall Bool {-| -} type alias State = - { disclosed : Bool - , inlineDisclosed : Bool + { mediumState : Bool + , smallState : Bool } @@ -39,9 +41,9 @@ example parentMessage state = , Css.outline Css.none , Css.fontSize (Css.px 20) ] - , onClick (DisclosureIndicatorToggle (not state.disclosed)) + , onClick (ToggleMedium (not state.mediumState)) ] - [ DisclosureIndicator.view { isOpen = state.disclosed } + [ DisclosureIndicator.medium { isOpen = state.mediumState } , Html.text "Item with detail" ] , Html.h3 [] [ Html.text "Inline indicator" ] @@ -63,9 +65,9 @@ example parentMessage state = , Fonts.baseFont , Css.fontSize (Css.px 16) ] - , onClick (InlineDisclosureIndicatorToggle (not state.inlineDisclosed)) + , onClick (ToggleSmall (not state.smallState)) ] - [ DisclosureIndicator.viewInline { isOpen = state.inlineDisclosed } + [ DisclosureIndicator.small { isOpen = state.smallState } , Html.text "Item with detail" ] ] @@ -76,8 +78,8 @@ example parentMessage state = {-| -} init : State init = - { disclosed = False - , inlineDisclosed = False + { mediumState = False + , smallState = False } @@ -85,8 +87,8 @@ init = update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of - DisclosureIndicatorToggle disclosed -> - ( { state | disclosed = disclosed }, Cmd.none ) + ToggleMedium mediumState -> + ( { state | mediumState = mediumState }, Cmd.none ) - InlineDisclosureIndicatorToggle disclosed -> - ( { state | inlineDisclosed = disclosed }, Cmd.none ) + ToggleSmall mediumState -> + ( { state | smallState = mediumState }, Cmd.none )