diff --git a/component-catalog/src/Examples/FocusRing.elm b/component-catalog/src/Examples/FocusRing.elm index f7b6e3d67..61b02fcd6 100644 --- 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 index fd369bcfa..30e46fdab 100644 --- 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 index bb964b8de..bc79ecfaf 100644 --- 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,7 +134,7 @@ example = [ { state = "Off" , enabled = Switch.view - { label = "Show dropped students" + { label = text "Show dropped students" , id = "show-dropped-students-off-enabled" } [ Switch.selected False @@ -142,7 +142,7 @@ example = ] , disabled = Switch.view - { label = "Show dropped students" + { label = text "Show dropped students" , id = "show-dropped-students-off-disabled" } [ Switch.selected False @@ -152,7 +152,7 @@ example = , { state = "On" , enabled = Switch.view - { label = "Show dropped students" + { label = text "Show dropped students" , id = "show-dropped-students-on-enabled" } [ Switch.selected True @@ -160,7 +160,7 @@ example = ] , 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 index a79701152..e12327e1c 100644 --- 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 index 036bd58d2..5b9344b2c 100644 --- 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 b/src/Nri/Ui/Switch/V4.elm similarity index 97% rename from src/Nri/Ui/Switch/V3.elm rename to src/Nri/Ui/Switch/V4.elm index df4469f90..0c85f4429 100644 --- a/src/Nri/Ui/Switch/V3.elm +++ b/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 index fd6fe9867..110588f0d 100644 --- 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 index 5a22887ea..8a63d7837 100644 --- 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",