NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2025-01-03 03:46:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Arbitrary html on switch label
This commit is contained in:
Nuno Ferreira 2024-12-11 13:35:48 +00:00 committed by GitHub
commit 82cc6093ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
component-catalog/src/Examples/FocusRing.elm
View File

@ -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"

4
component-catalog/src/Examples/Menu.elm
View File

@ -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

20
component-catalog/src/Examples/Switch.elm
View File

@ -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
]

6
component-catalog/src/UsageExamples/FocusLoop.elm
View File

@ -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

2
elm.json
View File

@ -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",

11
src/Nri/Ui/Switch/V3.elm → src/Nri/Ui/Switch/V4.elm
View File

@ -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 ]
]

6
tests/Spec/Nri/Ui/Switch.elm
View File

@ -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)
]

2
tests/elm-verify-examples.json
View File

@ -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",