Adds no margin and container css helpers

src/Nri/Ui/Select/V8.elm

@@ -6,6 +6,7 @@ module Nri.Ui.Select.V8 exposing
     , hiddenLabel, visibleLabel
     , errorIf, errorMessage
     , custom, nriDescription, id, testId
+    , containerCss, noMargin
     )
 
 {-| Build a select input with a label, optional guidance, and error messaging.
@@ -37,7 +38,8 @@ module Nri.Ui.Select.V8 exposing
 @docs Attribute, defaultDisplayText, autofocus
 @docs hiddenLabel, visibleLabel
 @docs errorIf, errorMessage
-@docs css, custom, nriDescription, id, testId, noMargin
+@docs custom, nriDescription, id, testId
+@docs containerCss, noMargin
 @docs disabled, loading, guidance
 
 -}
@@ -141,6 +143,21 @@ testId id_ =
     custom [ Extra.testId id_ ]
 
 
+{-| Adds CSS to the element containing the input.
+-}
+containerCss : List Css.Style -> Attribute value
+containerCss styles =
+    Attribute <|
+        \config -> { config | containerCss = config.containerCss ++ styles }
+
+
+{-| Remove default spacing from the Input.
+-}
+noMargin : Bool -> Attribute value
+noMargin removeMargin =
+    Attribute <| \config -> { config | noMarginTop = removeMargin }
+
+
 {-| A single possible choice.
 -}
 type alias Choice value =
@@ -181,6 +198,7 @@ type alias Config value =
     , error : ErrorState
     , hideLabel : Bool
     , noMarginTop : Bool
+    , containerCss : List Css.Style
     , custom : List (Html.Attribute Never)
     }
 
@@ -195,6 +213,7 @@ defaultConfig =
     , error = InputErrorInternal.init
     , hideLabel = False
     , noMarginTop = False
+    , containerCss = []
     , custom = []
     }
 
@@ -214,9 +233,15 @@ view label attributes =
     in
     Html.div
         [ css
-            [ Css.position Css.relative
-            , Css.marginTop (Css.px InputStyles.defaultMarginTop)
-            ]
+            ([ Css.position Css.relative
+             , if config.noMarginTop then
+                Css.batch []
+
+               else
+                Css.paddingTop (Css.px InputStyles.defaultMarginTop)
+             ]
+                ++ config.containerCss
+            )
         ]
         [ InputLabelInternal.view
             { for = id_

styleguide-app/Examples/Select.elm

@@ -14,6 +14,7 @@ import Example exposing (Example)
 import Html.Styled
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Select.V8 as Select exposing (Choice)
 
@@ -41,23 +42,28 @@ example =
                 |> Html.Styled.fromUnstyled
             , Control.view UpdateAttributes state.attributes
                 |> Html.Styled.fromUnstyled
-            , Html.Styled.code
-                [ css
-                    [ Css.display Css.block
-                    , Css.margin2 (Css.px 20) Css.zero
-                    , Css.whiteSpace Css.preWrap
+            , Html.Styled.div
+                [ css [ Css.displayFlex, Css.alignItems Css.flexStart ]
+                ]
+                [ Html.Styled.code
+                    [ css
+                        [ Css.display Css.block
+                        , Css.margin2 (Css.px 20) Css.zero
+                        , Css.whiteSpace Css.preWrap
+                        , Css.maxWidth (Css.px 500)
+                        ]
                     ]
+                    [ Html.Styled.text <|
+                        "Select.view \""
+                            ++ label
+                            ++ "\""
+                            ++ "\n    [ "
+                            ++ String.join "\n    , " attributesCode
+                            ++ "\n    ] "
+                    ]
+                , Select.view label attributes
+                    |> Html.Styled.map ConsoleLog
                 ]
-                [ Html.Styled.text <|
-                    "Select.view \""
-                        ++ label
-                        ++ "\""
-                        ++ "\n    [ "
-                        ++ String.join "\n    , " attributesCode
-                        ++ "\n    ] "
-                ]
-            , Select.view label attributes
-                |> Html.Styled.map ConsoleLog
             ]
     }
 
@@ -104,14 +110,39 @@ initControls =
                 )
                 (Control.string "Select a tasty tortilla based treat!")
             )
-        |> ControlExtra.listItem "errorIf"
+        |> ControlExtra.optionalListItem "containerCss"
+            (Control.choice
+                [ ( "flex-basis: 300px"
+                  , Control.value
+                        ( "Select.containerCss [ Css.flexBasis (Css.px 300) ]"
+                        , Select.containerCss [ Css.flexBasis (Css.px 300) ]
+                        )
+                  )
+                , ( "background-color: lichen"
+                  , Control.value
+                        ( "Select.containerCss [ Css.backgroundColor Colors.lichen ]"
+                        , Select.containerCss [ Css.backgroundColor Colors.lichen ]
+                        )
+                  )
+                ]
+            )
+        |> ControlExtra.optionalListItem "noMargin"
+            (Control.map
+                (\bool ->
+                    ( "Select.noMargin " ++ Debug.toString bool
+                    , Select.noMargin bool
+                    )
+                )
+                (Control.bool True)
+            )
+        |> ControlExtra.optionalListItem "errorIf"
             (Control.map
                 (\bool ->
                     ( "Select.errorIf " ++ Debug.toString bool
                     , Select.errorIf bool
                     )
                 )
-                (Control.bool False)
+                (Control.bool True)
             )
         |> ControlExtra.optionalListItem "errorMessage"
             (Control.map