diff --git a/src/Nri/Ui/RadioButton/V3.elm b/src/Nri/Ui/RadioButton/V3.elm index dfd9edf4..45ab4b27 100644 --- a/src/Nri/Ui/RadioButton/V3.elm +++ b/src/Nri/Ui/RadioButton/V3.elm @@ -5,7 +5,7 @@ module Nri.Ui.RadioButton.V3 exposing , onSelect , Attribute , hiddenLabel, visibleLabel - , containerCss, custom, nriDescription, id, testId + , containerCss, labelCss, custom, nriDescription, id, testId , disabled, enabled, errorIf, errorMessage, guidance ) @@ -34,7 +34,7 @@ module Nri.Ui.RadioButton.V3 exposing @docs Attribute @docs hiddenLabel, visibleLabel -@docs containerCss, custom, nriDescription, id, testId +@docs containerCss, labelCss, custom, nriDescription, id, testId @docs disabled, enabled, errorIf, errorMessage, guidance -} @@ -149,6 +149,16 @@ containerCss styles = Attribute <| \config -> { config | containerCss = config.containerCss ++ styles } +{-| Adds CSS to the element containing the label text. + +Note that these styles don't apply to the literal HTML label element, since it contains the icon SVG as well. + +-} +labelCss : List Css.Style -> Attribute value msg +labelCss styles = + Attribute <| \config -> { config | labelCss = config.labelCss ++ styles } + + {-| Hides the visible label. (There will still be an invisible label for screen readers.) -} hiddenLabel : Attribute value msg @@ -216,6 +226,7 @@ type alias Config value msg = , showPennant : Bool , hideLabel : Bool , containerCss : List Css.Style + , labelCss : List Css.Style , custom : List (Html.Attribute Never) , onSelect : Maybe (value -> msg) , premiumMsg : Maybe msg @@ -235,6 +246,7 @@ emptyConfig = , showPennant = False , hideLabel = False , containerCss = [] + , labelCss = [] , custom = [] , onSelect = Nothing , premiumMsg = Nothing @@ -422,7 +434,7 @@ view { label, name, value, valueToString, selectedValue } attributes = ] else - [] + config.labelCss ] [ Html.text label ] , case ( config.contentPremiumLevel, config.premiumMsg ) of diff --git a/styleguide-app/Examples/RadioButton.elm b/styleguide-app/Examples/RadioButton.elm index c33b9cfb..3896a54d 100644 --- a/styleguide-app/Examples/RadioButton.elm +++ b/styleguide-app/Examples/RadioButton.elm @@ -21,6 +21,7 @@ import Html.Styled as Html exposing (..) import Html.Styled.Attributes as Attributes exposing (css) import KeyboardSupport exposing (Direction(..), Key(..)) import Nri.Ui.Button.V10 as Button +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Modal.V11 as Modal @@ -232,6 +233,22 @@ controlAttributes = ) ] ) + |> ControlExtra.optionalListItem "labelCss" + (Control.choice + [ ( "backgroundColor highlightMagenta" + , Control.value + ( "RadioButton.labelCss [ Css.backgroundColor Colors.highlightMagenta ]" + , RadioButton.labelCss [ Css.backgroundColor Colors.highlightMagenta ] + ) + ) + , ( "1px ochreDark border" + , Control.value + ( "RadioButton.labelCss [ Css.border3 (Css.px 1) Css.solid Colors.ochreDark ]" + , RadioButton.labelCss [ Css.border3 (Css.px 1) Css.solid Colors.ochreDark ] + ) + ) + ] + ) |> ControlExtra.optionalListItem "disclosure" controlDisclosure |> ControlExtra.optionalListItem "errorIf" (Control.map