From ac6be5a10347e1c88c54be968abfc234bc90c2fe Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 10 Jun 2019 17:33:53 -0700 Subject: [PATCH] Fix the content styles --- src/Nri/Ui/Modal/V5.elm | 106 +++++++++++++----------------- styleguide-app/Examples/Modal.elm | 28 ++++---- 2 files changed, 62 insertions(+), 72 deletions(-) diff --git a/src/Nri/Ui/Modal/V5.elm b/src/Nri/Ui/Modal/V5.elm index a5098989..dc4052e1 100644 --- a/src/Nri/Ui/Modal/V5.elm +++ b/src/Nri/Ui/Modal/V5.elm @@ -1,15 +1,18 @@ module Nri.Ui.Modal.V5 exposing - ( Model - , info - , warning - , FocusableElement(..), Msg, closeButton, init, launchButton, primaryButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle + ( info, warning + , Model, init, Msg, update, subscriptions + , viewTitle, viewContent, viewFooter + , closeButton, launchButton, primaryButton + , FocusableElement(..) ) {-| Changes from V4: -@docs Model, Dismissibility -@docs info -@docs warning +@docs info, warning +@docs Model, init, Msg, update, subscriptions + +@docs viewTitle, viewContent, viewFooter +@docs closeButton, launchButton, primaryButton -} @@ -77,10 +80,7 @@ info config model = |> Maybe.map Html.Styled.toUnstyled |> Maybe.withDefault (Root.text "") , overlayColor = toOverlayColor Colors.navy - , modalContainer = - \l -> - viewModalContainer (List.map Html.Styled.fromUnstyled l) - |> Html.Styled.toUnstyled + , modalContainer = viewModalContainer , title = config.title Colors.navy , content = Html.Styled.toUnstyled config.content } @@ -103,10 +103,7 @@ warning config model = |> Maybe.map Html.Styled.toUnstyled |> Maybe.withDefault (Root.text "") , overlayColor = toOverlayColor Colors.gray20 - , modalContainer = - \l -> - viewModalContainer (List.map Html.Styled.fromUnstyled l) - |> Html.Styled.toUnstyled + , modalContainer = viewModalContainer , title = config.title Colors.red , content = Html.Styled.toUnstyled config.content } @@ -133,6 +130,7 @@ toOverlayColor color = |> Color.toCssString +viewModalContainer : List (Root.Html msg) -> Root.Html msg viewModalContainer modalContents = div [ css @@ -158,17 +156,9 @@ viewModalContainer modalContents = [ Css.Global.body [ Css.overflow Css.hidden ] ] - , Nri.Ui.styled div - "modal-content" - [ Css.overflowY Css.auto - , Css.padding2 (Css.px 30) (Css.px 40) - , Css.width (Css.pct 100) - , Css.minHeight (Css.px 150) - , Css.boxSizing Css.borderBox - ] - [] - modalContents + , div [] (List.map Html.Styled.fromUnstyled modalContents) ] + |> Html.Styled.toUnstyled viewTitle : { visibleTitle : Bool, title : String } -> Css.Color -> ( String, List (Root.Attribute Never) ) @@ -229,6 +219,37 @@ closeButton focusableElement = ] +{-| -} +viewContent : List (Html msg) -> Html msg +viewContent = + Nri.Ui.styled div + "modal-content" + [ Css.overflowY Css.auto + , Css.padding2 (Css.px 30) (Css.px 40) + , Css.width (Css.pct 100) + , Css.minHeight (Css.px 150) + , Css.boxSizing Css.borderBox + ] + [] + + +{-| -} +viewFooter : List (Html msg) -> Html msg +viewFooter = + Nri.Ui.styled div + "modal-footer" + [ Css.alignItems Css.center + , Css.displayFlex + , Css.flexDirection Css.column + , Css.flexGrow (Css.int 2) + , Css.flexWrap Css.noWrap + , Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero + , Css.width (Css.pct 100) + , Css.minHeight (Css.px 125) -- so the footer doesn't compress on Safari + ] + [] + + {-| -} primaryButton : FocusableElement -> msg -> String -> Html msg primaryButton focusableElement msg label = @@ -237,38 +258,3 @@ primaryButton focusableElement msg label = [] [ onClick msg ] [ text label ] - - -viewFooter : List (Html msg) -> Html msg -viewFooter footerContent = - case footerContent of - [] -> - Html.text "" - - _ -> - Nri.Ui.styled div - "modal-footer" - [ Css.alignItems Css.center - , Css.displayFlex - , Css.flexDirection Css.column - , Css.flexGrow (Css.int 2) - , Css.flexWrap Css.noWrap - , Css.margin4 (Css.px 20) Css.zero Css.zero Css.zero - , Css.width (Css.pct 100) - , Css.minHeight (Css.px 125) -- so the footer doesn't compress on Safari - ] - [] - (List.map - (\x -> - Nri.Ui.styled div - "modal-footer-item" - [ Css.margin4 (Css.px 10) Css.zero Css.zero Css.zero - , Css.firstChild - [ Css.margin Css.zero - ] - ] - [] - [ x ] - ) - footerContent - ) diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index 5c429bf0..b08d9f42 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -31,8 +31,8 @@ init = { infoModal = Modal.init , warningModal = Modal.init , visibleTitle = True - , showX = False - , showContinue = False + , showX = True + , showContinue = True } @@ -106,27 +106,31 @@ viewContent wrapMsg state = ( True, True ) -> [ Modal.closeButton Modal.LastFocusableElement |> Html.map wrapMsg - , text "This is where the content goes!" - , Modal.primaryButton Modal.FirstFocusableElement - ForceClose - "Continue" + , Modal.viewContent [ text "This is where the content goes!" ] + , Modal.viewFooter + [ Modal.primaryButton Modal.FirstFocusableElement + ForceClose + "Continue" + ] ] ( True, False ) -> [ Modal.closeButton Modal.OnlyFocusableElement |> Html.map wrapMsg - , text "This is where the content goes!" + , Modal.viewContent [ text "This is where the content goes!" ] ] ( False, True ) -> - [ text "This is where the content goes!" - , Modal.primaryButton Modal.OnlyFocusableElement - ForceClose - "Continue" + [ Modal.viewContent [ text "This is where the content goes!" ] + , Modal.viewFooter + [ Modal.primaryButton Modal.OnlyFocusableElement + ForceClose + "Continue" + ] ] ( False, False ) -> - [ text "This is where the content goes!" + [ Modal.viewContent [ text "This is where the content goes!" ] ]