From 09555104a37300d2b6bce82f67d8effa366ff49a Mon Sep 17 00:00:00 2001 From: Brooke Date: Thu, 6 Sep 2018 08:13:16 -1000 Subject: [PATCH 1/4] fix no close button conundrum --- src/Nri/Ui/Modal/V2.elm | 48 +++++++++++++++++++++++++------ styleguide-app/Examples/Modal.elm | 13 +++++---- 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/Nri/Ui/Modal/V2.elm b/src/Nri/Ui/Modal/V2.elm index 98666e76..cdc7d32f 100644 --- a/src/Nri/Ui/Modal/V2.elm +++ b/src/Nri/Ui/Modal/V2.elm @@ -23,9 +23,11 @@ import Css.Foreign exposing (Snippet, body, children, descendants, everything, s import Html.Styled import Html.Styled.Events exposing (onClick) import Nri.Ui +import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.Colors.Extra import Nri.Ui.Colors.V1 import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Icon.V3 as Icon {-| @@ -48,25 +50,29 @@ type alias Model msg = } +type alias Assets r = + { r | icons_xBlue_svg : Asset } + + type ModalType = Info | Warning {-| -} -info : Model msg -> Html msg -info = - view Info +info : Assets r -> Model msg -> Html msg +info assets = + view assets Info {-| -} -warning : Model msg -> Html msg -warning = - view Warning +warning : Assets r -> Model msg -> Html msg +warning assets = + view assets Warning -view : ModalType -> Model msg -> Html msg -view modalType { title, visibleTitle, content, onDismiss, footerContent, width } = +view : Assets r -> ModalType -> Model msg -> Html msg +view assets modalType { title, visibleTitle, content, onDismiss, footerContent, width } = Nri.Ui.styled div "modal-backdrop-container" ((case modalType of @@ -132,6 +138,12 @@ view modalType { title, visibleTitle, content, onDismiss, footerContent, width } [ Css.Foreign.body [ Css.overflow Css.hidden ] ] + , case onDismiss of + Just msg -> + closeButton assets msg + + Nothing -> + text "" , if visibleTitle then viewHeader modalType title else @@ -142,6 +154,26 @@ view modalType { title, visibleTitle, content, onDismiss, footerContent, width } ] +closeButton : Assets r -> msg -> Html msg +closeButton assets msg = + Nri.Ui.styled div + "close-button-container" + [ Css.position Css.absolute + , Css.top Css.zero + , Css.right Css.zero + , Css.padding (Css.px 25) + ] + [] + [ Icon.button + { alt = "Close" + , msg = msg + , icon = Icon.close assets + , disabled = False + , size = Icon.Medium + } + ] + + viewHeader : ModalType -> String -> Html msg viewHeader modalType title = Nri.Ui.styled Html.h3 diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index 7cd7bdbe..cb3b280f 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -7,6 +7,7 @@ module Examples.Modal exposing (Msg, State, example, init, update) -} import Accessibility.Styled as Html exposing (Html, div, h3, p, text) +import Assets import Css exposing (..) import Html.Styled import Html.Styled.Attributes exposing (css) @@ -114,7 +115,7 @@ viewModal : ModalType -> Html Msg viewModal modal = case modal of InfoModal -> - Modal.info + Modal.info Assets.assets { title = "Info Modal" , visibleTitle = True , content = text "This is where the content goes!" @@ -127,7 +128,7 @@ viewModal modal = } WarningModal -> - Modal.warning + Modal.warning Assets.assets { title = "Warning Modal" , visibleTitle = True , content = text "This is where the content goes!" @@ -140,7 +141,7 @@ viewModal modal = } NoButtonModal -> - Modal.info + Modal.info Assets.assets { title = "No Buttons" , visibleTitle = True , content = text "This is where the content goes!" @@ -150,7 +151,7 @@ viewModal modal = } NoDismissModal -> - Modal.info + Modal.info Assets.assets { title = "No Dismiss" , visibleTitle = True , content = text "This is where the content goes!" @@ -163,7 +164,7 @@ viewModal modal = } NoHeading -> - Modal.info + Modal.info Assets.assets { title = "Hidden title" , onDismiss = Just DismissModal , visibleTitle = False @@ -182,7 +183,7 @@ viewModal modal = } ScrolledContentModal -> - Modal.info + Modal.info Assets.assets { title = "Scrolled Content" , onDismiss = Just DismissModal , visibleTitle = True From d3d54439d4aadccc2ec7e3ba292e28e76d05eaec Mon Sep 17 00:00:00 2001 From: Brooke Date: Fri, 7 Sep 2018 09:23:16 -0700 Subject: [PATCH 2/4] creates modal V3 --- elm-package.json | 1 + src/Nri/Ui/Modal/V3.elm | 245 ++++++++++++++++++++++++++++++ styleguide-app/Examples/Modal.elm | 4 +- 3 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 src/Nri/Ui/Modal/V3.elm diff --git a/elm-package.json b/elm-package.json index a75f9f37..c2bd79ff 100644 --- a/elm-package.json +++ b/elm-package.json @@ -30,6 +30,7 @@ "Nri.Ui.InputStyles", "Nri.Ui.Modal.V1", "Nri.Ui.Modal.V2", + "Nri.Ui.Modal.V3", "Nri.Ui.Outline.V1", "Nri.Ui.Page.V1", "Nri.Ui.Palette.V1", diff --git a/src/Nri/Ui/Modal/V3.elm b/src/Nri/Ui/Modal/V3.elm new file mode 100644 index 00000000..32c84307 --- /dev/null +++ b/src/Nri/Ui/Modal/V3.elm @@ -0,0 +1,245 @@ +module Nri.Ui.Modal.V3 + exposing + ( Model + , info + , warning + ) + +{-| Changes from V2: + + - Add assets for close button + +@docs Model +@docs info +@docs warning + +-} + +import Accessibility.Styled as Html exposing (..) +import Accessibility.Styled.Role as Role +import Accessibility.Styled.Widget as Widget +import Css +import Css.Foreign exposing (Snippet, body, children, descendants, everything, selector) +import Html.Styled +import Html.Styled.Events exposing (onClick) +import Nri.Ui +import Nri.Ui.AssetPath exposing (Asset(..)) +import Nri.Ui.Colors.Extra +import Nri.Ui.Colors.V1 +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Icon.V3 as Icon + + +{-| + + - `onDismiss`: If `Nothing`, the modal will not be dismissable + - `visibleTitle`: If `False`, the title will still be used for screen readers + - `content`: This will be placed in a `width:100%` div in the main area of the modal + - `footerContent`: The optional items here will be stacked below the main content area and center-aligned. + Commonly you will either give a list of Nri.Ui.Buttons, + or an empty list. + +-} +type alias Model msg = + { title : String + , visibleTitle : Bool + , content : Html msg + , footerContent : List (Html msg) + , onDismiss : Maybe msg + , width : Maybe Int + } + + +type alias Assets r = + { r | icons_xBlue_svg : Asset } + + +type ModalType + = Info + | Warning + + +{-| -} +info : Assets r -> Model msg -> Html msg +info assets = + view assets Info + + +{-| -} +warning : Assets r -> Model msg -> Html msg +warning assets = + view assets Warning + + +view : Assets r -> ModalType -> Model msg -> Html msg +view assets modalType { title, visibleTitle, content, onDismiss, footerContent, width } = + Nri.Ui.styled div + "modal-backdrop-container" + ((case modalType of + Info -> + Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Nri.Ui.Colors.V1.navy) + + Warning -> + Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Nri.Ui.Colors.V1.gray20) + ) + :: [ Css.height (Css.vh 100) + , Css.left Css.zero + , Css.overflow Css.hidden + , Css.position Css.fixed + , Css.top Css.zero + , Css.width (Css.pct 100) + , Css.zIndex (Css.int 200) + , Css.displayFlex + , Css.alignItems Css.center + , Css.justifyContent Css.center + ] + ) + [ Role.dialog + , Widget.label title + , Widget.modal True + ] + [ Nri.Ui.styled Html.Styled.div + "modal-click-catcher" + [ Css.bottom Css.zero + , Css.left Css.zero + , Css.position Css.absolute + , Css.right Css.zero + , Css.top Css.zero + ] + (case onDismiss of + Nothing -> + [] + + Just msg -> + [ onClick msg ] + ) + [] + , Nri.Ui.styled div + "modal-container" + [ Css.width (Css.px 600) + , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100) + , Css.padding4 (Css.px 35) Css.zero (Css.px 25) Css.zero + , Css.margin2 (Css.px 75) Css.auto + , Css.backgroundColor Nri.Ui.Colors.V1.white + , Css.borderRadius (Css.px 20) + , Css.property "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)" + , Css.position Css.relative -- required for closeButtonContainer + , Css.displayFlex + , Css.alignItems Css.center + , Css.flexDirection Css.column + , Css.flexWrap Css.noWrap + , Fonts.baseFont + ] + [] + [ -- This global