Add IconOnly parameter (#3432)

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

Author: vnbaaij

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Button/Examples/ButtonIcon.razor

@@ -13,3 +13,13 @@
     <FluentIcon Value="@(new Icons.Regular.Size20.Globe())" Color="Color.Error" Slot="start" />
     Button
 </FluentButton>
+
+
+<FluentButton IconOnly="true">
+    <svg viewBox="0 0 20 20">
+        <path fill="currentColor" d="M7.851 3.146a.5.5 0 0 1 0 .707L4.706 7H10c2.932 0 5.593 1.64 6.936 4.043a.5.5 0 1 1-.872.488C14.894 9.439 12.564 8 10 8H4.707l3.144 3.145a.5.5 0 0 1-.707.707L3.161 7.867a.5.5 0 0 1-.014-.721l3.997-4a.5.5 0 0 1 .707 0M8 15a2 2 0 1 1 4 0a2 2 0 0 1-4 0m2-1a1 1 0 1 0 0 2a1 1 0 0 0 0-2"></path>
+    </svg>
+</FluentButton>
+
+
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Button/FluentButton.md

@@ -35,10 +35,13 @@ The button will be enabled again after 2 seconds.
 
 You can add icons to a button to help identify the action it triggers.
 To do this, you can use an `IconStart` or `IconEnd` property to add an icon
-to the beginning or end of the button text.
+to the beginning or end of the button text. When using `IconStart` or `IconEnd`
+without supplying any content, the button will be displayed in a smaller form.
 
-With icon in the content. By doing it this way, it is possible to specify
-a <code>Color</code> for the icon.
+By putting an icon in the content, it is possible to specify
+a `Color` for the icon.
+
+By setting the `IconOnly` parameter to true, you can use an icon as the button's content but still have it display in a smaller form. 
 
 {{ ButtonIcon }}
 

src/Core/Components/Button/FluentButton.razor

@@ -18,7 +18,7 @@
                    size="@(Size == ButtonSize.Medium ? null : Size.ToAttributeValue())"
                    id="@Id"
                    value="@Value"
-                   icon-only="@(ChildContent is null)"
+                   icon-only="@(IconOnly || ChildContent is null)"
                    disabled="@(Disabled || Loading)"
                    disabled-focusable="@(DisabledFocusable || Loading)"
                    name="@Name"

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

@@ -154,6 +154,13 @@ public partial class FluentButton : FluentComponentBase
     [Parameter]
     public bool Loading { get; set; } = false;
 
+    /// <summary>
+    /// Gets or sets if the button only shows an icon
+    /// Can be used when using <see cref="ChildContent"/> that renders as an icon
+    /// </summary>
+    [Parameter]
+    public bool IconOnly { get; set; }
+
     /// <summary>
     /// Gets or sets the <see cref="Icon"/> displayed at the start of button content.
     /// </summary>

tests/Core/Components/Button/FluentButtonTests.FluentButton_IconOnly.verified.razor.html

@@ -0,0 +1,6 @@
+
+<fluent-button icon-only="" blazor:onclick="x">
+  <svg viewBox="0 0 20 20">
+    <path fill="currentColor" d="M7.851 3.146a.5.5 0 0 1 0 .707L4.706 7H10c2.932 0 5.593 1.64 6.936 4.043a.5.5 0 1 1-.872.488C14.894 9.439 12.564 8 10 8H4.707l3.144 3.145a.5.5 0 0 1-.707.707L3.161 7.867a.5.5 0 0 1-.014-.721l3.997-4a.5.5 0 0 1 .707 0M8 15a2 2 0 1 1 4 0a2 2 0 0 1-4 0m2-1a1 1 0 1 0 0 2a1 1 0 0 0 0-2"></path>
+  </svg>
+</fluent-button>

tests/Core/Components/Button/FluentButtonTests.razor

@@ -354,7 +354,7 @@
         bool clicked = false;
 
         // Arrange
-        var cut = Render(@<FluentButton OnClick="@(e => { clicked = true; } )">My button</FluentButton>);
+        var cut = Render(@<FluentButton OnClick="@(e => { clicked = true; })">My button</FluentButton>);
 
         // Act
         cut.Find("fluent-button").Click();
@@ -402,10 +402,10 @@
         // 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>);
+            <FluentButton OnClick="@(e => { clicked = true; })">
+                My button
+            </FluentButton>
+        </div>);
 
         // Act
         cut.Find("fluent-button").Click();
@@ -423,10 +423,10 @@
 
         // Arrange
         var cut = Render(@<div @onclick="@(e => {clickedondiv = true; })">
-                            <FluentButton StopPropagation="true" OnClick="@(e => { clicked = true; } )">
-                                My button
-                            </FluentButton>
-                          </div>);
+            <FluentButton StopPropagation="true" OnClick="@(e => { clicked = true; })">
+                My button
+            </FluentButton>
+        </div>);
 
         // Act
         cut.Find("fluent-button").Click();
@@ -435,5 +435,18 @@
         Assert.False(clickedondiv);
         Assert.True(clicked);
     }
+
+    [Fact]
+    public void FluentButton_IconOnly()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentButton IconOnly="true">
+            <svg viewBox="0 0 20 20">
+                <path fill="currentColor" d="M7.851 3.146a.5.5 0 0 1 0 .707L4.706 7H10c2.932 0 5.593 1.64 6.936 4.043a.5.5 0 1 1-.872.488C14.894 9.439 12.564 8 10 8H4.707l3.144 3.145a.5.5 0 0 1-.707.707L3.161 7.867a.5.5 0 0 1-.014-.721l3.997-4a.5.5 0 0 1 .707 0M8 15a2 2 0 1 1 4 0a2 2 0 0 1-4 0m2-1a1 1 0 1 0 0 2a1 1 0 0 0 0-2"></path>
+            </svg>
+        </FluentButton>);
+        // Assert
+        cut.Verify();
+    }
 }
-}
+