Merge pull request #750 from NoRedInk/tessa/remove-input-margin

Adds noMargin helper

src/Nri/Ui/TextInput/V6.elm

@@ -3,7 +3,7 @@ module Nri.Ui.TextInput.V6 exposing
     , InputType, number, float, text, password, email, search
     , Attribute, placeholder, hiddenLabel, autofocus
     , onBlur, onReset
-    , css, custom, nriDescription, id, testId
+    , css, custom, nriDescription, id, testId, noMargin
     , disabled, loading, errorIf, errorMessage
     , writing
     )
@@ -32,7 +32,7 @@ module Nri.Ui.TextInput.V6 exposing
 
 @docs Attribute, placeholder, hiddenLabel, autofocus
 @docs onBlur, onReset
-@docs css, custom, nriDescription, id, testId
+@docs css, custom, nriDescription, id, testId, noMargin
 @docs disabled, loading, errorIf, errorMessage
 @docs writing
 
@@ -246,9 +246,10 @@ autofocus =
 
 
 {-| Adds CSS to the input container.
-This is meant to be used for margin, and child node attributes for display:flex, display:grid, etc.
+
 If you want to customize colors, borders, font sizes, etc, you should instead add to the TextInput API
 to support what you need.
+
 -}
 css : List Css.Style -> Attribute msg
 css styles =
@@ -256,6 +257,13 @@ css styles =
         \config -> { config | css = styles :: config.css }
 
 
+{-| Remove default spacing from the Input.
+-}
+noMargin : Bool -> Attribute msg
+noMargin removeMargin =
+    Attribute <| \config -> { config | noMarginTop = removeMargin }
+
+
 {-| Add any attribute to the input. Don't use this helper for adding css!
 
 TODO: in V7, change this helper's type to `List (Html.Attribute msg) -> Attribute msg`,
@@ -306,6 +314,7 @@ type alias Config msg =
     , onBlur : Maybe msg
     , onReset : Maybe msg
     , autofocus : Bool
+    , noMarginTop : Bool
     , css : List (List Css.Style)
     , id : Maybe String
     , custom : List (Html.Attribute msg)
@@ -329,6 +338,7 @@ emptyConfig =
     , onReset = Nothing
     , autofocus = False
     , id = Nothing
+    , noMarginTop = False
     , css = []
     , custom = []
     }
@@ -429,6 +439,11 @@ view_ label (InputType inputType) config currentValue =
                                 ]
                         , Css.pseudoElement "-webkit-search-cancel-button"
                             [ Css.display Css.none ]
+                        , if config.noMarginTop then
+                            Css.important (Css.marginTop Css.zero)
+
+                          else
+                            Css.batch []
                         ]
                    , Attributes.placeholder placeholder_
                    , value stringValue
@@ -459,7 +474,14 @@ view_ label (InputType inputType) config currentValue =
           in
           Html.label
             ([ for idValue
-             , Attributes.css [ InputStyles.label config.inputStyle isInError ]
+             , Attributes.css
+                [ InputStyles.label config.inputStyle isInError
+                , if config.noMarginTop then
+                    Css.top (Css.px -9)
+
+                  else
+                    Css.batch []
+                ]
              ]
                 ++ extraStyles
             )

styleguide-app/Examples/TextInput.elm

@@ -48,6 +48,7 @@ type alias ExampleConfig =
     , maybeShowLabelAttribute : Maybe (TextInput.Attribute Msg)
     , maybeDisabledAttribute : Maybe (TextInput.Attribute Msg)
     , maybeLoadingAttribute : Maybe (TextInput.Attribute Msg)
+    , noMarginAttribute : TextInput.Attribute Msg
     , onBlur : Bool
     , onReset : Bool
     }
@@ -77,6 +78,7 @@ example =
                         , exampleConfig.maybeShowLabelAttribute
                         , exampleConfig.maybeDisabledAttribute
                         , exampleConfig.maybeLoadingAttribute
+                        , Just exampleConfig.noMarginAttribute
                         , if exampleConfig.onBlur then
                             Just (TextInput.onBlur (setField onBlur))
 
@@ -212,6 +214,8 @@ init =
                 (Control.maybe False (Control.value TextInput.disabled))
             |> Control.field "TextInput.loading"
                 (Control.maybe False (Control.value TextInput.loading))
+            |> Control.field "TextInput.noMargin"
+                (Control.map TextInput.noMargin (Control.bool False))
             |> Control.field "TextInput.onBlur"
                 (Control.bool False)
             |> Control.field "TextInput.onReset"