[dev-v5][CounterBadge] Change Count type to int (#4465)

* - Change Count type to int
- Allow specifying OverflowCount in example
- Update some test

* Process review comments

Author: vnbaaij

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/CounterBadge/Examples/CounterBadgeAttached.razor

@@ -15,15 +15,17 @@
 <FluentStack VerticalAlignment="VerticalAlignment.Top">
     <span>
         <FluentStack HorizontalAlignment="HorizontalAlignment.Left" Orientation="Orientation.Vertical">
-            <FluentTextInput InputMode="TextInputMode.Numeric" @bind-Value="@count" Label="Count" AutoComplete="off" />
-            <FluentTextInput InputMode="TextInputMode.Numeric" @bind-Value="@offsetX" Label="Offset X" AutoComplete="off" />
+			<FluentTextInput InputMode="TextInputMode.Numeric" @bind-Value="@count" Label="Count" AutoComplete="off" />
+			<FluentTextInput InputMode="TextInputMode.Numeric" @bind-Value="@overflowCount" Label="Overflow count" AutoComplete="off" />
+			<FluentTextInput InputMode="TextInputMode.Numeric" @bind-Value="@offsetX" Label="Offset X" AutoComplete="off" />
             <FluentTextInput InputMode="TextInputMode.Numeric" @bind-Value="@offsetY" Label="Offset Y" AutoComplete="off" />
         </FluentStack>
     </span>
     <div class="grid">
         <div style="grid-area:contents">
             <FluentCounterBadge Color="BadgeColor.Danger"
-                                Count="@(UInt16.TryParse(count, out ushort c) ? c : null)"
+                                Count="@(int.TryParse(count, out int c) ? c : null)"
+                                OverflowCount="@(int.TryParse(overflowCount, out int oc) ? oc : null)"
                                 OffsetX="@(SByte.TryParse(offsetX, out sbyte x) ? x : null)"
                                 OffsetY="@(SByte.TryParse(offsetY, out sbyte y) ? y : null)"
                                 Size="BadgeSize.Small"

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/CounterBadge/Examples/CounterBadgeAttached.razor.cs

@@ -8,6 +8,7 @@ namespace FluentUI.Demo.Client.Documentation.Components.Badges.CounterBadge.Exam
 public partial class CounterBadgeAttached
 {
     private string? count = "3";
+    private string? overflowCount = string.Empty;
     private string? offsetX;
     private string? offsetY;
 

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

@@ -53,7 +53,7 @@ public FluentCounterBadge(LibraryConfiguration configuration) : base(configurati
     /// With ShowZero being false by default, the default result will be an empty counter badge
     /// </summary>
     [Parameter]
-    public ushort? Count { get; set; }
+    public int? Count { get; set; }
 
     /// <summary>
     /// Gets or sets the badge's overflow count.

tests/Core/Components/Badge/FluentCounterBadgeTests.razor

@@ -30,19 +30,22 @@
 
 		// Assert
 		var cb = cut.FindComponent<FluentCounterBadge>();
-		Assert.Equal((ushort?)3, cb.Instance.Count);
+		Assert.Equal(3, cb.Instance.Count);
 	}
 
 	[Fact]
 	public void FluentCounterBadge_CountOutOfRange()
 	{
-		// Arrange && Act
-		var cut = Render(@<FluentCounterBadge Count="256" />);
+		// Arrange
+		long c = (long)int.MaxValue + 1;
+
+		// Act
+		var cut = Render(@<FluentCounterBadge Count="@((int)c)" />);
 
 		// Assert
 		Assert.NotNull(cut.Find("fluent-counter-badge"));
 		var count = cut.Find("fluent-counter-badge").GetAttribute("count");
-		Assert.Equal("256", count);
+		Assert.Null(count);
 	}
 
 	[Theory]
@@ -227,6 +230,7 @@
 		var cut = Render(@<FluentCounterBadge Count="11" OverflowCount="10" />);
 		// Assert
 		Assert.Equal("10", cut.Find("fluent-counter-badge").GetAttribute("overflow-count"));
+		Assert.Equal("11", cut.Find("fluent-counter-badge").GetAttribute("count"));
 	}
 
 	[Fact]
@@ -403,6 +407,3 @@
 		Assert.NotNull(cb);
 	}
 }
-
-
-