Merge pull request #1725 from NoRedInk/arbitrary-html-on-switch-label

Arbitrary html on switch label
NoRedInk · Dec 11, 2024 · 82cc609 · 82cc609
2 parents af82c43 + df9d385
commit 82cc609
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 28 deletions.
diff --git a/component-catalog/src/Examples/FocusRing.elm b/component-catalog/src/Examples/FocusRing.elm
@@ -26,7 +26,7 @@ import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.SegmentedControl.V14 as SegmentedControl
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Switch.V3 as Switch
+import Nri.Ui.Switch.V4 as Switch
 import Nri.Ui.Table.V8 as Table
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
@@ -262,7 +262,7 @@ NOTE: use `boxShadows` instead if your focusable element:
           , view = exampleWithBorderAndBG [ FocusRing.boxShadows [] ]
           , twoToned = Just True
           , examples =
-                [ Switch.view { label = "Switch", id = "switch" } []
+                [ Switch.view { label = text "Switch", id = "switch" } []
                 , ClickableSvg.button "ClickableSvg button" UiIcon.playInCircle []
                 , SegmentedControl.viewRadioGroup
                     { legend = "SegmentedControls.viewRadioGroup"

diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm
@@ -37,7 +37,7 @@ import Nri.Ui.Menu.V5 as Menu
 import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Svg.V1 as Svg
-import Nri.Ui.Switch.V3 as Switch
+import Nri.Ui.Switch.V4 as Switch
 import Nri.Ui.Table.V8 as Table
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.TextInput.V8 as TextInput
@@ -923,7 +923,7 @@ viewScoreDisplay value selected attributes =
 viewDroppedStudentsSwitch : Bool -> List (Attribute Msg) -> Html Msg
 viewDroppedStudentsSwitch showDroppedStudents attributes =
     Switch.view
-        { label = "Show dropped students"
+        { label = text "Show dropped students"
         , id = droppedStudentsId
         }
         [ Switch.onSwitch ShowDroppedStudents

diff --git a/component-catalog/src/Examples/Switch.elm b/component-catalog/src/Examples/Switch.elm
@@ -19,7 +19,7 @@ import Html.Styled exposing (..)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing
-import Nri.Ui.Switch.V3 as Switch
+import Nri.Ui.Switch.V4 as Switch
 import Nri.Ui.Table.V8 as Table
 import Nri.Ui.Tooltip.V3 as Tooltip
 
@@ -46,11 +46,11 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ Switch.view { label = "Toggle Off", id = "preview-switch-a" }
+        [ Switch.view { label = text "Toggle Off", id = "preview-switch-a" }
             [ Switch.selected False
             , Switch.custom [ Key.tabbable False ]
             ]
-        , Switch.view { label = "Toggle On", id = "preview-switch-b" }
+        , Switch.view { label = text "Toggle On", id = "preview-switch-b" }
             [ Switch.selected True
             , Switch.custom [ Key.tabbable False ]
             ]
@@ -80,7 +80,7 @@ example =
                           , code =
                                 Code.fromModule moduleName "view"
                                     ++ Code.recordMultiline
-                                        [ ( "label", Code.string label )
+                                        [ ( "label", Code.apply [ Code.fromModule "Html" "text", Code.string label ] )
                                         , ( "id", Code.string "view-switch-example" )
                                         ]
                                         1
@@ -99,7 +99,7 @@ example =
                 [ Heading.plaintext "Customizable example"
                 , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
                 ]
-            , Switch.view { label = currentValue.label, id = "view-switch-example" }
+            , Switch.view { label = text currentValue.label, id = "view-switch-example" }
                 (Switch.selected state.selected
                     :: Switch.onSwitch Switch
                     :: List.map Tuple.second currentValue.attributes
@@ -134,15 +134,15 @@ example =
                 [ { state = "Off"
                   , enabled =
                         Switch.view
-                            { label = "Show dropped students"
+                            { label = text "Show dropped students"
                             , id = "show-dropped-students-off-enabled"
                             }
                             [ Switch.selected False
                             , Switch.onSwitch (\_ -> Swallow)
                             ]
                   , disabled =
                         Switch.view
-                            { label = "Show dropped students"
+                            { label = text "Show dropped students"
                             , id = "show-dropped-students-off-disabled"
                             }
                             [ Switch.selected False
@@ -152,15 +152,15 @@ example =
                 , { state = "On"
                   , enabled =
                         Switch.view
-                            { label = "Show dropped students"
+                            { label = text "Show dropped students"
                             , id = "show-dropped-students-on-enabled"
                             }
                             [ Switch.selected True
                             , Switch.onSwitch (\_ -> Swallow)
                             ]
                   , disabled =
                         Switch.view
-                            { label = "Show dropped students"
+                            { label = text "Show dropped students"
                             , id = "show-dropped-students-on-disabled"
                             }
                             [ Switch.selected True
@@ -178,7 +178,7 @@ example =
             , Tooltip.view
                 { trigger =
                     \attrs ->
-                        Switch.view { id = "tooltip-example", label = "Show pandas in results" }
+                        Switch.view { id = "tooltip-example", label = text "Show pandas in results" }
                             [ Switch.disabled True
                             , Switch.custom attrs
                             ]

diff --git a/component-catalog/src/UsageExamples/FocusLoop.elm b/component-catalog/src/UsageExamples/FocusLoop.elm
@@ -20,7 +20,7 @@ import Nri.Ui.Button.V10 as Button
 import Nri.Ui.FocusLoop.Lazy.V1 as FocusLoop
 import Nri.Ui.FocusLoop.V1 as FocusLoop
 import Nri.Ui.Html.V3 exposing (viewIf)
-import Nri.Ui.Switch.V3 as Switch
+import Nri.Ui.Switch.V4 as Switch
 import Nri.Ui.TextInput.V8 as TextInput
 import Nri.Ui.Tooltip.V3 as Tooltip
 import Task
@@ -259,7 +259,7 @@ viewLazyToggle =
         \useLazy tooltipOpen ->
             Html.div [ Attrs.css [ Css.displayFlex, Css.alignItems Css.center, Css.property "gap" "10px" ] ]
                 [ Switch.view
-                    { label = "Use Lazy"
+                    { label = Html.text "Use Lazy"
                     , id = "lazy-switch"
                     }
                     [ Switch.selected useLazy
@@ -279,7 +279,7 @@ viewSimulateExpensiveComputationToggle =
         \settings tooltipOpen ->
             Html.div [ Attrs.css [ Css.displayFlex, Css.alignItems Css.center, Css.property "gap" "10px" ] ]
                 [ Switch.view
-                    { label = "Simulate Expensive Computation"
+                    { label = Html.text "Simulate Expensive Computation"
                     , id = "simulate-expensive-computation-switch"
                     }
                     [ Switch.selected settings.simulateExpensiveComputation

diff --git a/elm.json b/elm.json
@@ -78,7 +78,7 @@
         "Nri.Ui.Sprite.V1",
         "Nri.Ui.StickerIcon.V1",
         "Nri.Ui.Svg.V1",
-        "Nri.Ui.Switch.V3",
+        "Nri.Ui.Switch.V4",
         "Nri.Ui.Table.V8",
         "Nri.Ui.Tabs.V6",
         "Nri.Ui.Tabs.V9",

diff --git a/src/Nri/Ui/Switch/V3.elm → src/Nri/Ui/Switch/V4.elm b/src/Nri/Ui/Switch/V3.elm → src/Nri/Ui/Switch/V4.elm
@@ -1,4 +1,4 @@
-module Nri.Ui.Switch.V3 exposing
+module Nri.Ui.Switch.V4 exposing
     ( view
     , Attribute
     , selected
@@ -9,10 +9,9 @@ module Nri.Ui.Switch.V3 exposing
 {-|
 
 
-### Changes from V2:
+### Changes from V3:
 
-    - Replace underlying checkbox input with a custom implementation
-    - Allow attributes that produce msgs to be passed through
+    - `view` accepts arbitrary html for the label
 
 @docs view
 
@@ -138,7 +137,7 @@ defaultConfig =
 {-| Render a switch. The boolean here indicates whether the switch is on
 or not.
 -}
-view : { label : String, id : String } -> List (Attribute msg) -> Html msg
+view : { label : Html msg, id : String } -> List (Attribute msg) -> Html msg
 view { label, id } attrs =
     let
         config =
@@ -197,7 +196,7 @@ view { label, id } attrs =
                 , Css.batch config.labelCss
                 ]
             ]
-            [ Html.text label ]
+            [ label ]
         ]
 
 

diff --git a/tests/Spec/Nri/Ui/Switch.elm b/tests/Spec/Nri/Ui/Switch.elm
@@ -5,7 +5,7 @@ import Accessibility.Role as Role
 import Html.Styled exposing (..)
 import Nri.Test.KeyboardHelpers.V1 as KeyboardHelpers
 import Nri.Test.MouseHelpers.V1 as MouseHelpers
-import Nri.Ui.Switch.V3 as Switch
+import Nri.Ui.Switch.V4 as Switch
 import ProgramTest exposing (..)
 import Spec.Helpers exposing (expectFailure)
 import Test exposing (..)
@@ -14,7 +14,7 @@ import Test.Html.Selector exposing (..)
 
 spec : Test
 spec =
-    describe "Nri.Ui.Switch.V2"
+    describe "Nri.Ui.Switch.V4"
         [ describe "'switch' role" hasCorrectRole
         , describe "helpfully disabled switch" helpfullyDisabledSwitch
         ]
@@ -114,7 +114,7 @@ view attributes state =
     div []
         [ Switch.view
             { id = "switch"
-            , label = "Switch"
+            , label = Html.Styled.text "Switch"
             }
             (Switch.selected state.selected :: Switch.onSwitch Toggle :: attributes)
         ]

diff --git a/tests/elm-verify-examples.json b/tests/elm-verify-examples.json
@@ -74,7 +74,7 @@
         "Nri.Ui.Sprite.V1",
         "Nri.Ui.StickerIcon.V1",
         "Nri.Ui.Svg.V1",
-        "Nri.Ui.Switch.V3",
+        "Nri.Ui.Switch.V4",
         "Nri.Ui.Table.V8",
         "Nri.Ui.Tabs.V6",
         "Nri.Ui.Tabs.V9",