1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-26 15:15:26 +03:00

Merge pull request from NoRedInk/kraken/radio-label-css

Adds RadioButton.labelCss
This commit is contained in:
Alex Perkins 2021-12-02 18:56:40 -05:00 committed by GitHub
commit dfd7962981
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 3 deletions
src/Nri/Ui/RadioButton
styleguide-app/Examples

View File

@ -5,7 +5,7 @@ module Nri.Ui.RadioButton.V3 exposing
, onSelect , onSelect
, Attribute , Attribute
, hiddenLabel, visibleLabel , hiddenLabel, visibleLabel
, containerCss, custom, nriDescription, id, testId , containerCss, labelCss, custom, nriDescription, id, testId
, disabled, enabled, errorIf, errorMessage, guidance , disabled, enabled, errorIf, errorMessage, guidance
) )
@ -34,7 +34,7 @@ module Nri.Ui.RadioButton.V3 exposing
@docs Attribute @docs Attribute
@docs hiddenLabel, visibleLabel @docs hiddenLabel, visibleLabel
@docs containerCss, custom, nriDescription, id, testId @docs containerCss, labelCss, custom, nriDescription, id, testId
@docs disabled, enabled, errorIf, errorMessage, guidance @docs disabled, enabled, errorIf, errorMessage, guidance
-} -}
@ -149,6 +149,16 @@ containerCss styles =
Attribute <| \config -> { config | containerCss = config.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.) {-| Hides the visible label. (There will still be an invisible label for screen readers.)
-} -}
hiddenLabel : Attribute value msg hiddenLabel : Attribute value msg
@ -216,6 +226,7 @@ type alias Config value msg =
, showPennant : Bool , showPennant : Bool
, hideLabel : Bool , hideLabel : Bool
, containerCss : List Css.Style , containerCss : List Css.Style
, labelCss : List Css.Style
, custom : List (Html.Attribute Never) , custom : List (Html.Attribute Never)
, onSelect : Maybe (value -> msg) , onSelect : Maybe (value -> msg)
, premiumMsg : Maybe msg , premiumMsg : Maybe msg
@ -235,6 +246,7 @@ emptyConfig =
, showPennant = False , showPennant = False
, hideLabel = False , hideLabel = False
, containerCss = [] , containerCss = []
, labelCss = []
, custom = [] , custom = []
, onSelect = Nothing , onSelect = Nothing
, premiumMsg = Nothing , premiumMsg = Nothing
@ -422,7 +434,7 @@ view { label, name, value, valueToString, selectedValue } attributes =
] ]
else else
[] config.labelCss
] ]
[ Html.text label ] [ Html.text label ]
, case ( config.contentPremiumLevel, config.premiumMsg ) of , case ( config.contentPremiumLevel, config.premiumMsg ) of

View File

@ -21,6 +21,7 @@ import Html.Styled as Html exposing (..)
import Html.Styled.Attributes as Attributes exposing (css) import Html.Styled.Attributes as Attributes exposing (css)
import KeyboardSupport exposing (Direction(..), Key(..)) import KeyboardSupport exposing (Direction(..), Key(..))
import Nri.Ui.Button.V10 as Button 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.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel)
import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Modal.V11 as Modal 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 "disclosure" controlDisclosure
|> ControlExtra.optionalListItem "errorIf" |> ControlExtra.optionalListItem "errorIf"
(Control.map (Control.map