Version 3.0.1 (#686)

* Add UnitTests markdown page (#658) * ProgressToast related cahnges (#657) * FluentProgress: Add ValueChanged FluentProgressRing: Add ValueChanged Fix #655 and update example * Do not use @Bind for FluentProgress Value Update example * Add colocated files to demos * Undo add ValueChanged EventCallBack * Add Width and Height property and associated styles (#663) Co-authored-by: Vincent Baaij <[email protected]> * Point to unit test documentation * re-add fixed to DemoSection tabs * #624 Change NavMneu to use Icon Value Update version in banner * Update version in props * Fix Icons and Emojis trimmed during the WASM publishing process (#666) * FluentMessageBox: enable not supplying an icon to the body * Add doc about Icons / Emojis (#673) * Fix click not working on FluentTreeItem text (#667) Co-authored-by: Vincent Baaij <[email protected]> * Fix the Tooltip used by the FluentOverflow (#678) * Revert change in including web-components script. fix #668 Update Icon example * Fix TextField AutoComplete property to a string property (#682) * Fix #674 (#676) * Fix DemoSection label sometimes wrong * Fix #621 - Add aria-hidden to clear-button (#683) Fix some search sample a11y issues * Make FLuentToastContainer work better on mobile devices (was #684) * Replace the Icons.AllIcons property with a GetAllIcons method using reflection (#685) * Update WhatsNew --------- Co-authored-by: Denis Voituron <[email protected]> Co-authored-by: Emanuele Curati <[email protected]>
microsoft · Sep 4, 2023 · 2fb0100 · 2fb0100
1 parent 9d09256
commit 2fb0100
Show file tree

Hide file tree

Showing 28 changed files with 241 additions and 15,105 deletions.
diff --git a/WHATSNEW.md b/WHATSNEW.md
@@ -1,5 +1,25 @@
-## V3.0.0
-
+## V3.0.1
+- Fix [#643](https://github.com/microsoft/fluentui-blazor/issues/643)**: Visual Studio 2022 freezes and then crashes with v3-RC-1
+- Fix [#684](https://github.com/microsoft/fluentui-blazor/pull/684): Make FluentToastContainer work better on mobile devices
+- Fix [#621](https://github.com/microsoft/fluentui-blazor/issues/621): Add area-hidden to FluentSearch clear button
+- Fix [#674](https://github.com/microsoft/fluentui-blazor/issues/674): Collapse FluentNavMenuGroup on click if no custom action/href is assigned
+- Fix [#680](https://github.com/microsoft/fluentui-blazor/issues/680): FluentTextField AutoComplete should be a string or enum and not a boolean 
+- Fix [#668](https://github.com/microsoft/fluentui-blazor/issues/668): v3.0.0 IIS debugging/deployments 'Failed to load resource'
+- Fix [#677](https://github.com/microsoft/fluentui-blazor/issues/677): FluentOverflow not working correctly
+- Fix [#667](https://github.com/microsoft/fluentui-blazor/issues/667): FluentTreeItem select area when Text property is used
+- Fix [#660](https://github.com/microsoft/fluentui-blazor/issues/660): Allow FluentMessageBox Text to not show an Icon
+- Fix [#624](https://github.com/microsoft/fluentui-blazor/issues/624): v3 Unhandled exception rendering in NavMenuContent of FluentMainLayout
+- Fix [#655](https://github.com/microsoft/fluentui-blazor/pull/655): ProgressToast rendering error for WASM
+
+**) To fix this issue update Microsoft.Fast.Components.FluentUI.Icons v3.0.1 
+
+### Other changes
+- FluentCombobox, FluentSelect and FluentListbox now support Width and Height properties
+- Update several documentation pages about how to use Icons and Emoji
+- Included the script needed to implement Blazor Hybrid workaround easier (see readme)
+
+
+## V3.0.0
 ** 26 New components**
 - Header
 - Footer

diff --git a/examples/Demo/Shared/Components/DemoSection.razor b/examples/Demo/Shared/Components/DemoSection.razor
@@ -1,11 +1,8 @@
 @using System.Text.RegularExpressions
-@{
-    Regex pattern = new Regex("[;,<>&(){}!$^#@= ]");
-    string ariaid = pattern.Replace(Title.ToLower(), "");
-}
+
 @if (!string.IsNullOrEmpty(Title))
 {
-    <h3 id="@ariaid">@Title</h3>
+    <h3 id="@_ariaId">@Title</h3>
 }
 
 @if (Description != null)
@@ -17,10 +14,10 @@
 
 <div class="demo-section-content">
 
-    <FluentTabs ActiveTabId="@(!HideExample ? $"tab-example-{ariaid}" : $"tab-razor-{ariaid}")" fixed>
+    <FluentTabs ActiveTabId="@(!HideExample ? $"tab-example-{_ariaId}" : $"tab-razor-{_ariaId}")" fixed>
         @if (!HideExample)
         {
-            <FluentTab Id="@("tab-example-"+@ariaid)" Label="Example" fixed>
+            <FluentTab Id="@("tab-example-"+@_ariaId)" Label="Example" fixed>
                 <Content>
                     <div class="demo-section-example">
                         @ChildContent
@@ -39,19 +36,19 @@
             {
                 string tab = Path.GetExtension(pair.Key);
                 string tabname = Regex.Replace(GetDisplayName(tab), "[#|/|\\|$|*|^]", "");
-                
+
                 string label = string.Empty;
                 string id = string.Empty;
 
                 if (pair.Key.StartsWith(Component.Name))
                 {
                     label = GetDisplayName(tab);
-                    id = "tab-" + tabname + "-" + @ariaid;
+                    id = "tab-" + tabname + "-" + @_ariaId;
                 }
                 else
                 {
                     label = Path.GetFileNameWithoutExtension(pair.Key);
-                    id = "tab-" + Regex.Replace(label, "[#|/|\\|$|*|^]", "").ToLower() + "-" + @ariaid;
+                    id = "tab-" + Regex.Replace(label, "[#|/|\\|$|*|^]", "").ToLower() + "-" + @_ariaId;
                 }
                 <FluentTab Id="@id" Label="@label" fixed>
                     <Content>

diff --git a/examples/Demo/Shared/Components/DemoSection.razor.cs b/examples/Demo/Shared/Components/DemoSection.razor.cs
@@ -1,4 +1,5 @@
 using System.Reflection.Metadata;
+using System.Text.RegularExpressions;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Fast.Components.FluentUI.Infrastructure;
 
@@ -8,6 +9,9 @@ public partial class DemoSection : ComponentBase
     private bool _hasCode = false;
     private readonly Dictionary<string, string> _tabPanelsContent = new();
     private readonly List<string> _allFiles = new();
+    private string? _ariaId;
+
+    private readonly Regex _pattern = new(@"[;,<>&(){}!$^#@=/\ ]");
 
     [Inject]
     private HttpClient HttpClient { get; set; } = default!;
@@ -80,11 +84,15 @@ public partial class DemoSection : ComponentBase
     protected override void OnInitialized()
     {
         if (_allFiles.Count > 0)
+        {
             _allFiles.Clear();
+        }
 
         _allFiles.AddRange(GetCollocatedFiles());
         _allFiles.AddRange(GetAdditionalFiles());
 
+        _ariaId = _pattern.Replace(Title.ToLower(), "");
+        if (_ariaId.Length > 20) _ariaId = _ariaId[..20];
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)

diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
diff --git a/examples/Demo/Shared/Pages/Icon/Examples/IconPlacement.razor b/examples/Demo/Shared/Pages/Icon/Examples/IconPlacement.razor
@@ -1,4 +1,4 @@
 <div style="display:flex">
-    <FluentButton Appearance="Appearance.Neutral"><FluentIcon Slot="start" Icon="@Icons.Regular.Size20.ArrowCircleLeft" /> Button with icon in 'start' slot</FluentButton>
-    <FluentButton Appearance="Appearance.Neutral"><FluentIcon Slot="end" Icon="@Icons.Regular.Size20.ArrowCircleRight" /> Button with icon in 'end' slot</FluentButton>
+    <FluentButton Appearance="Appearance.Neutral"><FluentIcon Slot="start" Icon="Icons.Regular.Size20.ArrowCircleLeft" /> Button with icon in 'start' slot</FluentButton>
+    <FluentButton Appearance="Appearance.Neutral"><FluentIcon Slot="end" Icon="Icons.Regular.Size20.ArrowCircleRight" /> Button with icon in 'end' slot</FluentButton>
 </div>
diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCustomActions.razor
@@ -40,6 +40,14 @@
             It does have a Href, so it will navigate.
             *@
             <FluentNavMenuLink Href="https://microsoft.com" Text="Default behavior (navigate)" Icon="@(new Icons.Regular.Size24.Earth())" />
+
+            @*
+                This is a group without link or action. Should expand/collapse when text clicked
+            *@
+             <FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" >
+                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" />
+                 <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" />
+             </FluentNavMenuGroup>
         </FluentNavMenu>
     </div>
     <div style="width: 100%;">

diff --git a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowHorizontalExample.razor b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowHorizontalExample.razor
@@ -11,7 +11,7 @@
         </FluentBadge>
     </MoreButtonTemplate>
     <OverflowTemplate>
-        <FluentTooltip Anchor="@context.IdMoreButton">
+        <FluentTooltip Anchor="@context.IdMoreButton" UseTooltipService="false">
             @foreach (var item in context.ItemsOverflow)
             {
                 <div style="margin: 5px;">@item.Text</div>

diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchAria.razor
@@ -1,14 +1,14 @@
 <h4>With aria-label</h4>
-<FluentSearch @bind-Value=value aria-label="Search with aria-label"></FluentSearch>
+<FluentSearch @bind-Value=value aria-label="Search with aria-label" role="search"></FluentSearch>
 
 <h4>Visual vs audio label</h4>
 <FluentSearch @bind-Value=value>
-    <span  aria-label="Audio label">Visible label</span>
+    <span aria-label="Audio label" role="search">Visible label</span>
 </FluentSearch>
 
 <h4>Audio label only</h4>
 <FluentSearch @bind-Value=value>
-    <span aria-label="Audio label only"></span>
+    <span aria-label="Audio label only" role="search"></span>
 </FluentSearch>
 @code {
     string? value;

diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchInteractive.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchInteractive.razor
@@ -3,7 +3,7 @@
               AfterBindValue=HandleSearchInput
               Placeholder="Search for State" />
 <br />
-<FluentListbox Items=@searchResults TOption="string" SelectedOptionChanged="@(e => searchValue = (e != defaultResultsText ? e : string.Empty) )"  />
+<FluentListbox aria-label="search results" Items=@searchResults TOption="string" SelectedOptionChanged="@(e => searchValue = (e != defaultResultsText ? e : string.Empty) )"  />
 
 <p>
     You searched for: @searchValue

diff --git a/examples/Demo/Shared/Pages/Search/Examples/SearchInteractiveWithDebounce.razor b/examples/Demo/Shared/Pages/Search/Examples/SearchInteractiveWithDebounce.razor
@@ -6,7 +6,7 @@
               AfterBindValue="HandleClear"
               Placeholder="Search for name" />
 <br />
-<FluentListbox Items=@searchResults TOption="string" SelectedOptionChanged="@(e => SearchValue = (e != defaultResultsText ? e : string.Empty))" />
+<FluentListbox aria-label="search results" Items=@searchResults TOption="string" SelectedOptionChanged="@(e => SearchValue = (e != defaultResultsText ? e : string.Empty))" />
 <p>
     You searched for: @SearchValue
 </p>

diff --git a/examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md b/examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md
@@ -79,7 +79,7 @@ For icons the new format is like:
 
 For emoji the new format is:
 
-```razor
+```xml
 <FluentEmoji Emoji="@(Emojis.PeopleBody.Color.Default.Artist)" />
 ```
 

diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md
@@ -1,5 +1,24 @@
-## V3.0.0
-
+## V3.0.1
+- Fix [#643](https://github.com/microsoft/fluentui-blazor/issues/643)**: Visual Studio 2022 freezes and then crashes with v3-RC-1
+- Fix [#684](https://github.com/microsoft/fluentui-blazor/pull/684): Make FluentToastContainer work better on mobile devices
+- Fix [#621](https://github.com/microsoft/fluentui-blazor/issues/621): Add area-hidden to FluentSearch clear button
+- Fix [#674](https://github.com/microsoft/fluentui-blazor/issues/674): Collapse FluentNavMenuGroup on click if no custom action/href is assigned
+- Fix [#680](https://github.com/microsoft/fluentui-blazor/issues/680): FluentTextField AutoComplete should be a string or enum and not a boolean 
+- Fix [#668](https://github.com/microsoft/fluentui-blazor/issues/668): v3.0.0 IIS debugging/deployments 'Failed to load resource'
+- Fix [#677](https://github.com/microsoft/fluentui-blazor/issues/677): FluentOverflow not working correctly
+- Fix [#667](https://github.com/microsoft/fluentui-blazor/issues/667): FluentTreeItem select area when Text property is used
+- Fix [#660](https://github.com/microsoft/fluentui-blazor/issues/660): Allow FluentMessageBox Text to not show an Icon
+- Fix [#624](https://github.com/microsoft/fluentui-blazor/issues/624): v3 Unhandled exception rendering in NavMenuContent of FluentMainLayout
+- Fix [#655](https://github.com/microsoft/fluentui-blazor/pull/655): ProgressToast rendering error for WASM
+
+**) To fix this issue update Microsoft.Fast.Components.FluentUI.Icons v3.0.1 
+
+### Other changes
+- FluentCombobox, FluentSelect and FluentListbox now support Width and Height properties
+- Update several documentation pages about how to use Icons and Emoji
+- Included the script needed to implement Blazor Hybrid workaround easier (see readme)
+
+## V3.0.0
 ** 26 New components**
 - Header
 - Footer

diff --git a/src/Assets/FluentUI.Icons/Icons.cs b/src/Assets/FluentUI.Icons/Icons.cs
@@ -1,4 +1,6 @@
 using System.Diagnostics.CodeAnalysis;
+using System.Reflection.Metadata;
+using System.Xml.Linq;
 
 namespace Microsoft.Fast.Components.FluentUI;
 
@@ -44,4 +46,33 @@ public static CustomIcon GetInstance(IconInfo icon)
 
         throw new ArgumentException($"Icon '{icon.Name}' not found.");
     }
+
+    /// <summary>
+    /// Returns a new instance of the icon.
+    /// </summary>
+    /// <remarks>
+    /// This method requires dynamic access to code. This code may be removed by the trimmer.
+    /// </remarks>
+    /// <returns></returns>
+    /// <exception cref="ArgumentException">Raised when the <see cref="IconInfo.Name"/> is not found in predefined icons.</exception>
+    [RequiresUnreferencedCode("This method requires dynamic access to code. This code may be removed by the trimmer.")]
+    public static IEnumerable<IconInfo> GetAllIcons()
+    {
+        var assembly = AppDomain.CurrentDomain
+                                .GetAssemblies()
+                                .FirstOrDefault(i => i.ManifestModule.Name == LibraryName);
+
+        if (assembly != null)
+        {
+            var allTypes = assembly.GetTypes()
+                                   .Where(i => i.BaseType == typeof(Icon)
+                                            && i.Name != nameof(CustomIcon));
+
+            var allIcons = allTypes.Select(type => Activator.CreateInstance(type) as IconInfo ?? new IconInfo());
+
+            return allIcons ?? Array.Empty<IconInfo>();
+        }
+
+        return Array.Empty<IconInfo>();
+    }
 }