Adds clickablesvg click stop prop

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

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 =

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