From ad4a18d1233d39dc76db600dc70f9dc512b6d0ae Mon Sep 17 00:00:00 2001 From: charbelrami Date: Tue, 19 Sep 2023 15:25:03 -0300 Subject: [PATCH] add docs for helpfully disabled switch --- component-catalog/src/Examples/Switch.elm | 38 +++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/component-catalog/src/Examples/Switch.elm b/component-catalog/src/Examples/Switch.elm index b12a5181..a6568baf 100644 --- a/component-catalog/src/Examples/Switch.elm +++ b/component-catalog/src/Examples/Switch.elm @@ -21,6 +21,7 @@ import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Switch.V3 as Switch import Nri.Ui.Table.V7 as Table +import Nri.Ui.Tooltip.V3 as Tooltip moduleName : String @@ -33,6 +34,10 @@ version = 3 +type TooltipType + = HelpfullyDisabled + + example : Example State Msg example = { name = moduleName @@ -163,6 +168,29 @@ example = ] } ] + , Heading.h2 + [ Heading.plaintext "Tooltip example" + , Heading.css + [ Css.marginTop Spacing.verticalSpacerPx + , Css.marginBottom (Css.px 10) + ] + ] + , Tooltip.view + { trigger = + \attrs -> + Switch.view { id = "tooltip-example", label = "Show pandas in results" } + [ Switch.disabled True + , Switch.custom attrs + ] + , id = "tooltip" + } + [ Tooltip.helpfullyDisabled + , Tooltip.open (state.openTooltip == Just HelpfullyDisabled) + , Tooltip.onToggle (ToggleTooltip HelpfullyDisabled) + , Tooltip.paragraph "Reasons why you can't toggle this switch" + , Tooltip.onRight + , Tooltip.fitToContent + ] ] , categories = [ Category.Inputs ] , keyboardSupport = @@ -177,6 +205,7 @@ example = type alias State = { selected : Bool , settings : Control Settings + , openTooltip : Maybe TooltipType } @@ -184,6 +213,7 @@ init : State init = { selected = True , settings = controlSettings + , openTooltip = Nothing } @@ -211,6 +241,7 @@ type Msg = Switch Bool | UpdateSettings (Control Settings) | Swallow + | ToggleTooltip TooltipType Bool update : Msg -> State -> ( State, Cmd Msg ) @@ -230,3 +261,10 @@ update msg state = ( state , Cmd.none ) + + ToggleTooltip type_ isOpen -> + if isOpen then + ( { state | openTooltip = Just type_ }, Cmd.none ) + + else + ( { state | openTooltip = Nothing }, Cmd.none )