From 15cb3e7865b0f7637cdeaf4599d71ed80144f9ff Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Wed, 1 Dec 2021 10:40:34 -0800
Subject: [PATCH] Adds labelCss helper

---
 src/Nri/Ui/RadioButton/V3.elm           | 18 +++++++++++++++---
 styleguide-app/Examples/RadioButton.elm | 17 +++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/Nri/Ui/RadioButton/V3.elm b/src/Nri/Ui/RadioButton/V3.elm
index 197fd8d5..a6ea5f89 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
     )
 
@@ -33,7 +33,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
 
 -}
@@ -148,6 +148,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
@@ -215,6 +225,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
@@ -234,6 +245,7 @@ emptyConfig =
     , showPennant = False
     , hideLabel = False
     , containerCss = []
+    , labelCss = []
     , custom = []
     , onSelect = Nothing
     , premiumMsg = Nothing
@@ -421,7 +433,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