Merge branch 'dev' into dev

microsoft · Dec 18, 2023 · 0bb70c2 · 0bb70c2
2 parents 38f5f00 + 940efee
commit 0bb70c2
Show file tree

Hide file tree

Showing 34 changed files with 338 additions and 66 deletions.
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -6,7 +6,11 @@
     <EfCoreVersion>8.0.0</EfCoreVersion>
   </PropertyGroup>
   <ItemGroup>
-    <!-- build dependencies -->
+    <!-- For Sample Apps -->
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.2.0" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.2.0" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.2.0" />
+    <!-- Build dependencies -->
     <PackageVersion Include="Markdig" Version="0.33.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion)" />
@@ -19,13 +23,10 @@
     <PackageVersion Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />
     <PackageVersion Include="Microsoft.Extensions.Hosting.Abstractions" Version="8.0.0" />
     <PackageVersion Include="Microsoft.Extensions.Http" Version="8.0.0" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.1.1" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.1.0" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.1.0" />
     <PackageVersion Include="Microsoft.SourceLink.GitHub" Version="8.0.0" />
     <PackageVersion Include="System.Text.Encodings.Web" Version="8.0.0" />
     <PackageVersion Include="System.Text.Json" Version="8.0.0" />
-    <!-- test dependencies -->
+    <!-- Test dependencies -->
     <PackageVersion Include="bunit" Version="1.25.3" />
     <PackageVersion Include="FluentAssertions" Version="7.0.0-alpha.3" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.9.0-preview-23577-04" />

diff --git a/examples/Demo/AssetExplorer/Components/Controls/PreviewCard.razor b/examples/Demo/AssetExplorer/Components/Controls/PreviewCard.razor
@@ -6,6 +6,9 @@
                 Title="Copy to clipboard" />
     @if (Icon is not null)
     {
+        <FluentLabel Class="size" title="Size">
+            @TopLeftLabel
+        </FluentLabel>
         <FluentIcon Class="image"
                     Value="@Icons.GetInstance(Icon)"
                     Color="@IconColor"

diff --git a/examples/Demo/AssetExplorer/Components/Controls/PreviewCard.razor.cs b/examples/Demo/AssetExplorer/Components/Controls/PreviewCard.razor.cs
@@ -17,6 +17,9 @@ public partial class PreviewCard
     [Inject]
     public IToastService ToastService { get; set; } = default!;
 
+    [Parameter]
+    public string? TopLeftLabel { get; set; }
+
     [Parameter]
     public Color? IconColor { get; set; }
 

diff --git a/examples/Demo/AssetExplorer/Components/Controls/PreviewCard.razor.css b/examples/Demo/AssetExplorer/Components/Controls/PreviewCard.razor.css
@@ -19,6 +19,13 @@
         display: none;
     }
 
+    .card ::deep .size {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        font-size: 8px;
+    }
+
     .card:hover ::deep .copy {
         display: block;
     }

diff --git a/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor b/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor
@@ -17,12 +17,12 @@
                           Placeholder="Part of icon name..." />
         </FluentGridItem>
         <FluentGridItem Gap="0">
-            <FluentSelect TOption="IconSize"
+            <FluentSelect TOption="int"
                           @bind-SelectedOption="@Criteria.Size"
                           @bind-SelectedOption:after="@StartNewSearchAsync"
                           Style="min-width: 100px;"
-                          Items="@(Enum.GetValues<IconSize>())"
-                          OptionText="@(i => Convert.ToString(i))" />
+                          Items="@AllAvailableSizes"
+                          OptionText="@(i => i > 0 ? $"Size{i}" : "[All]")" />
         </FluentGridItem>
         <FluentGridItem>
             <FluentSelect TOption="IconVariant"
@@ -62,7 +62,7 @@
             <div class="result-list">
                 @foreach (var item in IconsForCurrentPage)
                 {
-                    <PreviewCard Icon="@item" IconColor="@Criteria.Color" />
+                    <PreviewCard Icon="@item" IconColor="@Criteria.Color" TopLeftLabel="@(Criteria.Size > 0 ? string.Empty : $"{(int)item.Size}")" />
                 }
             </div>
 

diff --git a/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs b/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs
@@ -50,10 +50,10 @@ private async Task StartNewSearchAsync()
         IconsFound =
         [
             .. Icons.AllIcons
-                                      .Where(i => i.Variant == Criteria.Variant
-                                               && i.Size == Criteria.Size
-                                               && (string.IsNullOrWhiteSpace(Criteria.SearchTerm) ? true : i.Name.Contains(Criteria.SearchTerm, StringComparison.InvariantCultureIgnoreCase)))
-                                      .OrderBy(i => i.Name)
+                    .Where(i => i.Variant == Criteria.Variant
+                             && (Criteria.Size > 0 ? (int)i.Size == Criteria.Size : true)
+                             && (string.IsNullOrWhiteSpace(Criteria.SearchTerm) ? true : i.Name.Contains(Criteria.SearchTerm, StringComparison.InvariantCultureIgnoreCase)))
+                    .OrderBy(i => i.Name)
 ,
         ];
 
@@ -66,4 +66,14 @@ private void HandleCurrentPageIndexChanged()
     {
         StateHasChanged();
     }
+
+    private IEnumerable<int> AllAvailableSizes
+    {
+        get
+        {
+            var sizes = Enum.GetValues<IconSize>().Select(i => (int)i).ToList();
+            var empty = new int[] { 0 };
+            return empty.Concat(sizes);
+        }
+    }
 }
diff --git a/examples/Demo/AssetExplorer/Models/IconSearchCriteria.cs b/examples/Demo/AssetExplorer/Models/IconSearchCriteria.cs
@@ -6,6 +6,6 @@ internal class IconSearchCriteria
 {
     public string SearchTerm { get; set; } = string.Empty;
     public IconVariant Variant { get; set; } = IconVariant.Regular;
-    public IconSize Size { get; set; } = IconSize.Size24;
+    public int Size { get; set; } = 20;
     public Color Color { get; set; } = Color.Accent;
 }
diff --git a/src/Core/Components/Button/FluentButton.razor b/src/Core/Components/Button/FluentButton.razor
@@ -7,10 +7,9 @@
     <style>@CustomStyle</style>
 }
 
-
-@if (Loading && IconStart == null && IconEnd == null)
+@if (LoadingOverlay)
 {
-    <span class="loading-button">
+    <span class="@($"{Class} loading-button")" style="@Style">
         @_renderButton
         <FluentProgressRing />
     </span>
@@ -24,8 +23,8 @@ else
     protected void RenderButton(RenderTreeBuilder __builder)
     {
         <fluent-button @ref=Element
-               class="@Class"
-               style="@Style"
+               class="@(LoadingOverlay ? string.Empty : Class)"
+               style="@(LoadingOverlay ? "width: 100%;" : Style)"
                autofocus=@Autofocus
                form=@FormId
                formaction=@Action

diff --git a/src/Core/Components/Button/FluentButton.razor.cs b/src/Core/Components/Button/FluentButton.razor.cs
@@ -1,12 +1,15 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 public partial class FluentButton : FluentComponentBase
 {
     private readonly string _customId = Identifier.NewId();
     private readonly RenderFragment _renderButton;
 
+    private bool LoadingOverlay => Loading && IconStart == null && IconEnd == null;
+
     /// <summary>
     /// Determines if the element should receive document focus on page load.
     /// </summary>

diff --git a/src/Core/Components/Button/FluentButton.razor.css b/src/Core/Components/Button/FluentButton.razor.css
@@ -1,12 +1,12 @@
 .loading-button {
-    display: flex;
-    align-items: center;
-    width: fit-content;
-    justify-content: center;
+    position: relative;
 }
 
     .loading-button ::deep fluent-progress-ring {
         position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
         width: 16px;
         height: 16px;
         cursor: not-allowed;

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -7,7 +7,7 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 [CascadingTypeParameter(nameof(TOption))]
-public partial class FluentAutocomplete<TOption> : ListComponentBase<TOption>
+public partial class FluentAutocomplete<TOption> : ListComponentBase<TOption> where TOption : notnull
 {
     public const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/List/FluentAutocomplete.razor.js";
     private string _valueText = string.Empty;

diff --git a/src/Core/Components/List/FluentCombobox.razor.cs b/src/Core/Components/List/FluentCombobox.razor.cs
@@ -3,7 +3,7 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 [CascadingTypeParameter(nameof(TOption))]
-public partial class FluentCombobox<TOption> : ListComponentBase<TOption>
+public partial class FluentCombobox<TOption> : ListComponentBase<TOption> where TOption : notnull
 {
     /// <summary>
     /// Gets or sets a value indicating whether the element auto completes. See <seealso cref="AspNetCore.Components.ComboboxAutocomplete"/>

diff --git a/src/Core/Components/List/FluentListbox.razor.cs b/src/Core/Components/List/FluentListbox.razor.cs
@@ -4,7 +4,7 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 [CascadingTypeParameter(nameof(TOption))]
-public partial class FluentListbox<TOption> : ListComponentBase<TOption>
+public partial class FluentListbox<TOption> : ListComponentBase<TOption> where TOption : notnull
 {
     /// <summary>
     /// Gets or sets the maximum number of options that should be visible in the listbox scroll area.

diff --git a/src/Core/Components/List/FluentSelect.razor.cs b/src/Core/Components/List/FluentSelect.razor.cs
@@ -4,7 +4,7 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 [CascadingTypeParameter(nameof(TOption))]
-public partial class FluentSelect<TOption> : ListComponentBase<TOption>
+public partial class FluentSelect<TOption> : ListComponentBase<TOption> where TOption : notnull
 {
     /// <summary />
     protected virtual MarkupString InlineStyleValue => new InlineStyleBuilder()

diff --git a/src/Core/Components/List/ListComponentBase.cs b/src/Core/Components/List/ListComponentBase.cs
@@ -7,7 +7,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// Component that provides a list of options.
 /// </summary>
 /// <typeparam name="TOption"></typeparam>
-public abstract class ListComponentBase<TOption> : FluentComponentBase
+public abstract class ListComponentBase<TOption> : FluentComponentBase where TOption : notnull
 {
     private bool _multiple = false;
     private List<TOption> _selectedOptions = [];
@@ -132,6 +132,7 @@ protected string? InternalValue
 
     /// <summary>
     /// Gets or sets the content source of all items to display in this list.
+    /// Each item must be instantiated (cannot be null).
     /// </summary>
     [Parameter]
     public virtual IEnumerable<TOption>? Items { get; set; }
@@ -501,8 +502,13 @@ protected virtual async Task RaiseChangedEventsAsync()
 
                     builder.AddAttribute(4, "ChildContent", (RenderFragment)(content =>
                     {
+                        if (item is null)
+                        {
+                            throw new NullReferenceException($"You cannot use a null element as an option in the {nameof(Items)} property.");
+                        }
+
                         content.AddContent(5, GetOptionText(item));
-                        if (item!.GetType().IsGenericType && item.GetType().GetGenericTypeDefinition() == typeof(Option<>))
+                        if (item.GetType().IsGenericType && item.GetType().GetGenericTypeDefinition() == typeof(Option<>))
                         {
                             Option<string>? t = item as Option<string>;
                             if (t is not null)

diff --git a/src/Core/wwwroot/js/initializersLoader.webview.js b/src/Core/wwwroot/js/initializersLoader.webview.js
@@ -18,7 +18,7 @@
             window.fetch = originalFetch;
         }
 
-        const response = await originalFetch(resource as any, config);
+        const response = await originalFetch(resource, config);
         return response;
     }
 }
@@ -38,4 +38,4 @@ function getAppName() {
     return appName;
 }
 
-setupLoader();
+setupLoader();
diff --git a/tests/Core/Extensions/SampleIcons.cs b/tests/Core/Extensions/SampleIcons.cs
@@ -8,7 +8,7 @@ public static class SampleIcons
 
     public static readonly Icon PresenceAvailable = new Samples.PresenceAvailable();
 
-    private class Samples
+    internal class Samples
     {
         internal class Info : Icon { public Info() : base("Info", IconVariant.Filled, IconSize.Size24, "<path d=\"M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z\"/>") { } }
 

diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_ButtonStart.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_ButtonStart.verified.razor.html
@@ -0,0 +1,5 @@
+
+<fluent-button type="button" appearance="neutral" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="xxx">
+  <svg slot="start" style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="2">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>My Button</fluent-button>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Color.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Color.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--info);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_CustomColor.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_CustomColor.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: #ff0000;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Default.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Default.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_FromImage.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_FromImage.verified.razor.html
@@ -0,0 +1,4 @@
+
+<div style="width: 24px; fill: var(--accent-fill-rest); display: inline-block;" blazor:onclick="1">
+  <img src="./logo.png" style="width: 100%;">
+</div>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkup.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkup.verified.razor.html
@@ -0,0 +1,6 @@
+
+<div>
+  <svg viewBox="0 0 24 24" fill="var(--accent-fill-rest)" style="background-color: var(--neutral-layer-1); width: 24px;" aria-hidden="true">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>
+</div>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkupColor.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkupColor.verified.razor.html
@@ -0,0 +1,6 @@
+
+<div>
+  <svg viewBox="0 0 24 24" fill="blue" style="background-color: var(--neutral-layer-1); width: 24px;" aria-hidden="true">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>
+</div>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkupSize.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_ToMarkupSize.verified.razor.html
@@ -0,0 +1,6 @@
+
+<div>
+  <svg viewBox="0 0 24 24" fill="var(--accent-fill-rest)" style="background-color: var(--neutral-layer-1); width: 100px;" aria-hidden="true">
+    <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+  </svg>
+</div>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorRed.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorRed.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: red;" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/...e/Icons/FluentIconTests.FluentIcon_Icon_WithColorRed_OverridenByColor.verified.razor.html b/...e/Icons/FluentIconTests.FluentIcon_Icon_WithColorRed_OverridenByColor.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--info);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorSuccess.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Icon_WithColorSuccess.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--success);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_SlotTitle.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_SlotTitle.verified.razor.html
@@ -0,0 +1,5 @@
+
+<svg slot="start" style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <title>My title</title>
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Type.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Type.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Type_Color.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Type_Color.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 24px; fill: var(--info);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>
diff --git a/tests/Core/Icons/FluentIconTests.FluentIcon_Width.verified.razor.html b/tests/Core/Icons/FluentIconTests.FluentIcon_Width.verified.razor.html
@@ -0,0 +1,4 @@
+
+<svg style="width: 100px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="1">
+  <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 8.25a1 1 0 0 0-1 .88v5.74a1 1 0 0 0 2 0v-5.62l-.01-.12a1 1 0 0 0-1-.88Zm0-3.75A1.25 1.25 0 1 0 12 9a1.25 1.25 0 0 0 0-2.5Z"></path>
+</svg>