Fix the content styles

src/Nri/Ui/Modal/V5.elm

@@ -1,15 +1,18 @@
 module Nri.Ui.Modal.V5 exposing
-    ( Model
+    ( info, warning
-    , info
+    , Model, init, Msg, update, subscriptions
-    , warning
+    , viewTitle, viewContent, viewFooter
-    , FocusableElement(..), Msg, closeButton, init, launchButton, primaryButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
+    , closeButton, launchButton, primaryButton
+    , FocusableElement(..)
     )
 
 {-| Changes from V4:
 
-@docs Model, Dismissibility
+@docs info, warning
-@docs info
+@docs Model, init, Msg, update, subscriptions
-@docs warning
+
+@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 =
+        , modalContainer = viewModalContainer
-            \l ->
-                viewModalContainer (List.map Html.Styled.fromUnstyled l)
-                    |> Html.Styled.toUnstyled
         , 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 =
+        , modalContainer = viewModalContainer
-            \l ->
-                viewModalContainer (List.map Html.Styled.fromUnstyled l)
-                    |> Html.Styled.toUnstyled
         , 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
+        , div [] (List.map Html.Styled.fromUnstyled modalContents)
-            "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
         ]
+        |> 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
-                )

styleguide-app/Examples/Modal.elm

@@ -31,8 +31,8 @@ init =
     { infoModal = Modal.init
     , warningModal = Modal.init
     , visibleTitle = True
-    , showX = False
+    , showX = True
-    , showContinue = False
+    , 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.viewContent [ text "This is where the content goes!" ]
-                , Modal.primaryButton Modal.FirstFocusableElement
+                , Modal.viewFooter
-                    ForceClose
+                    [ Modal.primaryButton Modal.FirstFocusableElement
-                    "Continue"
+                        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.viewContent [ text "This is where the content goes!" ]
-                , Modal.primaryButton Modal.OnlyFocusableElement
+                , Modal.viewFooter
-                    ForceClose
+                    [ Modal.primaryButton Modal.OnlyFocusableElement
-                    "Continue"
+                        ForceClose
+                        "Continue"
+                    ]
                 ]
 
             ( False, False ) ->
-                [ text "This is where the content goes!"
+                [ Modal.viewContent [ text "This is where the content goes!" ]
                 ]