Update the FluentButton custom style for BackgroundColor and Color properties (#1603)

Author: dvoituron

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

@@ -861,11 +861,17 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnAfterRenderAsync(System.Boolean)">
             <summary />
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentButton.CustomStyle">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentButton.#ctor">
             <summary>
             Constructs an instance of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentButton"/>.
             </summary>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnInitialized">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnClickHandlerAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
             <summary />
         </member>

src/Core/Components/Button/FluentButton.razor

@@ -1,11 +1,8 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @using Microsoft.AspNetCore.Components.Rendering;
 @inherits FluentComponentBase
 
-@if (!String.IsNullOrEmpty(CustomId))
-{
-    <style>@CustomStyle</style>
-}
+@CustomStyle
 
 @if (LoadingOverlay)
 {
@@ -42,7 +39,6 @@ else
                aria-label=@Title
                title=@Title
                appearance=@Appearance.ToAttributeValue()
-               custom-id="@CustomId"
                @onclick="@OnClickHandlerAsync"
                @attributes="AdditionalAttributes">
             @if (IconStart != null)
@@ -72,4 +68,4 @@ else
             }
         </fluent-button>
     }
-}
+}

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

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
@@ -8,7 +9,6 @@ public partial class FluentButton : FluentComponentBase, IAsyncDisposable
 
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Button/FluentButton.razor.js";
 
-    private readonly string _customId = Identifier.NewId();
     private readonly RenderFragment _renderButton;
 
     /// <summary />
@@ -185,19 +185,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         }
     }
 
-    private string? CustomId =>
-        string.IsNullOrEmpty(BackgroundColor) && string.IsNullOrEmpty(Color) ? null : _customId;
-
-    private string? CustomStyle =>
-            $@" fluent-button[custom-id='{_customId}']::part(control) {{
-                  background: padding-box linear-gradient({BackgroundColor}, {BackgroundColor}), border-box {BackgroundColor};
-                  color: {Color};
-                }}
-
-                fluent-button[custom-id='{_customId}']::part(control):hover {{
-                  opacity: 0.8;
-                }}
-              ";
+    /// <summary />
+    protected virtual MarkupString CustomStyle => new InlineStyleBuilder()
+        .AddStyle($"#{Id}::part(control)", "background", $"padding-box linear-gradient({BackgroundColor}, {BackgroundColor}), border-box {BackgroundColor}", when: !string.IsNullOrEmpty(BackgroundColor))
+        .AddStyle($"#{Id}::part(control)", "color", $"{Color}", when: !string.IsNullOrEmpty(Color))
+        .AddStyle($"#{Id}::part(control):hover", "opacity", "0.8", when: !string.IsNullOrEmpty(Color) || !string.IsNullOrEmpty(BackgroundColor))
+        .BuildMarkupString();
 
     /// <summary>
     /// Constructs an instance of <see cref="FluentButton"/>.
@@ -207,6 +200,15 @@ public FluentButton()
         _renderButton = RenderButton;
     }
 
+    /// <summary />
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(Id) && (!string.IsNullOrEmpty(BackgroundColor) || !string.IsNullOrEmpty(Color)))
+        {
+            Id = Identifier.NewId();
+        }
+    }
+
     /// <summary />
     protected async Task OnClickHandlerAsync(MouseEventArgs e)
     {

tests/Core/Button/FluentButtonTests.FluentButton_BackgroundColor.verified.razor.html

@@ -0,0 +1,7 @@
+
+<style>
+#MyButton::part(control) { background: padding-box linear-gradient(#ff0000, #ff0000), border-box #ff0000; }
+#MyButton::part(control):hover { opacity: 0.8; }
+
+</style>
+<fluent-button type="button" id="xxx" appearance="neutral" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="xxx">My button</fluent-button>

tests/Core/Button/FluentButtonTests.FluentButton_BackgroundColorColor.verified.razor.html

@@ -0,0 +1,7 @@
+
+<style>
+#MyButton::part(control) { background: padding-box linear-gradient(#ff0000, #ff0000), border-box #ff0000; color: #00ff00; }
+#MyButton::part(control):hover { opacity: 0.8; }
+
+</style>
+<fluent-button type="button" id="xxx" appearance="neutral" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="xxx">My button</fluent-button>

tests/Core/Button/FluentButtonTests.FluentButton_Color.verified.razor.html

@@ -0,0 +1,7 @@
+
+<style>
+#MyButton::part(control) { color: #00ff00; }
+#MyButton::part(control):hover { opacity: 0.8; }
+
+</style>
+<fluent-button type="button" id="xxx" appearance="neutral" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="xxx">My button</fluent-button>

tests/Core/Button/FluentButtonTests.razor

@@ -1,4 +1,4 @@
-@using Xunit;
+@using Xunit;
 @inherits TestContext
 @code
 {
@@ -12,6 +12,36 @@
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentButton_BackgroundColor()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentButton Id="MyButton" BackgroundColor="#ff0000">My button</FluentButton>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentButton_Color()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentButton Id="MyButton" Color="#00ff00">My button</FluentButton>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentButton_BackgroundColorColor()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentButton Id="MyButton" BackgroundColor="#ff0000" Color="#00ff00">My button</FluentButton>);
+
+        // Assert
+        cut.Verify();
+    }
+
     [Fact]
     public void FluentButton_OnClick()
     {
@@ -28,4 +58,4 @@
         // Assert
         Assert.True(clicked);
     }
-}
+}