mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-09-21 04:07:54 +03:00
add helpfully disabled checkbox
This commit is contained in:
parent
fb08d13479
commit
21c72d19e4
@ -26,6 +26,7 @@ import Nri.Ui.Heading.V3 as Heading
|
||||
import Nri.Ui.Html.Attributes.V2 exposing (safeIdWithPrefix)
|
||||
import Nri.Ui.Svg.V1 as Svg
|
||||
import Nri.Ui.Table.V7 as Table
|
||||
import Nri.Ui.Tooltip.V3 as Tooltip
|
||||
|
||||
|
||||
moduleName : String
|
||||
@ -38,6 +39,15 @@ version =
|
||||
7
|
||||
|
||||
|
||||
tooltipId : String
|
||||
tooltipId =
|
||||
"tooltip"
|
||||
|
||||
|
||||
type TooltipType
|
||||
= HelpfullyDisabled
|
||||
|
||||
|
||||
{-| -}
|
||||
example : Example State Msg
|
||||
example =
|
||||
@ -150,6 +160,30 @@ example =
|
||||
]
|
||||
}
|
||||
]
|
||||
, Heading.h2
|
||||
[ Heading.plaintext "Tooltip Example"
|
||||
, Heading.css [ Css.marginTop (Css.px 30) ]
|
||||
]
|
||||
, Tooltip.view
|
||||
{ trigger =
|
||||
\attrs ->
|
||||
Checkbox.view
|
||||
{ label = "Enable Text-to-Speech"
|
||||
, selected = Checkbox.NotSelected
|
||||
}
|
||||
[ Checkbox.id "tooltip-example"
|
||||
, Checkbox.disabled
|
||||
, Checkbox.custom attrs
|
||||
]
|
||||
, id = tooltipId
|
||||
}
|
||||
[ Tooltip.helpfullyDisabled
|
||||
, Tooltip.open (state.openTooltip == Just HelpfullyDisabled)
|
||||
, Tooltip.onToggle (ToggleTooltip HelpfullyDisabled)
|
||||
, Tooltip.paragraph "Reasons why you can't enable Text-to-Speech"
|
||||
, Tooltip.onRight
|
||||
, Tooltip.fitToContent
|
||||
]
|
||||
]
|
||||
, categories = [ Inputs ]
|
||||
, keyboardSupport =
|
||||
@ -219,6 +253,7 @@ preview =
|
||||
type alias State =
|
||||
{ isChecked : Checkbox.IsSelected
|
||||
, settings : Control Settings
|
||||
, openTooltip : Maybe TooltipType
|
||||
}
|
||||
|
||||
|
||||
@ -227,6 +262,7 @@ init : State
|
||||
init =
|
||||
{ isChecked = Checkbox.PartiallySelected
|
||||
, settings = controlSettings
|
||||
, openTooltip = Nothing
|
||||
}
|
||||
|
||||
|
||||
@ -315,6 +351,7 @@ type Msg
|
||||
= ToggleCheck Id Bool
|
||||
| UpdateControls (Control Settings)
|
||||
| Swallow
|
||||
| ToggleTooltip TooltipType Bool
|
||||
|
||||
|
||||
{-| -}
|
||||
@ -338,6 +375,13 @@ update msg state =
|
||||
Swallow ->
|
||||
( state, Cmd.none )
|
||||
|
||||
ToggleTooltip type_ isOpen ->
|
||||
if isOpen then
|
||||
( { state | openTooltip = Just type_ }, Cmd.none )
|
||||
|
||||
else
|
||||
( { state | openTooltip = Nothing }, Cmd.none )
|
||||
|
||||
|
||||
type alias Id =
|
||||
String
|
||||
|
@ -159,7 +159,7 @@ you want/expect if underlying styles change.
|
||||
Instead, please use the `css` helper.
|
||||
|
||||
-}
|
||||
custom : List (Html.Attribute Never) -> Attribute msg
|
||||
custom : List (Html.Attribute msg) -> Attribute msg
|
||||
custom attributes =
|
||||
Attribute <| \config -> { config | custom = config.custom ++ attributes }
|
||||
|
||||
@ -190,7 +190,7 @@ type alias Config msg =
|
||||
, onCheck : Maybe (Bool -> msg)
|
||||
, isDisabled : Bool
|
||||
, guidance : Guidance msg
|
||||
, custom : List (Html.Attribute Never)
|
||||
, custom : List (Html.Attribute msg)
|
||||
, containerCss : List Css.Style
|
||||
, labelCss : List Css.Style
|
||||
}
|
||||
@ -260,6 +260,7 @@ view { label, selected } attributes =
|
||||
, selected = selected
|
||||
, disabled = config.isDisabled
|
||||
, guidance = config.guidance
|
||||
, custom = config.custom
|
||||
, error = InputErrorAndGuidanceInternal.noError
|
||||
}
|
||||
|
||||
@ -393,6 +394,7 @@ viewCheckboxLabel :
|
||||
, labelCss : List Style
|
||||
, error : InputErrorAndGuidanceInternal.ErrorState
|
||||
, guidance : Guidance msg
|
||||
, custom : List (Html.Attribute msg)
|
||||
}
|
||||
-> List Style
|
||||
-> Html.Html msg
|
||||
@ -429,6 +431,7 @@ viewCheckboxLabel config styles =
|
||||
, InputErrorAndGuidanceInternal.describedBy config.identifier config
|
||||
, Aria.checked (selectedToMaybe config.selected)
|
||||
]
|
||||
++ config.custom
|
||||
, if config.disabled then
|
||||
[ Aria.disabled True ]
|
||||
|
||||
|
@ -7,6 +7,7 @@ import InputErrorAndGuidanceInternal exposing (guidanceId)
|
||||
import Nri.Test.KeyboardHelpers.V1 as KeyboardHelpers
|
||||
import Nri.Ui.Checkbox.V7 as Checkbox
|
||||
import ProgramTest exposing (..)
|
||||
import Spec.Helpers exposing (expectFailure)
|
||||
import Test exposing (..)
|
||||
import Test.Html.Event as Event
|
||||
import Test.Html.Query as Query
|
||||
@ -33,6 +34,7 @@ spec =
|
||||
, attribute (Aria.describedBy [ guidanceId checkboxId ])
|
||||
]
|
||||
|> done
|
||||
, describe "helpfullyDisabledCheckbox" helpfullyDisabledCheckbox
|
||||
]
|
||||
|
||||
|
||||
@ -92,6 +94,34 @@ stateSpec =
|
||||
]
|
||||
|
||||
|
||||
helpfullyDisabledCheckbox : List Test
|
||||
helpfullyDisabledCheckbox =
|
||||
[ test "does not have `aria-disabled=\"true\" when not disabled" <|
|
||||
\() ->
|
||||
program []
|
||||
|> ensureViewHasNot [ attribute (Aria.disabled True) ]
|
||||
|> done
|
||||
, test "has `aria-disabled=\"true\" when disabled" <|
|
||||
\() ->
|
||||
program [ Checkbox.disabled ]
|
||||
|> ensureViewHas [ attribute (Aria.disabled True) ]
|
||||
|> done
|
||||
, test "is clickable when not disabled" <|
|
||||
\() ->
|
||||
program []
|
||||
|> clickIt
|
||||
|> done
|
||||
, test "is not clickable when disabled" <|
|
||||
\() ->
|
||||
program
|
||||
[ Checkbox.disabled
|
||||
]
|
||||
|> clickIt
|
||||
|> done
|
||||
|> expectFailure "Event.expectEvent: I found a node, but it does not listen for \"click\" events like I expected it would."
|
||||
]
|
||||
|
||||
|
||||
pressSpace : TestContext -> TestContext
|
||||
pressSpace =
|
||||
KeyboardHelpers.pressSpace { targetDetails = [] } checkbox
|
||||
|
Loading…
Reference in New Issue
Block a user