Merge pull request #174 from microsoft/fluenticon

feat: Add FluentIcon component

Author: vnbaaij

Microsoft.Fast.sln

@@ -13,7 +13,27 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentUI.Demo.Server", "exa
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentUI.Demo.Shared", "examples\FluentUI.Demo.Shared\FluentUI.Demo.Shared.csproj", "{CEE536EE-1F7E-4B50-8397-27E8C287C7A1}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FluentUI.Demo.Client", "examples\FluentUI.Demo.Client\FluentUI.Demo.Client.csproj", "{57790DB9-2EE1-4D78-BA73-9F63D8466F02}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "FluentUI.Demo.Client", "examples\FluentUI.Demo.Client\FluentUI.Demo.Client.csproj", "{57790DB9-2EE1-4D78-BA73-9F63D8466F02}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".additional files", ".additional files", "{B5536EE9-65A8-46B8-94CD-469364C83F8B}"
+	ProjectSection(SolutionItems) = preProject
+		CODE_OF_CONDUCT.md = CODE_OF_CONDUCT.md
+		CONTRIBUTING.md = CONTRIBUTING.md
+		LICENSE = LICENSE
+		README.md = README.md
+		SECURITY.md = SECURITY.md
+	EndProjectSection
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = ".workflows", ".workflows", "{A958098A-B900-4D41-9DEF-32545802D22B}"
+	ProjectSection(SolutionItems) = preProject
+		.github\workflows\ci-validate.yml = .github\workflows\ci-validate.yml
+		.github\workflows\cicd_publish.yml = .github\workflows\cicd_publish.yml
+		.github\workflows\codeql-analysis.yml = .github\workflows\codeql-analysis.yml
+	EndProjectSection
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.Fast.Templates.FluentUI", "templates\Microsoft.Fast.Templates.FluentUI.csproj", "{86B789BF-DC71-4B5F-A530-B7CDF17BD293}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.Fast.Components.FluentUI.Generators", "src\Microsoft.Fast.Components.FluentUI.Generators\Microsoft.Fast.Components.FluentUI.Generators.csproj", "{D767E0CA-86FF-4152-B731-762458CB5A5D}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -73,6 +93,30 @@ Global
 		{57790DB9-2EE1-4D78-BA73-9F63D8466F02}.Release|x64.Build.0 = Release|Any CPU
 		{57790DB9-2EE1-4D78-BA73-9F63D8466F02}.Release|x86.ActiveCfg = Release|Any CPU
 		{57790DB9-2EE1-4D78-BA73-9F63D8466F02}.Release|x86.Build.0 = Release|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Debug|x64.Build.0 = Debug|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Debug|x86.Build.0 = Debug|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Release|Any CPU.Build.0 = Release|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Release|x64.ActiveCfg = Release|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Release|x64.Build.0 = Release|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Release|x86.ActiveCfg = Release|Any CPU
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293}.Release|x86.Build.0 = Release|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Debug|x64.Build.0 = Debug|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Debug|x86.Build.0 = Debug|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Release|x64.ActiveCfg = Release|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Release|x64.Build.0 = Release|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Release|x86.ActiveCfg = Release|Any CPU
+		{D767E0CA-86FF-4152-B731-762458CB5A5D}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -82,6 +126,8 @@ Global
 		{1E1FFAAA-063F-47F8-A2C2-18AB6432994D} = {71623095-9CCB-40BA-A0A7-4A739DA8E913}
 		{CEE536EE-1F7E-4B50-8397-27E8C287C7A1} = {71623095-9CCB-40BA-A0A7-4A739DA8E913}
 		{57790DB9-2EE1-4D78-BA73-9F63D8466F02} = {71623095-9CCB-40BA-A0A7-4A739DA8E913}
+		{86B789BF-DC71-4B5F-A530-B7CDF17BD293} = {30F6D568-0EFB-479D-8D69-C51CE5CABC22}
+		{D767E0CA-86FF-4152-B731-762458CB5A5D} = {30F6D568-0EFB-479D-8D69-C51CE5CABC22}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {0A3E27AA-91CB-4D3F-9C1E-390E3AA8DEC1}

README.md

@@ -61,6 +61,17 @@ Copy this to your `wwwroot/script` folder and reference it with a script tag as
 >
 > If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the `@` character by repeating it in the source link. For more information check out the [Razor Pages syntax documentation](/aspnet/core/mvc/views/razor).
 
+In your Program.cs file you need to add the following:
+```csharp
+builder.Services.AddFluentUIComponents();
+```
+
+if you are using Blazor Server, you need to make sure the `HttpClient` service is added:
+
+```csharp
+builder.Services.AddHttpClient();
+```
+
 ### Using the FluentUI Web Components
 
 With the package installed and the script configured, you can begin using the Fluent UI Web Components in the same way as any other Blazor component. Just be sure to add the following using statement to your views:

examples/FluentUI.Demo.Client/Program.cs

@@ -1,11 +1,13 @@
 using FluentUI.Demo.Shared;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Fast.Components.FluentUI;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddFluentUIComponents();
 
 await builder.Build().RunAsync();

examples/FluentUI.Demo.Client/wwwroot/staticwebapp.config.json

@@ -1,5 +1,6 @@
 {
   "navigationFallback": {
-    "rewrite": "/index.html"
+    "rewrite": "/index.html",
+    "exclude": [ "_content/Microsoft.Fast.Components.FluentUI/icons/*" ]
   }
 }

examples/FluentUI.Demo.Server/Program.cs

@@ -1,8 +1,12 @@
+using Microsoft.Fast.Components.FluentUI;
+
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
 builder.Services.AddRazorPages();
+builder.Services.AddHttpClient();
 builder.Services.AddServerSideBlazor();
+builder.Services.AddFluentUIComponents();
 
 
 var app = builder.Build();

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

@@ -0,0 +1,189 @@
+@page "/IconPage"
+@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>
+<h2>Overview</h2>
+<p>
+    <dl>
+        <dt>Icon using 'accent-fill-rest' color:<br />
+            <code>&lt;FluentIcon Name=@@FluentIcons.Accessibility Size=IconSize.Size32 Filled=true /&gt;</code></dt>
+        <dd><FluentIcon Name=@FluentIcons.Accessibility Size=IconSize.Size32 Filled=true /></dd>
+        <dt>Icon without accent color: <br />
+            <code>&lt;FluentIcon Name=@@FluentIcons.AccessibilityCheckmark Size=IconSize.Size24 Filled=true UseAccentColor=false /&gt;</code></dt>
+        <dd><FluentIcon Name=@FluentIcons.AccessibilityCheckmark Size=IconSize.Size24 Filled=true UseAccentColor=false /></dd>
+    </dl>
+    
+    
+</p>
+<h2>Culture Aware</h2>
+<p>
+    Some icons offer alternatives for specific languages (neutral cultures). You can specify a language to use for the icon by using the <code>NeutralCultureName</code> parameter and giving it the two letter ISO code of the culture.
+    If a language version of an icon is not found, the original neutral version will be used.
+    <dl> 
+        <dt>Neutral @@FluentIcons.TextBold icons</dt>
+        <dd style="line-height: 30px; display: flex; align-items: center; margin: 10px 40px;">Filled: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=true /> Regular: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=false /></dd>
+        <dt>French @@FluentIcons.TextBold icons (<code>NeutralCultureName="fr"</code>)</dt>
+        <dd style="line-height: 30px; display: flex; align-items: center; margin: 10px 40px;">Filled: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=true NeutralCultureName="fr" /> Regular: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=false NeutralCultureName="fr"/></dd>
+        <dt>German @@FluentIcons.TextBold icons (<code>NeutralCultureName="de"</code>)</dt>
+        <dd style="line-height: 30px; display: flex; align-items: center; margin: 10px 40px;">Filled: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=true NeutralCultureName="de" /> Regular: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=false NeutralCultureName="de"/></dd>
+        <dt>Greek @@FluentIcons.TextBold icons (<code>NeutralCultureName="el"</code>) (does not exist, fall back to original)</dt>
+        <dd style="line-height: 30px; display: flex; align-items: center; margin: 10px 40px;">Filled: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=true NeutralCultureName="el" /> Regular: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=false NeutralCultureName="el"/></dd>
+        <dt>Spanish @@FluentIcons.TextBold icons (<code>NeutralCultureName="es"</code>)</dt>
+        <dd style="line-height: 30px; display: flex; align-items: center; margin: 10px 40px;">Filled: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=true NeutralCultureName="es" /> Regular: <FluentIcon Name=@FluentIcons.TextBold Size=IconSize.Size24 Filled=false NeutralCultureName="es"/></dd>
+    </dl>
+</p>
+<h2>Explore Icons</h2>
+<p>
+    <EditForm EditContext="@editContext" >
+        <div style="display: flex; flex-wrap: wrap; width: 90%;height: 100px;align-items: center;justify-content: space-between;">
+            <div style="display: flex;align-content: center;align-items: center;">
+                <p style="padding-right: 10px;"><label for="Searchterm">Search term</label></p>
+                <FluentTextField Name="Searchterm" @bind-Value="Form.Searchterm" Placeholder="Search.."></FluentTextField>
+            </div>
+            <div style="display: flex;align-content: center;align-items: center;">
+                <p style="padding-right: 10px;"><label for="Size">Select Size</label></p>
+                <FluentSelect TValue="IconSize" Name="Size" @bind-Value="Form.Size" @onchange="@(x => HandleSize(x))">
+                    @foreach (IconSize size in Enum.GetValues<IconSize>())
+                    {
+                        <FluentOption Value=@size>@((int)size)</FluentOption>
+                    }
+                </FluentSelect>
+            </div>
+
+            <div style="display: flex;align-content: center;align-items: center;">
+                <FluentCheckbox @bind-Value="Form.Filled" @onclick="HandleStyle">Filled</FluentCheckbox>
+                <FluentCheckbox @bind-Value="Form.Regular" @onclick="HandleStyle">Regular</FluentCheckbox>
+            </div>
+            <FluentButton @onclick="HandleSearch"><FluentIcon Name="@FluentIcons.Search" Size="@IconSize.Size16" Filled=false Slot="start"></FluentIcon> Search</FluentButton>
+        </div>
+    </EditForm>
+</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">
+                    <FluentIcon Name=@icon.Name Size=@icon.Size Filled=@icon.Filled />
+                </div>
+                <div class="label">@icon.Name</div>
+            </FluentCard>
+        }
+        @if (icons.Count == 0)
+        {
+        <div style="display: flex;align-content: center;align-items: center;">
+            <p style="padding-right: 10px;">No icons found</p>
+        </div>
+        }
+    </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/Shared/NavMenu.razor

@@ -49,6 +49,9 @@
         <li>
             <FluentAnchor Href="HorizontalScrollPage" Appearance=@SetAppearance("HorizontalScrollPage")>Horizontal Scroll</FluentAnchor>
         </li>
+        <li>
+            <FluentAnchor Href="IconPage" Appearance=@SetAppearance("IconPage")>Icon</FluentAnchor>
+        </li>
         <li>
             <FluentAnchor Href="ListboxOptionPage" Appearance=@SetAppearance("ListboxOptionPage")>Listbox Option</FluentAnchor>
         </li>