Update icons to fluentui-system-icons release 1.1.181

Microsoft.Fast.sln

@@ -26,6 +26,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".additional files", ".addit
 		LICENSE = LICENSE
 		README.md = README.md
 		SECURITY.md = SECURITY.md
+		Update Icons.md = Update Icons.md
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".workflows", ".workflows", "{A958098A-B900-4D41-9DEF-32545802D22B}"

Update Icons.md

@@ -0,0 +1,46 @@
+# Introduction
+This document describes the step needed to update the `wwwroot\icons` folder when a new version of the [fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons) is released
+
+## Setup steps
+To work with the `fluentui-system-icons` repo, you will need a Linux environment. This is due to the way the `npm` scripts are handling paths.
+
+If you are working on Windows, we recommend you setup a WSL2 environment. We have validated the steps to work from an Ubuntu 22.04 installation. If you are wotking on a Mac, you are probably good to go but this has not been verified.
+
+Once your Linux environment is setup clone the [fluentui-system-icons](https://github.com/microsoft/fluentui-system-icons) repository to your Linux environment. 
+
+```
+git clone https://github.com/microsoft/fluentui-system-icons.git
+```
+
+You do not need to create a fork of the repo as all the necessary work has been integrated into the repo already
+
+Once cloned, navigate to the directory `/packages/svg-icons` and install the needed dependencies: `npm install --only=dev`
+You might need to repeat this command on the root folder of the repo as well.
+
+## Regular update steps
+
+ - navigate to the `/packages/svg-icons` directory in your Linux environment that the repo was cloned to (as described above).
+	For example:
+	```
+	cd /source/fluent-ui-systemicons/packages/svg-icons
+	```
+
+- Clean out any previous work 
+	```
+	npm run clean
+	```
+- Run the build command
+	```
+	npm run buildforblazor
+	```
+- Navigate to the created icons folder (under svg-icons)
+	```
+	cd icons
+	```
+- Copy the result to your local fast-blazor clone/fork
+	```
+	rsync -r -v  .  /mnt/c/Source/Blazor/fast-blazor/src/Microsoft.Fast.Components.FluentUI/wwwroot/icons
+	```
+	The `/mnt/..` path is a WSL2 thing. Adjust accordingly if you are working  on a Mac. Make sure the path in the mnt (c/Source/Blazor/) points to your actual folder where the repo is in.
+
+	The `rsync` command should only copy new ad/or update files. 

examples/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor

@@ -1,40 +1,4 @@
 @page "/Icon"
-@using System.ComponentModel.DataAnnotations
-@using System.Text.RegularExpressions
-@using Microsoft.Fast.Components.FluentUI
-
-<style>
-    .preview {
-        margin: 10px;
-        --card-width: 120px;
-        --card-height: 120px;
-        --elevation: 6;
-    }
-
-        .preview:hover {
-            --elevation: 12;
-        }
-
-        .preview .inner {
-            text-align: center;
-            padding: 10px 10px 0;
-            color: var(--neutral-foreground-rest);
-        }
-
-            .preview .inner svg {
-                height: 80px;
-            }
-
-    .label {
-        text-align: center;
-        padding: 2px 5px;
-        font-size: 10px;
-        font-family: Monaco, monospace;
-        white-space: nowrap;
-        overflow: hidden;
-        background: var(--neutral-stroke-rest);
-    }
-</style>
 
 <h1>Icons</h1>
 <ApiDocumentation Component="typeof(FluentIcon)" />
@@ -93,15 +57,20 @@
         </div>
     </EditForm>
 </p>
+
+@if (icons.Count > 0)
+{
+    <p>In the results below, click on an icon card to copy a 'ready-to-paste' <code>FluentIcon</code> component to the clipboard. </p>
+}
 <div id="filled" data-is-scrollable="true" style="overflow-y:auto;height:600px;">
     <div style="display:flex;flex-flow: row wrap;">
         @foreach (IconModel icon in icons)
         {
-            <FluentCard class="preview">
-                <div class="inner">
+            <FluentCard class="preview" @onclick="()=> HandleClick(icon)">
+                <div class="inner" >
                     <FluentIcon Name=@icon.Name Size=@icon.Size Filled=@icon.Filled />
                 </div>
-                <div class="label">@icon.Name</div>
+                <div class="label">@icon.Folder</div>
             </FluentCard>
         }
         @if (icons.Count == 0)
@@ -113,77 +82,3 @@
     </div>
 </div>
 
-@code {
-    private EditContext? editContext;
-
-    List<IconModel> icons = new();
-
-    public void HandleStyle()
-    {
-        if (Form.Filled && Form.Regular || !Form.Filled && !Form.Regular)
-        {
-            Form.Style = null;
-        }
-        else if (Form.Filled && !Form.Regular)
-        {
-            Form.Style = true;
-        }
-        else if (!Form.Filled && Form.Regular)
-        {
-            Form.Style = false;
-        }
-        HandleSearch();
-    }
-
-    public void HandleSize(ChangeEventArgs args)
-    {
-        if (!string.IsNullOrEmpty(args.Value?.ToString()))
-        {
-            Form.Size = Enum.Parse<IconSize>((string)args.Value);
-            HandleSearch();
-        }
-
-        HandleSearch();
-    }
-
-    public void HandleSearchterm()
-    {
-        HandleSearch();
-    }
-
-    public void HandleSearch()
-    {
-        if (Form.Searchterm is not null && Form.Searchterm.Trim().Length > 2)
-        {
-            icons = FluentIcons.GetFilteredIcons(searchterm: Form.Searchterm.Trim(), size: Form.Size, filled: Form.Style);
-        }
-        StateHasChanged();
-        return;
-    }
-
-    public class FormModel
-    {
-        public IconSize Size { get; set; }
-
-        public string? Searchterm { get; set; }
-
-        public bool? Style { get; set; }
-
-        public bool Filled { get; set; }
-
-        public bool Regular { get; set; }
-
-    }
-
-    private FormModel Form = new()
-    {
-            Size = IconSize.Size24,
-            Searchterm = "",
-            Style = null,
-    };
-
-    protected override void OnInitialized()
-    {
-        editContext = new EditContext(Form);
-    }
- }

examples/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor.cs

@@ -0,0 +1,97 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.Fast.Components.FluentUI;
+using Microsoft.JSInterop;
+
+namespace FluentUI.Demo.Shared.Pages.Icon;
+public partial class IconPage
+{
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = default!;
+
+    private IJSObjectReference? module;
+
+    private EditContext? editContext;
+    List<IconModel> icons = new();
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
+                 "./_content/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor.js");
+        }
+    }
+
+    public void HandleStyle()
+    {
+        if (Form.Filled && Form.Regular || !Form.Filled && !Form.Regular)
+        {
+            Form.Style = null;
+        }
+        else if (Form.Filled && !Form.Regular)
+        {
+            Form.Style = true;
+        }
+        else if (!Form.Filled && Form.Regular)
+        {
+            Form.Style = false;
+        }
+
+        HandleSearch();
+    }
+
+    public void HandleSize(ChangeEventArgs args)
+    {
+        if (!string.IsNullOrEmpty(args.Value?.ToString()))
+        {
+            Form.Size = Enum.Parse<IconSize>((string)args.Value);
+            HandleSearch();
+        }
+
+        HandleSearch();
+    }
+
+    public void HandleSearch()
+    {
+        if (Form.Searchterm is not null && Form.Searchterm.Trim().Length > 2)
+        {
+            icons = FluentIcons.GetFilteredIcons(searchterm: Form.Searchterm.Trim(), size: Form.Size, filled: Form.Style);
+        }
+
+        StateHasChanged();
+        return;
+    }
+
+    public async void HandleClick(IconModel icon)
+    {
+        Console.WriteLine($"You clicked on {icon.Name}");
+
+        string Text = $@"<FluentIcon Name=""@FluentIcons.{icon.Folder}"" Size=""IconSize.{icon.Size}"" Filled={icon.Filled.ToString().ToLower()} />";
+
+        if (module is not null)
+        {
+            await module.InvokeVoidAsync("copyText", Text);
+        }
+    }
+
+    public class FormModel
+    {
+        public IconSize Size { get; set; }
+
+        public string? Searchterm { get; set; }
+
+        public bool? Style { get; set; }
+
+        public bool Filled { get; set; }
+
+        public bool Regular { get; set; }
+    }
+
+    private FormModel Form = new()
+    { Size = IconSize.Size24, Searchterm = "", Style = null, };
+    protected override void OnInitialized()
+    {
+        editContext = new EditContext(Form);
+    }
+}

examples/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor.css

@@ -0,0 +1,31 @@
+::deep .preview {
+    margin: 10px;
+    --card-width: 120px;
+    --card-height: 120px;
+    --elevation: 6;
+}
+
+    ::deep .preview:hover {
+        --elevation: 12;
+    }
+
+    ::deep .preview .inner {
+        text-align: center;
+        padding: 10px 10px 0;
+        color: var(--neutral-foreground-rest);
+    }
+
+        ::deep .preview .inner svg {
+            height: 80px;
+        }
+
+::deep .label {
+    text-align: center;
+    padding: 2px 5px;
+    font-size: 10px;
+    font-family: Monaco, monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    background: var(--neutral-stroke-rest);
+}
+

examples/FluentUI.Demo.Shared/Pages/Icon/IconPage.razor.js

@@ -0,0 +1,8 @@
+export function copyText(text) {
+    navigator.clipboard.writeText(text).then(function () {
+        alert("FluentIcon component declaration copied to clipboard:\n\n" + text);
+    })
+        .catch(function (error) {
+            alert(error);
+        });
+}