add WidthFillContainer

src/Nri/Ui/Button/V7.elm

@@ -9,6 +9,8 @@ module Nri.Ui.Button.V7 exposing
 
 # Changes from V6:
 
+  - WidthUnbounded button displays inlineFlex, so that it doesn't accidentally take up the entire width
+  - Add WidthFillContainer, for when we intend to take up the full container
 
 
 # About:
@@ -82,6 +84,7 @@ type ButtonSize
 type ButtonWidth
     = WidthExact Int
     | WidthUnbounded
+    | WidthFillContainer
 
 
 {-| Styleguide-approved styles for your buttons!
@@ -754,6 +757,13 @@ sizeStyle size width =
                     , Css.minWidth (Css.px config.minWidth)
                     ]
 
+                WidthFillContainer ->
+                    [ Css.paddingLeft (Css.px 16)
+                    , Css.paddingRight (Css.px 16)
+                    , Css.minWidth (Css.px config.minWidth)
+                    , Css.width (Css.pct 100)
+                    ]
+
         lineHeightPx =
             case size of
                 Small ->

styleguide-app/Examples/Button.elm

@@ -68,6 +68,7 @@ init assets =
                 ( "Nri.Ui.Button.V7.WidthExact 120", Control.value <| Button.WidthExact 120 )
                 [ ( "Nri.Ui.Button.V7.WidthExact 70", Control.value <| Button.WidthExact 70 )
                 , ( "Nri.Ui.Button.V7.WidthUnbounded", Control.value <| Button.WidthUnbounded )
+                , ( "Nri.Ui.Button.V7.WidthFillContainer", Control.value <| Button.WidthFillContainer )
                 ]
             )
         |> Control.field "button type"
@@ -233,7 +234,12 @@ buttons assets messages model =
                         ]
             )
                 |> List.singleton
-                |> td [ css [ verticalAlign middle ] ]
+                |> td
+                    [ css
+                        [ verticalAlign middle
+                        , Css.width (Css.px 200)
+                        ]
+                    ]
     in
     List.concat
         [ [ sizes