Add “WithOnlyX” dismissibility option to Modal.V4

src/Nri/Ui/Modal/V4.elm

@@ -1,14 +1,18 @@
 module Nri.Ui.Modal.V4 exposing
-    ( Model
+    ( Model, Dismissibility(..)
     , info
     , warning
     )
 
-{-| Changes from V2:
+{-| Changes from V3:
+
+  - changed `onDismiss` from `Maybe msg` to `Dismissibility msg`
+
+Changes from V2:
 
   - Add assets for close button
 
-@docs Model
+@docs Model, Dismissibility
 @docs info
 @docs warning
 
@@ -44,11 +48,24 @@ type alias Model msg =
     , visibleTitle : Bool
     , content : Html msg
     , footerContent : List (Html msg)
-    , onDismiss : Maybe msg
+    , onDismiss : Dismissibility msg
     , width : Maybe Int
     }
 
 
+{-|
+
+  - `NotDismissible`
+  - `WithBackgroundOrX`: user can dismiss by clicking "X" (top right) or modal backdrop
+  - `WithOnlyX`: user can dismiss by clicking "X" (top right)
+
+-}
+type Dismissibility msg
+    = NotDismissible
+    | WithBackgroundOrX msg
+    | WithOnlyX msg
+
+
 type alias Assets r =
     { r | icons_xBlue_svg : Asset }
 
@@ -106,11 +123,14 @@ view assets modalType { title, visibleTitle, content, onDismiss, footerContent,
             , Css.top Css.zero
             ]
             (case onDismiss of
-                Nothing ->
+                NotDismissible ->
                     []
 
-                Just msg ->
+                WithBackgroundOrX msg ->
                     [ onClick msg ]
+
+                WithOnlyX msg ->
+                    []
             )
             []
         , Nri.Ui.styled div
@@ -138,11 +158,14 @@ view assets modalType { title, visibleTitle, content, onDismiss, footerContent,
                     [ Css.overflow Css.hidden ]
                 ]
             , case onDismiss of
-                Just msg ->
+                NotDismissible ->
+                    text ""
+
+                WithBackgroundOrX msg ->
                     closeButton assets msg
 
-                Nothing ->
-                    text ""
+                WithOnlyX msg ->
+                    closeButton assets msg
             , if visibleTitle then
                 viewHeader modalType title
 

styleguide-app/Examples/Modal.elm

@@ -71,6 +71,7 @@ type ModalType
     | WarningModal
     | NoButtonModal
     | NoDismissModal
+    | OnlyXDismissModal
     | NoHeading
     | ScrolledContentModal
 
@@ -80,7 +81,8 @@ viewButtons =
     [ ( "Info Modal", "Modal.info", InfoModal )
     , ( "Warning Modal", "Modal.warning", WarningModal )
     , ( "No Button Modal", "Modal.info { ... footerContent = [] ... }", NoButtonModal )
-    , ( "No Dismiss Modal", "Modal.info { ... onDismiss Nothing ... }", NoDismissModal )
+    , ( "No Dismiss Modal", "Modal.info { ... onDismiss = NotDismissible ... }", NoDismissModal )
+    , ( "Only X-Dismiss Modal", "Modal.info { ... onDismiss = WithOnlyX ... }", OnlyXDismissModal )
     , ( "No Heading", "Modal.info { ... visibleTitle = False ... }", NoHeading )
     , ( "Scrolled Content"
       , "Modal.info { content = Html.text 'so much stuff' }"
@@ -117,7 +119,7 @@ viewModal modal =
                 { title = "Info Modal"
                 , visibleTitle = True
                 , content = text "This is where the content goes!"
-                , onDismiss = Just DismissModal
+                , onDismiss = Modal.WithBackgroundOrX DismissModal
                 , width = Nothing
                 , footerContent =
                     [ modalFooterButton "Primary" Button.Primary
@@ -130,7 +132,7 @@ viewModal modal =
                 { title = "Warning Modal"
                 , visibleTitle = True
                 , content = text "This is where the content goes!"
-                , onDismiss = Just DismissModal
+                , onDismiss = Modal.WithBackgroundOrX DismissModal
                 , width = Nothing
                 , footerContent =
                     [ modalFooterButton "Primary" Button.Danger
@@ -143,7 +145,7 @@ viewModal modal =
                 { title = "No Buttons"
                 , visibleTitle = True
                 , content = text "This is where the content goes!"
-                , onDismiss = Just DismissModal
+                , onDismiss = Modal.WithBackgroundOrX DismissModal
                 , width = Nothing
                 , footerContent = []
                 }
@@ -153,7 +155,20 @@ viewModal modal =
                 { title = "No Dismiss"
                 , visibleTitle = True
                 , content = text "This is where the content goes!"
-                , onDismiss = Nothing
+                , onDismiss = Modal.NotDismissible
+                , width = Nothing
+                , footerContent =
+                    [ modalFooterButton "Primary" Button.Primary
+                    , modalFooterButton "Cancel" Button.Borderless
+                    ]
+                }
+
+        OnlyXDismissModal ->
+            Modal.info Assets.assets
+                { title = "Only X-Dismiss"
+                , visibleTitle = True
+                , content = text "This is where the content goes!"
+                , onDismiss = Modal.WithOnlyX DismissModal
                 , width = Nothing
                 , footerContent =
                     [ modalFooterButton "Primary" Button.Primary
@@ -164,7 +179,7 @@ viewModal modal =
         NoHeading ->
             Modal.info Assets.assets
                 { title = "Hidden title"
-                , onDismiss = Just DismissModal
+                , onDismiss = Modal.WithBackgroundOrX DismissModal
                 , visibleTitle = False
                 , footerContent = []
                 , width = Nothing
@@ -183,7 +198,7 @@ viewModal modal =
         ScrolledContentModal ->
             Modal.info Assets.assets
                 { title = "Scrolled Content"
-                , onDismiss = Just DismissModal
+                , onDismiss = Modal.WithBackgroundOrX DismissModal
                 , visibleTitle = True
                 , footerContent = [ modalFooterButton "Primary" Button.Primary ]
                 , width = Nothing