Configure when the x shows

src/Nri/Ui/Modal/V5.elm

@@ -2,7 +2,7 @@ module Nri.Ui.Modal.V5 exposing
     ( Model
     , info
     , warning
-    , Msg, closeButton, init, launchButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
+    , FocusableElement(..), Msg, closeButton, init, launchButton, subscriptions, toOverlayColor, update, viewFooter, viewModalContainer, viewTitle
     )
 
 {-| Changes from V4:
@@ -190,8 +190,14 @@ viewTitle { visibleTitle, title } color =
     )
 
 
-closeButton : msg -> Html msg
-closeButton msg =
+type FocusableElement
+    = OnlyFocusableElement
+    | FirstFocusableElement
+    | LastFocusableElement
+
+
+closeButton : FocusableElement -> Html Msg
+closeButton focusableElement =
     Nri.Ui.styled button
         "close-button-container"
         [ Css.position Css.absolute
@@ -206,9 +212,21 @@ closeButton msg =
         , Css.hover [ Css.color Colors.azureDark ]
         , Css.property "transition" "color 0.1s"
         ]
-        [ onClick msg
-        , Widget.label "Close modal"
-        ]
+        (Widget.label "Close modal"
+            :: (Modal.closeOnClick
+                    :: (case focusableElement of
+                            OnlyFocusableElement ->
+                                Modal.singleFocusableElement
+
+                            FirstFocusableElement ->
+                                Modal.firstFocusableElement
+
+                            LastFocusableElement ->
+                                Modal.lastFocusableElement
+                       )
+                    |> List.map Html.Styled.Attributes.fromUnstyled
+               )
+        )
         [ Nri.Ui.Svg.V1.toHtml Nri.Ui.SpriteSheet.xSvg
         ]
 

styleguide-app/Examples/Modal.elm

@@ -20,6 +20,7 @@ type alias State =
     { infoModal : Modal.Model
     , warningModal : Modal.Model
     , visibleTitle : Bool
+    , showX : Bool
     }
 
 
@@ -29,6 +30,7 @@ init =
     { infoModal = Modal.init
     , warningModal = Modal.init
     , visibleTitle = True
+    , showX = False
     }
 
 
@@ -47,6 +49,14 @@ example parentMessage state =
             , disabled = False
             , theme = Checkbox.Square
             }
+        , Checkbox.viewWithLabel
+            { identifier = "show-x"
+            , label = "Show X button"
+            , selected = Checkbox.selectedFromBool state.showX
+            , setterMsg = SetShowX
+            , disabled = False
+            , theme = Checkbox.Square
+            }
         , h4 [] [ text "Modals" ]
         , Modal.info
             { launchButton = Modal.launchButton [] "Launch Info Modal"
@@ -56,7 +66,9 @@ example parentMessage state =
                     , visibleTitle =
                         state.visibleTitle
                     }
-            , content = text "This is where the content goes!"
+            , content =
+                viewContent state
+                    |> Html.map InfoModalMsg
             , parentMsg = InfoModalMsg
             }
             state.infoModal
@@ -68,7 +80,9 @@ example parentMessage state =
                     , visibleTitle =
                         state.visibleTitle
                     }
-            , content = text "This is where the content goes!"
+            , content =
+                viewContent state
+                    |> Html.map WarningModalMsg
             , parentMsg = WarningModalMsg
             }
             state.warningModal
@@ -77,11 +91,24 @@ example parentMessage state =
     }
 
 
+viewContent : State -> Html Modal.Msg
+viewContent state =
+    div []
+        [ if state.showX then
+            Modal.closeButton Modal.OnlyFocusableElement
+
+          else
+            text ""
+        , text "This is where the content goes!"
+        ]
+
+
 {-| -}
 type Msg
     = InfoModalMsg Modal.Msg
     | WarningModalMsg Modal.Msg
     | SetVisibleTitle Bool
+    | SetShowX Bool
 
 
 {-| -}
@@ -105,6 +132,9 @@ update msg state =
         SetVisibleTitle value ->
             ( { state | visibleTitle = value }, Cmd.none )
 
+        SetShowX value ->
+            ( { state | showX = value }, Cmd.none )
+
 
 {-| -}
 subscriptions : State -> Sub Msg