Merge branch 'dev' into users/vnbaaij/fix-issue-#2055

microsoft · May 20, 2024 · 211e739 · 211e739
2 parents ccd121a + dd4ad0b
commit 211e739
Show file tree

Hide file tree

Showing 36 changed files with 264 additions and 57 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -46,7 +46,7 @@ Please provide a summary of the tests affected by this work and any unique strat
 - [ ] I have added tests for my changes.
 - [ ] I have tested my changes.
 - [ ] I have updated the project documentation to reflect my changes.
-- [ ] I have read the [CONTRIBUTING](https://github.com/Microsoft/fluentui-blazor/blob/master/CONTRIBUTING.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
+- [ ] I have read the [CONTRIBUTING](https://github.com/microsoft/fluentui-blazor/blob/master/docs/contributing.md) documentation and followed the [standards](https://www.fast.design/docs/community/code-of-conduct/#our-standards) for this project.
 
 ### Component-specific
 

diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -2,14 +2,14 @@
   <PropertyGroup>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <RuntimeVersion>8.0.0</RuntimeVersion>
-    <AspNetCoreVersion>8.0.4</AspNetCoreVersion>
-    <EfCoreVersion>8.0.4</EfCoreVersion>
+    <AspNetCoreVersion>8.0.5</AspNetCoreVersion>
+    <EfCoreVersion>8.0.5</EfCoreVersion>
   </PropertyGroup>
   <ItemGroup>
     <!-- For Sample Apps -->
     <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.5.0" />
     <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.6.0" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.7.0" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" version="4.7.2" />
     <!-- Build dependencies -->
     <PackageVersion Include="Markdig.Signed" Version="0.34.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion)" />
@@ -30,12 +30,12 @@
     <PackageVersion Include="System.Text.Encodings.Web" Version="$(RuntimeVersion)" />
     <PackageVersion Include="System.Text.Json" Version="8.0.3" />
     <!-- Test dependencies -->
-    <PackageVersion Include="bunit" Version="1.27.17" />
+    <PackageVersion Include="bunit" Version="1.28.9" />
     <PackageVersion Include="FluentAssertions" Version="7.0.0-alpha.3" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.9.0" />
-    <PackageVersion Include="xunit" Version="2.7.0" />
-    <PackageVersion Include="xunit.runner.visualstudio" Version="2.5.7" />
+    <PackageVersion Include="xunit" Version="2.8.0" />
+    <PackageVersion Include="xunit.runner.visualstudio" Version="2.8.0" />
     <PackageVersion Include="coverlet.msbuild" Version="6.0.0" />
-    <PackageVersion Include="coverlet.collector" Version="6.0.0" />
+    <PackageVersion Include="coverlet.collector" Version="6.0.2" />
   </ItemGroup>
-</Project>
+</Project>
diff --git a/WHATSNEW.md b/WHATSNEW.md
@@ -1,3 +1,31 @@
+## v4.7.3
+
+### Icons
+- Update to Fluent UI System Icons 1.1.239
+
+    **What's new (Name / Size(s) / Variant(s))**
+    - Arrow Turn Right / 16 / Filled & Regular
+    - Chart Multiple / 16 / Filled & Regular
+    - Column / 24 / Filled & Regular
+    - Data Pie / 16 / Filled & Regular
+    - Layout Column Two Focus Left / 32 / Filled
+    - Layout Column Two Focus Right / 32 / Filled
+    - Layout Column Two / 32 / Filled & Regular
+    - Layout Row Two Focus Top / 32 / Filled
+    - Layout Row Two / 32 / Filled & Regular
+    - Mail Copy / 32 / Filled & Regular
+    - Paint Brush Sparkle / 20, 24 / Filled & Regular
+    - People Community / 12 / Filled & Regular
+    - Person Board / 12 / Filled & Regular
+    - Person Tentative / 16, 20, 24 / Filled & Regular
+    - Tab Desktop Search / 16, 20, 24 / Filled & Regular
+    - Table Sparkle / 20, 24 / Filled & Regular
+
+    **What's updated (Name / Size(s) / Variant(s))**
+    - Chart Multiple / 20, 24 / Filled & Regular
+    - Column Edit / 24 / Filled & Regular
+    - Data Pie / 24 / Filled & Regular  
+
 ## v4.7.2
 
 ### Demo site and documentation 

diff --git a/examples/Demo/Shared/Pages/Design/DesignTokensPage.razor b/examples/Demo/Shared/Pages/Design/DesignTokensPage.razor
@@ -6,13 +6,20 @@
 
 <MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/DesignTokens.md" OnContentConverted="RefreshTableOfContents" />
 
-@code {
+@if (refreshCount > 3)
+{
+    <OfficeColorTable />
+}
 
+@code {
     [CascadingParameter]
     public EventCallback OnRefreshTableOfContents { get; set; }
 
+    private int refreshCount = 0;
+
     private async Task RefreshTableOfContents()
     {
         await OnRefreshTableOfContents.InvokeAsync();
+        refreshCount++; ;
     }
 }
diff --git a/examples/Demo/Shared/Pages/Design/OfficeColorTable.razor b/examples/Demo/Shared/Pages/Design/OfficeColorTable.razor
@@ -0,0 +1,48 @@
+<style>
+    th, td {
+        border: solid gray 1px;
+        padding: 0 5px;
+    }
+</style>
+
+<div>
+    <table>
+        <thead>
+            <tr>
+                <th>Product</th>
+                <th>AccentBaseColor</th>
+            </tr>
+        </thead>
+        <tbody>
+            @{
+                @foreach (var color in OfficeColorUtilities.AllColors)
+                {
+                    <tr>
+                        <td>
+                            <FluentLabel>@color</FluentLabel>
+                        </td>
+                        <td>
+                            <FluentStack>
+                                <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
+                                            Color="Color.Custom"
+                                            CustomColor="@GetCustomColor(color)" />
+                                <FluentLabel>@GetCustomColor(color)</FluentLabel>
+                            </FluentStack>
+                        </td>
+                    </tr>
+                }
+            }
+        </tbody>
+    </table>
+</div>
+
+@code {
+    private static string? GetCustomColor(OfficeColor? color)
+    {
+        return color switch
+        {
+            OfficeColor.Default => "#036ac4",
+            _ => color.ToAttributeValue(),
+        };
+    }
+}
diff --git a/examples/Demo/Shared/Pages/Home/Home.razor b/examples/Demo/Shared/Pages/Home/Home.razor
@@ -10,7 +10,7 @@
     <br />
     <p>
         The demo and documentation sites for previous version is also still available:<br />
-        <a href="https://calm-sea-053fa6a03-archivesv3.westeurope.3.azurestaticapps.net/" target="_blank">Version 3.7.0</a><br />
+        <a href="https://calm-sea-053fa6a03-archivesv3.westeurope.3.azurestaticapps.net/" target="_blank">Version 3.7.1</a><br />
         This version supports both .NET 6 and .NET 7 (end of support on May 14 2024).
     </p>
 </div>

diff --git a/examples/Demo/Shared/Pages/Icon/IconPage.razor b/examples/Demo/Shared/Pages/Icon/IconPage.razor
@@ -94,7 +94,11 @@
             <code>&lt;FluentButton IconStart="@@(new MyCircle())">Refresh&lt;/FluentButton></code>
         </li>
     </ul>
-    <br /><br />
+    Setting <code>Width=""</code> (an empty string) makes the icon 100% width of the enclosing
+    container and stylable from CSS. By omitting this attribute or assigning to <code>null</code>,
+    for example via <code>Width="@@null"</code>, the default icon size will be used.
+    <br />
+    <br />
     <CodeSnippet Language="language-csharp">public class MyCircle : Microsoft.FluentUI.AspNetCore.Components.Icon
 {
     private const string SVG_CONTENT = "&lt;svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'>&lt;circle cx='160' cy='160' r='140'/>&lt;/svg>";

diff --git a/examples/Demo/Shared/Pages/List/Combobox/Examples/ComboboxFromListOfOptions.razor b/examples/Demo/Shared/Pages/List/Combobox/Examples/ComboboxFromListOfOptions.razor
@@ -20,8 +20,8 @@
 
 <FluentCombobox Items=@intOptions 
                 TOption="Option<int>"
-                OptionText="@(i => i.Text.ToString())" 
-                OptionValue="@(i => i.Value.ToString())" 
+                OptionText="@(i => i.Text)"
+                OptionValue="@(i => i.Value.ToString())"
                 OptionDisabled="@(i => i.Disabled)"
                 @bind-SelectedOption="@selectedIntOption"
                 @bind-Value="@intValue" />
@@ -48,9 +48,9 @@
 
     List<Option<int>> intOptions = new()
         {
-            { new Option<int> { Value = 1, Text = 1, Disabled = true } },
-            { new Option<int> { Value = 2, Text = 2 } },
-            { new Option<int> { Value = 3, Text = 3 } }
+            { new Option<int> { Value = 1, Text = "1", Disabled = true } },
+            { new Option<int> { Value = 2, Text = "2" } },
+            { new Option<int> { Value = 3, Text = "3" } }
 
         };
 }
diff --git a/examples/Demo/Shared/Pages/List/Listbox/Examples/ListboxFromListOfOptions.razor b/examples/Demo/Shared/Pages/List/Listbox/Examples/ListboxFromListOfOptions.razor
@@ -16,7 +16,7 @@
 
 <FluentListbox Items=@intOptions 
                TOption="Option<int>"
-               OptionText="@(i => i.Text.ToString())" 
+               OptionText="@(i => i.Text)"
                OptionValue="@(i => i.Value.ToString())"
                OptionDisabled="@(i => i.Disabled)"
                @bind-SelectedOption="@selectedIntOption"
@@ -43,9 +43,9 @@
 
 List<Option<int>> intOptions = new()
     {
-        { new Option<int> { Value = 1, Text = 1, Disabled = true } },
-        { new Option<int> { Value = 2, Text = 2 } },
-        { new Option<int> { Value = 3, Text = 3 } }
+        { new Option<int> { Value = 1, Text = "1", Disabled = true } },
+        { new Option<int> { Value = 2, Text = "2" } },
+        { new Option<int> { Value = 3, Text = "3" } }
 
     };
 }
diff --git a/examples/Demo/Shared/Pages/List/Select/Examples/SelectFromListOfOptions.razor b/examples/Demo/Shared/Pages/List/Select/Examples/SelectFromListOfOptions.razor
@@ -15,7 +15,7 @@
 <p><em>Note that the second option in the list is automatically highlighted but it has <strong>NOT</strong> been selected. It's just the first item in the list available for selection</em></p>
 <FluentSelect Items=@intOptions
               TOption="Option<int>"
-              OptionText="@(i => i.Text.ToString())"
+              OptionText="@(i => i.Text)"
               OptionValue="@(i => i.Value.ToString())"
               OptionDisabled="@(i => i.Disabled)"
 @bind-SelectedOption="@selectedIntOption"
@@ -81,9 +81,9 @@
 
     List<Option<int>> intOptions = new()
     {
-        { new Option<int> { Value = 1, Text = 1, Disabled = true, Icon = (new Icons.Regular.Size24.NumberCircle1(), Color.Neutral, "start" ) } },
-        { new Option<int> { Value = 2, Text = 2, Icon = (new Icons.Regular.Size24.NumberCircle2(), Color.Neutral, "end" ) } },
-        { new Option<int> { Value = 3, Text = 3, Icon = (new Icons.Regular.Size24.NumberCircle3(), Color.Neutral, "start" ) } }
+        { new Option<int> { Value = 1, Text = "1", Disabled = true, Icon = (new Icons.Regular.Size24.NumberCircle1(), Color.Neutral, "start" ) } },
+        { new Option<int> { Value = 2, Text = "2", Icon = (new Icons.Regular.Size24.NumberCircle2(), Color.Neutral, "end" ) } },
+        { new Option<int> { Value = 3, Text = "3", Icon = (new Icons.Regular.Size24.NumberCircle3(), Color.Neutral, "start" ) } }
 
     };
 }
diff --git a/examples/Demo/Shared/wwwroot/docs/DesignTokens.md b/examples/Demo/Shared/wwwroot/docs/DesignTokens.md
@@ -304,7 +304,7 @@ public async Task OnClick()
 }
 ```
 
-As can be seen in the code above (with the `ref4.Element`), it is posible to apply multiple tokens to the same component.
+As can be seen in the code above (with the `ref4.Element`), it is possible to apply multiple tokens to the same component.
 
 For Design Tokens that work with a color value, you must call the `ToSwatch()` extension method on a string value or use one of the Swatch constructors. This 
 makes sure the color is using a format that Design Tokens can handle. A Swatch has a lot of commonality with the `System.Drawing.Color` struct. Instead of 
@@ -336,4 +336,4 @@ To make this work, a link needs to be created between the Design Token component
 
 ## Colors for integration with specific Microsoft products
 If you are configuring the components for integration into a specific Microsoft product, the following table provides `AccentBaseColor` values you can use. 
-*The library offers an `OfficeColor` enumeration which contains the specific accent colors for 17 different Office applications.*
+*The specific accent colors for many Office applications are offered in the `OfficeColor` enumeration.*
diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md
@@ -1,3 +1,31 @@
+## v4.7.3
+
+### Icons
+- Update to Fluent UI System Icons 1.1.239
+
+    **What's new (Name / Size(s) / Variant(s))**
+    - Arrow Turn Right / 16 / Filled & Regular
+    - Chart Multiple / 16 / Filled & Regular
+    - Column / 24 / Filled & Regular
+    - Data Pie / 16 / Filled & Regular
+    - Layout Column Two Focus Left / 32 / Filled
+    - Layout Column Two Focus Right / 32 / Filled
+    - Layout Column Two / 32 / Filled & Regular
+    - Layout Row Two Focus Top / 32 / Filled
+    - Layout Row Two / 32 / Filled & Regular
+    - Mail Copy / 32 / Filled & Regular
+    - Paint Brush Sparkle / 20, 24 / Filled & Regular
+    - People Community / 12 / Filled & Regular
+    - Person Board / 12 / Filled & Regular
+    - Person Tentative / 16, 20, 24 / Filled & Regular
+    - Tab Desktop Search / 16, 20, 24 / Filled & Regular
+    - Table Sparkle / 20, 24 / Filled & Regular
+
+    **What's updated (Name / Size(s) / Variant(s))**
+    - Chart Multiple / 20, 24 / Filled & Regular
+    - Column Edit / 24 / Filled & Regular
+    - Data Pie / 24 / Filled & Regular
+
 ## v4.7.2
 
 ### Demo site and documentation 

diff --git a/src/Assets/FluentUI.Icons/Icons/Filled12.cs b/src/Assets/FluentUI.Icons/Icons/Filled12.cs
@@ -124,7 +124,9 @@ public class Open : Icon { public Open() : base("Open", IconVariant.Filled, Icon
             public class Organization : Icon { public Organization() : base("Organization", IconVariant.Filled, IconSize.Size12, "<path d=\"M5.5 4.94a2 2 0 1 1 1 0V6h2a1 1 0 0 1 1 1v1.06a2 2 0 1 1-1 0V7h-5v1.06a2 2 0 1 1-1 0V7a1 1 0 0 1 1-1h2V4.94Z\"/>") { } }
             public class Pause : Icon { public Pause() : base("Pause", IconVariant.Filled, IconSize.Size12, "<path d=\"M3 2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Zm5 0a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8Z\"/>") { } }
             public class People : Icon { public People() : base("People", IconVariant.Filled, IconSize.Size12, "<path d=\"M4 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm4.5 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM2.25 7C1.56 7 1 7.56 1 8.25c0 0 0 2.25 3 2.25 2.38 0 2.87-1.41 2.97-2C7 8.35 7 8.25 7 8.25 7 7.56 6.44 7 5.75 7h-3.5ZM8 8.6a2.26 2.26 0 0 1-.1.54c-.06.22-.16.49-.34.76.27.06.58.1.94.1C11 10 11 8.25 11 8.25 11 7.56 10.44 7 9.75 7H7.62c.24.36.38.79.38 1.25v.35Z\"/>") { } }
+            public class PeopleCommunity : Icon { public PeopleCommunity() : base("PeopleCommunity", IconVariant.Filled, IconSize.Size12, "<path d=\"M5 2.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM6 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM3.55 5H2a1 1 0 0 0-1 1v.2c0 .6.34 1.1.8 1.41.27.2.6.34.95.42a2 2 0 0 1 1.3-.98A2.49 2.49 0 0 1 3.54 5Zm4.4 2.05a2 2 0 0 1 1.3.98c.36-.08.68-.22.95-.42.46-.32.8-.8.8-1.4V6a1 1 0 0 0-1-1H8.45a2.51 2.51 0 0 1-.5 2.05ZM4.5 8a1 1 0 0 0-1 1v.17c0 .58.36 1.05.8 1.36.46.3 1.06.47 1.7.47.64 0 1.24-.17 1.7-.47.44-.3.8-.78.8-1.36V9a1 1 0 0 0-1-1h-3ZM9 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"/>") { } }
             public class Person : Icon { public Person() : base("Person", IconVariant.Filled, IconSize.Size12, "<path d=\"M6 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm2.5 5h-5C2.67 6 2 6.67 2 7.5c0 1.12.46 2.01 1.21 2.61.74.6 1.74.89 2.79.89s2.05-.29 2.79-.89C9.54 9.51 10 8.61 10 7.5 10 6.67 9.33 6 8.5 6Z\"/>") { } }
+            public class PersonBoard : Icon { public PersonBoard() : base("PersonBoard", IconVariant.Filled, IconSize.Size12, "<path d=\"M1 3c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3Zm4 1.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 3c1.5 0 2-.75 2-1.5A.75.75 0 0 0 6.25 5h-2.5a.75.75 0 0 0-.75.75c0 .75.5 1.5 2 1.5ZM3.27 10c.34.6.99 1 1.73 1h2a4 4 0 0 0 4-4V5a2 2 0 0 0-1-1.73V7a3 3 0 0 1-3 3H3.27Z\"/>") { } }
             public class PersonCircle : Icon { public PersonCircle() : base("PersonCircle", IconVariant.Filled, IconSize.Size12, "<path d=\"M11 6A5 5 0 1 1 1 6a5 5 0 0 1 10 0Zm-6.78.26a.84.84 0 0 0-.22.55v.16c0 .82.82 1.53 2 1.53 1.18 0 2-.71 2-1.53v-.16c0-.2-.09-.4-.22-.55A.75.75 0 0 0 7.22 6H4.79a.75.75 0 0 0-.56.26ZM6 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"/>") { } }
             public class Phone : Icon { public Phone() : base("Phone", IconVariant.Filled, IconSize.Size12, "<path d=\"M3 2.5C3 1.67 3.67 1 4.5 1h3C8.33 1 9 1.67 9 2.5v7c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 3 9.5v-7ZM5.5 8a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Z\"/>") { } }
             public class Pin : Icon { public Pin() : base("Pin", IconVariant.Filled, IconSize.Size12, "<path d=\"M8.05 1.44a1.5 1.5 0 0 0-2.38.34L4.14 4.61l-2.33.93a.5.5 0 0 0-.16.81L3.29 8l-2.14 2.15L1 11l.85-.15L4 8.71l1.65 1.64a.5.5 0 0 0 .81-.16l.94-2.34 2.82-1.52a1.5 1.5 0 0 0 .34-2.38l-2.5-2.51Z\"/>") { } }