Wire in setting for closing on escape or backdrop click

elm.json

@@ -83,7 +83,7 @@
         "pablohirafuji/elm-markdown": "2.0.5 <= v < 3.0.0",
         "rtfeldman/elm-css": "16.0.0 <= v < 17.0.0",
         "tesk9/accessible-html": "4.0.0 <= v < 5.0.0",
-        "tesk9/modal": "2.0.0 <= v < 3.0.0",
+        "tesk9/modal": "4.1.0 <= v < 5.0.0",
         "wernerdegroot/listzipper": "3.1.1 <= v < 4.0.0"
     },
     "test-dependencies": {

src/Nri/Ui/Modal/V5.elm

@@ -43,7 +43,7 @@ type alias Model =
 
 
 {-| -}
-init : Model
+init : { dismissOnEscAndOverlayClick : Bool } -> Model
 init =
     Modal.init
 
@@ -68,7 +68,6 @@ update msg model =
 {-| -}
 info :
     { title : Css.Color -> ( String, List (Root.Attribute Never) )
-    , dismissOnEscAndOverlayClick : Bool
     , content : Html msg
     , wrapMsg : Msg -> msg
     }
@@ -77,9 +76,8 @@ info :
 info config model =
     Modal.view
         { overlayColor = toOverlayColor Colors.navy
-        , dismissOnEscAndOverlayClick = config.dismissOnEscAndOverlayClick
         , wrapMsg = config.wrapMsg
-        , modalContainer = viewModalContainer
+        , modalAttributes = modalStyles
         , title = config.title Colors.navy
         , content = toUnstyled config.content
         }
@@ -90,7 +88,6 @@ info config model =
 {-| -}
 warning :
     { title : Css.Color -> ( String, List (Root.Attribute Never) )
-    , dismissOnEscAndOverlayClick : Bool
     , content : Html msg
     , wrapMsg : Msg -> msg
     }
@@ -99,9 +96,8 @@ warning :
 warning config model =
     Modal.view
         { overlayColor = toOverlayColor Colors.gray20
-        , dismissOnEscAndOverlayClick = config.dismissOnEscAndOverlayClick
         , wrapMsg = config.wrapMsg
-        , modalContainer = viewModalContainer
+        , modalAttributes = modalStyles
         , title = config.title Colors.red
         , content = toUnstyled config.content
         }
@@ -124,35 +120,20 @@ toOverlayColor : Css.Color -> String
 toOverlayColor color =
     color
         |> Nri.Ui.Colors.Extra.withAlpha 0.9
-        |> Nri.Ui.Colors.Extra.toCoreColor
-        |> Color.toCssString
+        |> toCssString
 
 
-viewModalContainer : List (Root.Html msg) -> Root.Html msg
-viewModalContainer modalContents =
-    div
-        [ css
-            [ Css.width (Css.px 600)
-            , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100)
-            , Css.padding4 (Css.px 40) Css.zero (Css.px 40) Css.zero
-            , Css.margin2 (Css.px 75) Css.auto
-            , Css.backgroundColor Colors.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
-            , Fonts.baseFont
-            ]
-        ]
-        [ -- This global <style> node sets overflow to hidden on the body element,
-          -- thereby preventing the page from scrolling behind the backdrop when the modal is
-          -- open (and this node is present on the page).
-          Css.Global.global
-            [ Css.Global.body
-                [ Css.overflow Css.hidden ]
-            ]
-        , div [] (List.map fromUnstyled modalContents)
-        ]
-        |> toUnstyled
+modalStyles : List (Root.Attribute Never)
+modalStyles =
+    [ style "width" "600px"
+    , style "max-height" "calc(100vh - 100px)"
+    , style "padding" "40px 0 40px 0"
+    , style "margin" "75px auto"
+    , style "background-color" (toCssString Colors.white)
+    , style "border-radius" "20px"
+    , style "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)"
+    , style "position" "relative" -- required for closeButtonContainer
+    ]
 
 
 viewTitle : { visibleTitle : Bool, title : String } -> Css.Color -> ( String, List (Root.Attribute Never) )
@@ -164,7 +145,7 @@ viewTitle { visibleTitle, title } color =
         , style "margin" "0 49px"
         , style "font-size" "20px"
         , style "text-align" "center"
-        , style "color" (Color.toCssString (Nri.Ui.Colors.Extra.toCoreColor color))
+        , style "color" (toCssString color)
         ]
 
       else
@@ -172,6 +153,11 @@ viewTitle { visibleTitle, title } color =
     )
 
 
+toCssString : Css.Color -> String
+toCssString =
+    Color.toCssString << Nri.Ui.Colors.Extra.toCoreColor
+
+
 type FocusableElement
     = OnlyFocusableElement
     | FirstFocusableElement

styleguide-app/Examples/Modal.elm

@@ -31,8 +31,8 @@ type alias State =
 {-| -}
 init : State
 init =
-    { infoModal = Modal.init
-    , warningModal = Modal.init
+    { infoModal = Modal.init { dismissOnEscAndOverlayClick = True }
+    , warningModal = Modal.init { dismissOnEscAndOverlayClick = True }
     , visibleTitle = True
     , showX = True
     , showContinue = True
@@ -47,7 +47,15 @@ example parentMessage state =
     { name = "Nri.Ui.Modal.V5"
     , category = Modals
     , content =
-        [ Modal.launchButton [] "Launch Info Modal"
+        [ Checkbox.viewWithLabel
+            { identifier = "dismiss-on-click"
+            , label = "Dismiss on ESC and on backdrop click"
+            , selected = Checkbox.selectedFromBool state.dismissOnEscAndOverlayClick
+            , setterMsg = SetDismissOnEscAndOverlayClick
+            , disabled = False
+            , theme = Checkbox.Square
+            }
+        , Modal.launchButton [] "Launch Info Modal"
             |> Html.map InfoModalMsg
         , Modal.launchButton [] "Launch Warning Modal"
             |> Html.map WarningModalMsg
@@ -57,7 +65,6 @@ example parentMessage state =
                     { title = "Modal.info"
                     , visibleTitle = state.visibleTitle
                     }
-            , dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick
             , content = viewInfoContent InfoModalMsg state
             , wrapMsg = InfoModalMsg
             }
@@ -68,7 +75,6 @@ example parentMessage state =
                     { title = "Modal.warning"
                     , visibleTitle = state.visibleTitle
                     }
-            , dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick
             , content = viewWarningContent WarningModalMsg state
             , wrapMsg = WarningModalMsg
             }
@@ -157,14 +163,6 @@ viewSettings state =
             , disabled = False
             , theme = Checkbox.Square
             }
-        , Checkbox.viewWithLabel
-            { identifier = "dismiss-on-click"
-            , label = "Dismiss on ESC and on backdrop click"
-            , selected = Checkbox.selectedFromBool state.dismissOnEscAndOverlayClick
-            , setterMsg = SetDismissOnEscAndOverlayClick
-            , disabled = False
-            , theme = Checkbox.Square
-            }
         ]
 
 
@@ -200,8 +198,8 @@ update msg state =
 
         ForceClose ->
             ( { state
-                | infoModal = Modal.init
-                , warningModal = Modal.init
+                | infoModal = Modal.init { dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick }
+                , warningModal = Modal.init { dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick }
               }
             , Cmd.none
             )
@@ -219,7 +217,20 @@ update msg state =
             ( { state | showSecondary = value }, Cmd.none )
 
         SetDismissOnEscAndOverlayClick value ->
-            ( { state | dismissOnEscAndOverlayClick = value }, Cmd.none )
+            let
+                newInfoModal =
+                    Modal.init { dismissOnEscAndOverlayClick = value }
+
+                newWarningModal =
+                    Modal.init { dismissOnEscAndOverlayClick = value }
+            in
+            ( { state
+                | dismissOnEscAndOverlayClick = value
+                , infoModal = newInfoModal
+                , warningModal = newWarningModal
+              }
+            , Cmd.none
+            )
 
 
 {-| -}

styleguide-app/elm.json

@@ -22,7 +22,7 @@
             "pablohirafuji/elm-markdown": "2.0.5",
             "rtfeldman/elm-css": "16.0.0",
             "tesk9/accessible-html": "4.0.0",
-            "tesk9/modal": "2.0.0",
+            "tesk9/modal": "4.1.0",
             "wernerdegroot/listzipper": "3.2.0"
         },
         "indirect": {