Implement internalized container style for counter badge (#4457)

Author: vnbaaij

src/Core/Components/AppBar/FluentAppBarItem.razor

@@ -2,8 +2,8 @@
 @inherits FluentComponentBase
 
 <div id=@Id @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" title="@(Tooltip ?? Text)">
-	<FluentCounterBadge Count="@Count"
-						ContainerStyle="display: inline;"
+	<FluentCounterBadge @ref="@_counterBadge"
+						Count="@Count"
 						Style="display: flex; flex-direction: column; align-items: center;"
 						Appearance="BadgeAppearance.Filled"
 						Color="BadgeColor.Danger"

src/Core/Components/AppBar/FluentAppBarItem.razor.cs

@@ -14,6 +14,8 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// </summary>
 public partial class FluentAppBarItem : FluentComponentBase, IAppBarItem
 {
+    private FluentCounterBadge _counterBadge = default!;
+
     /// <summary />
     public FluentAppBarItem(LibraryConfiguration configuration) : base(configuration)
     {
@@ -97,6 +99,15 @@ protected override void OnInitialized()
         }
     }
 
+    /// <summary />
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _counterBadge.SetContainerStyle("display: inline;");
+        }
+    }
+
     /// <summary />
     protected virtual string? ClassValue => DefaultClassBuilder
         .AddClass("fluent-appbar-item")

src/Core/Components/Badge/FluentBadge.razor.cs

@@ -119,12 +119,6 @@ public FluentBadge(LibraryConfiguration configuration) : base(configuration) { }
     [Parameter]
     public sbyte? OffsetY { get; set; }
 
-    /// <summary>
-    /// Gets or sets the CSS styles applied to the badge container.
-    /// </summary>
-    [Parameter]
-    public string? ContainerStyle { get; set; }
-
     /// <summary />
     protected override void OnParametersSet()
     {
@@ -153,6 +147,7 @@ protected string GetIconColor()
 
     internal void SetContainerStyle(string style)
     {
-       _containerStyle = style;
+        _containerStyle = style;
+        StateHasChanged();
     }
 }

src/Core/Components/Badge/FluentCounterBadge.razor

@@ -1,7 +1,7 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @using Microsoft.FluentUI.AspNetCore.Components.Extensions
 @inherits FluentBadge
-<AddTag Name="fluent-counter-badge-container" TagWhen="@(() => _isAttached && _render)" style="@ContainerStyle">
+<AddTag Name="fluent-counter-badge-container" TagWhen="@(() => _isAttached && _render)" style="@_containerStyle">
 	@ChildContent
 	@if (_render)
 	{