Adds dismiss on click setting

src/Nri/Ui/Modal/V5.elm

@@ -68,6 +68,7 @@ update msg model =
 {-| -}
 info :
     { title : Css.Color -> ( String, List (Root.Attribute Never) )
+    , dismissOnEscAndOverlayClick : Bool
     , content : Html msg
     , wrapMsg : Msg -> msg
     }
@@ -76,7 +77,7 @@ info :
 info config model =
     Modal.view
         { overlayColor = toOverlayColor Colors.navy
-        , dismissOnEscAndOverlayClick = True
+        , dismissOnEscAndOverlayClick = config.dismissOnEscAndOverlayClick
         , wrapMsg = config.wrapMsg
         , modalContainer = viewModalContainer
         , title = config.title Colors.navy
@@ -89,6 +90,7 @@ info config model =
 {-| -}
 warning :
     { title : Css.Color -> ( String, List (Root.Attribute Never) )
+    , dismissOnEscAndOverlayClick : Bool
     , content : Html msg
     , wrapMsg : Msg -> msg
     }
@@ -97,7 +99,7 @@ warning :
 warning config model =
     Modal.view
         { overlayColor = toOverlayColor Colors.gray20
-        , dismissOnEscAndOverlayClick = True
+        , dismissOnEscAndOverlayClick = config.dismissOnEscAndOverlayClick
         , wrapMsg = config.wrapMsg
         , modalContainer = viewModalContainer
         , title = config.title Colors.red

styleguide-app/Examples/Modal.elm

@@ -24,6 +24,7 @@ type alias State =
     , showX : Bool
     , showContinue : Bool
     , showSecondary : Bool
+    , dismissOnEscAndOverlayClick : Bool
     }
 
 
@@ -36,6 +37,7 @@ init =
     , showX = True
     , showContinue = True
     , showSecondary = False
+    , dismissOnEscAndOverlayClick = True
     }
 
 
@@ -55,6 +57,7 @@ example parentMessage state =
                     { title = "Modal.info"
                     , visibleTitle = state.visibleTitle
                     }
+            , dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick
             , content = viewInfoContent InfoModalMsg state
             , wrapMsg = InfoModalMsg
             }
@@ -65,6 +68,7 @@ example parentMessage state =
                     { title = "Modal.warning"
                     , visibleTitle = state.visibleTitle
                     }
+            , dismissOnEscAndOverlayClick = state.dismissOnEscAndOverlayClick
             , content = viewWarningContent WarningModalMsg state
             , wrapMsg = WarningModalMsg
             }
@@ -153,6 +157,14 @@ 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
+            }
         ]
 
 
@@ -165,6 +177,7 @@ type Msg
     | SetShowX Bool
     | SetShowContinue Bool
     | SetShowSecondary Bool
+    | SetDismissOnEscAndOverlayClick Bool
 
 
 {-| -}
@@ -205,6 +218,9 @@ update msg state =
         SetShowSecondary value ->
             ( { state | showSecondary = value }, Cmd.none )
 
+        SetDismissOnEscAndOverlayClick value ->
+            ( { state | dismissOnEscAndOverlayClick = value }, Cmd.none )
+
 
 {-| -}
 subscriptions : State -> Sub Msg