[Button] Add StopPropagation + UnitTests (#2732)

Co-authored-by: Denis Voituron <[email protected]>

Author: vnbaaij

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -926,6 +926,11 @@
             The text usually displayed in a 'tooltip' popup when the mouse is over the button.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.StopPropagation">
+            <summary>
+            Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.ChildContent">
             <summary>
             Gets or sets the content to be rendered inside the component.

src/Core/Components/Button/FluentButton.razor

@@ -40,6 +40,7 @@ else
                title=@Title
                appearance=@Appearance.ToAttributeValue()
                @onclick="@OnClickHandlerAsync"
+               @onclick:stopPropagation="@StopPropagation"
                @attributes="AdditionalAttributes">
             @if (IconStart != null)
             {

src/Core/Components/Button/FluentButton.razor.cs

@@ -151,6 +151,12 @@ public partial class FluentButton : FluentComponentBase, IAsyncDisposable
     [Parameter]
     public string? Title { get; set; }
 
+    /// <summary>
+    /// Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases.
+    /// </summary>
+    [Parameter]
+    public bool StopPropagation { get; set; } = false;
+
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.
     /// </summary>

tests/Core/Button/FluentButtonTests.razor

@@ -58,4 +58,47 @@
         // Assert
         Assert.True(clicked);
     }
+
+    [Fact]
+    public void FluentButton_StopPropagationFalse()
+    {
+        bool clickedondiv = false;
+        bool clicked = false;
+
+        // Arrange
+        // Not adding StopPropagation here explicitly because it is false by default
+        var cut = Render(@<div @onclick="@(e => {clickedondiv = true; })">
+                            <FluentButton OnClick="@(e => { clicked = true; } )">
+                                My button
+                            </FluentButton>
+                          </div>);
+
+        // Act
+        cut.Find("fluent-button").Click();
+
+        // Assert
+        Assert.True(clickedondiv);
+        Assert.True(clicked);
+    }
+
+    [Fact]
+    public void FluentButton_StopPropagationTrue()
+    {
+        bool clickedondiv = false;
+        bool clicked = false;
+
+        // Arrange
+        var cut = Render(@<div @onclick="@(e => {clickedondiv = true; })">
+                            <FluentButton StopPropagation="true" OnClick="@(e => { clicked = true; } )">
+                                My button
+                            </FluentButton>
+                          </div>);
+
+        // Act
+        cut.Find("fluent-button").Click();
+
+        // Assert
+        Assert.False(clickedondiv);
+        Assert.True(clicked);
+    }
 }