mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-26 15:15:26 +03:00
Merge pull request #791 from NoRedInk/kraken/radio-label-css
Adds RadioButton.labelCss
This commit is contained in:
commit
dfd7962981
@ -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
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user