Merge pull request #727 from NoRedInk/dansby/input-padding

Input padding

src/Nri/Ui/Checkbox/V5.elm

@@ -163,6 +163,7 @@ checkboxContainer model =
             [ display block
             , height inherit
             , position relative
+            , marginLeft (px -4)
             , pseudoClass "focus-within"
                 [ Css.Global.descendants
                     [ Css.Global.class "checkbox-icon-container"

src/Nri/Ui/RadioButton/V2.elm

@@ -143,6 +143,9 @@ internalView config =
         , classList [ ( "Nri-RadioButton-PremiumClass", config.showPennant ) ]
         , css
             [ position relative
+            , marginLeft (px -4)
+            , display inlineBlock
+            , Css.height (px 34)
             , pseudoClass "focus-within"
                 [ Css.Global.descendants
                     [ Css.Global.class "Nri-RadioButton-RadioButtonIcon"
@@ -177,7 +180,7 @@ internalView config =
                 , ( "Nri-RadioButton-RadioButtonChecked", isChecked )
                 ]
             , css
-                [ padding4 (px 4) zero (px 4) (px 40)
+                [ padding4 (px 6) zero (px 4) (px 40)
                 , if config.isDisabled then
                     Css.batch
                         [ color Colors.gray45

styleguide-app/Examples/RadioButton.elm

@@ -35,7 +35,7 @@ example =
     , update = update
     , subscriptions = subscriptions
     , view = view
-    , categories = [ Layout ]
+    , categories = [ Inputs ]
     , keyboardSupport =
         [ { keys = [ Arrow Left ]
           , result = "Move the focus & select the radio button to the left"
@@ -85,7 +85,7 @@ view model =
 
 viewVanilla : State -> Html Msg
 viewVanilla state =
-    div [ css [ Css.margin (Css.px 8) ] ]
+    div []
         [ RadioButton.view
             { label = "Cats"
             , value = "Cats"
@@ -111,7 +111,7 @@ viewPremium state =
         premiumConfig =
             Control.currentValue state.premiumControl
     in
-    div [ css [ Css.margin (Css.px 8) ] ]
+    div []
         [ Heading.h4 [] [ Html.text "Premium Radio Buttons" ]
         , Html.div [ css [ Css.margin (Css.px 8) ] ]
             [ Control.view SetPremiumControl state.premiumControl