Adds secondary button

src/Nri/Ui/Modal/V5.elm

@@ -179,6 +179,7 @@ viewTitle { visibleTitle, title } color =
 type FocusableElement
     = OnlyFocusableElement
     | FirstFocusableElement
+    | MiddleFocusableElement
     | LastFocusableElement
 
 
@@ -193,6 +194,9 @@ withFocusTrap focusableElement =
             List.map Html.Styled.Attributes.fromUnstyled
                 Modal.firstFocusableElement
 
+        MiddleFocusableElement ->
+            []
+
         LastFocusableElement ->
             List.map Html.Styled.Attributes.fromUnstyled
                 Modal.lastFocusableElement

styleguide-app/Examples/Modal.elm

@@ -23,6 +23,7 @@ type alias State =
     , visibleTitle : Bool
     , showX : Bool
     , showContinue : Bool
+    , showSecondary : Bool
     }
 
 
@@ -34,6 +35,7 @@ init =
     , visibleTitle = True
     , showX = True
     , showContinue = True
+    , showSecondary = False
     }
 
 
@@ -99,6 +101,16 @@ viewContent wrapMsg mainButton state =
             text ""
         , Modal.viewContent [ viewSettings state ]
         , if state.showContinue then
+            if state.showSecondary then
+                Modal.viewFooter
+                    [ mainButton Modal.MiddleFocusableElement
+                    , Modal.secondaryButton Modal.LastFocusableElement
+                        ForceClose
+                        wrapMsg
+                        "Close"
+                    ]
+
+            else
                 Modal.viewFooter
                     [ mainButton Modal.LastFocusableElement
                     ]
@@ -135,6 +147,14 @@ viewSettings state =
             , disabled = False
             , theme = Checkbox.Square
             }
+        , Checkbox.viewWithLabel
+            { identifier = "show-secondary"
+            , label = "Show secondary button"
+            , selected = Checkbox.selectedFromBool state.showSecondary
+            , setterMsg = SetShowSecondary
+            , disabled = False
+            , theme = Checkbox.Square
+            }
         ]
 
 
@@ -146,6 +166,7 @@ type Msg
     | SetVisibleTitle Bool
     | SetShowX Bool
     | SetShowContinue Bool
+    | SetShowSecondary Bool
 
 
 {-| -}
@@ -183,6 +204,9 @@ update msg state =
         SetShowContinue value ->
             ( { state | showContinue = value }, Cmd.none )
 
+        SetShowSecondary value ->
+            ( { state | showSecondary = value }, Cmd.none )
+
 
 {-| -}
 subscriptions : State -> Sub Msg