diff --git a/src/ClickableAttributes.elm b/src/ClickableAttributes.elm index 5d0ad153..3a5af8fc 100644 --- a/src/ClickableAttributes.elm +++ b/src/ClickableAttributes.elm @@ -8,6 +8,7 @@ module ClickableAttributes exposing , linkWithMethod , linkWithTracking , onClick + , onClickStopPropagation , toButtonAttributes , toLinkAttributes ) @@ -28,6 +29,7 @@ type alias ClickableAttributes route msg = , url : Maybe route , urlString : Maybe String , onClick : Maybe msg + , stopPropagation : Bool } @@ -47,6 +49,7 @@ init = , url = Nothing , urlString = Nothing , onClick = Nothing + , stopPropagation = False } @@ -56,6 +59,12 @@ onClick msg clickableAttributes = { clickableAttributes | onClick = Just msg } +{-| -} +onClickStopPropagation : msg -> ClickableAttributes route msg -> ClickableAttributes route msg +onClickStopPropagation msg clickableAttributes = + { clickableAttributes | onClick = Just msg, stopPropagation = True } + + {-| -} href : route -> ClickableAttributes route msg -> ClickableAttributes route msg href url clickableAttributes = @@ -105,7 +114,11 @@ toButtonAttributes : ClickableAttributes route msg -> List (Attribute msg) toButtonAttributes clickableAttributes = case clickableAttributes.onClick of Just handler -> - [ Events.onClick handler ] + if clickableAttributes.stopPropagation then + [ Events.onClick handler ] + + else + [ EventExtras.onClickStopPropagation handler ] Nothing -> [] diff --git a/src/Nri/Ui/ClickableSvg/V2.elm b/src/Nri/Ui/ClickableSvg/V2.elm index 5dabb165..1319053c 100644 --- a/src/Nri/Ui/ClickableSvg/V2.elm +++ b/src/Nri/Ui/ClickableSvg/V2.elm @@ -1,7 +1,7 @@ module Nri.Ui.ClickableSvg.V2 exposing ( button, link , Attribute - , onClick + , onClick, onClickStopPropagation , href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking , exactSize, exactWidth, exactHeight , disabled @@ -28,7 +28,7 @@ module Nri.Ui.ClickableSvg.V2 exposing ## Behavior -@docs onClick +@docs onClick, onClickStopPropagation @docs href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking @@ -116,6 +116,12 @@ onClick msg = setClickableAttributes (ClickableAttributes.onClick msg) +{-| -} +onClickStopPropagation : msg -> Attribute msg +onClickStopPropagation msg = + setClickableAttributes (ClickableAttributes.onClickStopPropagation msg) + + {-| -} href : String -> Attribute msg href url = diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index 382e5a91..e4164cbb 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/styleguide-app/Examples/ClickableSvg.elm @@ -13,7 +13,6 @@ import Css import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView -import EventExtras import Example exposing (Example) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes @@ -96,7 +95,7 @@ Tooltip.view ClickableSvg.button "Preview" UiIcon.preview [ ClickableSvg.custom attrs, - , ClickableSvg.custom [ EventExtras.onClickStopPropagation (ShowItWorked "You clicked the preview button!") ] + , ClickableSvg.onClickStopPropagation (ShowItWorked "You clicked the preview button!") ] , id = "preview-tooltip" } @@ -115,7 +114,7 @@ Tooltip.view ClickableSvg.button "Preview" UiIcon.preview [ ClickableSvg.custom attrs - , ClickableSvg.custom [ EventExtras.onClickStopPropagation (ShowItWorked "You clicked the preview button!") ] + , ClickableSvg.onClickStopPropagation (ShowItWorked "You clicked the preview button!") ] , id = "preview-tooltip" }