[CounterBadge] Fix HorizontalPosition/VerticalPosition not being used

Author: vnbaaij

src/Core/Components/CounterBadge/FluentCounterBadge.razor.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.Globalization;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components.Extensions;
@@ -18,9 +22,9 @@ public partial class FluentCounterBadge : FluentComponentBase, IDisposable
 
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
-        .AddStyle("left", $"{HorizontalPosition.ToString(CultureInfo.InvariantCulture)}%", () => GlobalState.Dir == LocalizationDirection.LeftToRight)
-        .AddStyle("right", $"{HorizontalPosition.ToString(CultureInfo.InvariantCulture)}%", () => GlobalState.Dir == LocalizationDirection.RightToLeft)
-        .AddStyle("bottom", $"{VerticalPosition.ToString(CultureInfo.InvariantCulture)}%")
+        .AddStyle("left", $"{HorizontalPosition?.ToString(CultureInfo.InvariantCulture)}%", () => GlobalState.Dir == LocalizationDirection.LeftToRight)
+        .AddStyle("right", $"{HorizontalPosition?.ToString(CultureInfo.InvariantCulture)}%", () => GlobalState.Dir == LocalizationDirection.RightToLeft)
+        .AddStyle("bottom", $"{VerticalPosition?.ToString(CultureInfo.InvariantCulture)}%")
         .AddStyle("background-color", GetBackgroundColor().ToAttributeValue())
         .AddStyle("color", GetFontColor().ToAttributeValue())
         .AddStyle("border", $"1px solid {GetBorderColor().ToAttributeValue()}")
@@ -50,7 +54,7 @@ public partial class FluentCounterBadge : FluentComponentBase, IDisposable
     /// Gets or sets the content you want inside the badge, to customize the badge content.
     /// </summary>
     [Parameter]
-    public RenderFragment<int?>? BadgeTemplate{ get; set; }
+    public RenderFragment<int?>? BadgeTemplate { get; set; }
 
     /// <summary>
     /// Gets or sets the maximum number that can be displayed inside the badge.
@@ -64,7 +68,7 @@ public partial class FluentCounterBadge : FluentComponentBase, IDisposable
     /// Default value is 60 (80 when Dot=true).
     /// </summary>
     [Parameter]
-    public int HorizontalPosition { get; set; }
+    public int? HorizontalPosition { get; set; }
 
     /// <summary>
     /// Gets or sets the bottom position of the badge in percentage.
@@ -75,7 +79,7 @@ public partial class FluentCounterBadge : FluentComponentBase, IDisposable
     [Parameter]
     public int BottomPosition
     {
-        get => VerticalPosition;
+        get => VerticalPosition ?? 60;
         set => VerticalPosition = value;
     }
 
@@ -84,7 +88,7 @@ public int BottomPosition
     /// Default value is 60 (80 when Dot=true).
     /// </summary>
     [Parameter]
-    public int VerticalPosition { get; set; }
+    public int? VerticalPosition { get; set; }
 
     /// <summary>
     /// Gets or sets the default design of this badge using colors from theme.
@@ -160,8 +164,9 @@ protected override Task OnParametersSetAsync()
 
     protected override void OnInitialized()
     {
-        HorizontalPosition = Dot ? 80 : 60;
-        VerticalPosition = Dot ? 80 : 60;
+        HorizontalPosition ??= Dot ? 80 : 60;
+        VerticalPosition ??= Dot ? 80 : 60;
+
         GlobalState.OnChange += StateHasChanged;
     }
 

tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_DotWithPositioning.verified.html

@@ -0,0 +1,4 @@
+
+<div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
+  <div class="fluentui-counterbadge" style="left: -25%; bottom: -25%; background-color: var(--accent-fill-rest); color: var(--neutral-fill-rest); border: 1px solid var(--accent-fill-rest);" dot-only="" b-v8ui8wcemu=""></div>
+</div>

tests/Core/CounterBadge/FluentCounterBadgeTests.FluentCounterBadge_WithPositioning.verified.html

@@ -0,0 +1,4 @@
+
+<div class="fluentui-counterbadge-container" b-v8ui8wcemu="">
+  <div class="fluentui-counterbadge" style="left: -25%; bottom: -25%; background-color: var(--accent-fill-rest); color: var(--neutral-fill-rest); border: 1px solid var(--accent-fill-rest);" title="1" b-v8ui8wcemu="">1</div>
+</div>

tests/Core/CounterBadge/FluentCounterBadgeTests.cs

@@ -454,4 +454,39 @@ public void FluentCounterBadge_DotWithCount()
         // Assert
         cut.Verify();
     }
+
+    [Fact]
+    public void FluentCounterBadge_DotWithPositioning()
+    {
+        // Arrange && Act
+        TestContext.Services.AddSingleton(GlobalState);
+
+        var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
+        {
+            parameters.Add(p => p.Dot, true);
+            parameters.Add(p => p.Count, 1);
+            parameters.Add(parameters => parameters.HorizontalPosition, -25);
+            parameters.Add(parameters => parameters.VerticalPosition, -25);
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentCounterBadge_WithPositioning()
+    {
+        // Arrange && Act
+        TestContext.Services.AddSingleton(GlobalState);
+
+        var cut = TestContext.RenderComponent<FluentCounterBadge>(parameters =>
+        {
+            parameters.Add(p => p.Count, 1);
+            parameters.Add(parameters => parameters.HorizontalPosition, -25);
+            parameters.Add(parameters => parameters.VerticalPosition, -25);
+        });
+
+        // Assert
+        cut.Verify();
+    }
 }

tests/Core/Search/FluentSearchTests.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Bunit;
 using Microsoft.Extensions.DependencyInjection;
 using Xunit;
@@ -12,7 +16,6 @@ public FluentSearchTests()
         Services.AddSingleton(LibraryConfiguration.ForUnitTests);
     }
 
-
     [Fact]
     public void FluentSearch_Default()
     {