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) )
@@ -230,22 +220,22 @@ closeButton focusableElement =
 
 
 {-| -}
-primaryButton : FocusableElement -> msg -> String -> Html msg
+viewContent : List (Html msg) -> Html msg
-primaryButton focusableElement msg label =
+viewContent =
-    Nri.Ui.styled button
+    Nri.Ui.styled div
-        "close-button-container"
+        "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
+        ]
         []
-        [ onClick msg ]
-        [ text label ]
 
 
+{-| -}
 viewFooter : List (Html msg) -> Html msg
-viewFooter footerContent =
+viewFooter =
-    case footerContent of
-        [] ->
-            Html.text ""
-
-        _ ->
     Nri.Ui.styled div
         "modal-footer"
         [ Css.alignItems Css.center
@@ -258,17 +248,13 @@ viewFooter footerContent =
         , Css.minHeight (Css.px 125) -- so the footer doesn't compress on Safari
         ]
         []
-                (List.map
+
-                    (\x ->
+
-                        Nri.Ui.styled div
+{-| -}
-                            "modal-footer-item"
+primaryButton : FocusableElement -> msg -> String -> Html msg
-                            [ Css.margin4 (Css.px 10) Css.zero Css.zero Css.zero
+primaryButton focusableElement msg label =
-                            , Css.firstChild
+    Nri.Ui.styled button
-                                [ Css.margin Css.zero
+        "close-button-container"
-                                ]
-                            ]
         []
-                            [ x ]
+        [ onClick msg ]
-                    )
+        [ text label ]
-                    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
+                    [ 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.viewContent [ text "This is where the content goes!" ]
-                , Modal.primaryButton Modal.OnlyFocusableElement
+                , 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!" ]
                 ]