diff --git a/src/Nri/Ui/Checkbox/V5.elm b/src/Nri/Ui/Checkbox/V5.elm index 1cdef178..c9109f20 100644 --- a/src/Nri/Ui/Checkbox/V5.elm +++ b/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" diff --git a/src/Nri/Ui/RadioButton/V2.elm b/src/Nri/Ui/RadioButton/V2.elm index bc491262..9d5936c6 100644 --- a/src/Nri/Ui/RadioButton/V2.elm +++ b/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 diff --git a/styleguide-app/Examples/RadioButton.elm b/styleguide-app/Examples/RadioButton.elm index 830016f5..fcfbab7d 100644 --- a/styleguide-app/Examples/RadioButton.elm +++ b/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