[MenuButton] Add an optional start icon (#2707)

* Add an optional start icon for the FluentMenuButton

* Add missing file

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -5800,6 +5800,11 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentPersona.GetDefaultInitials(System.String)">
             <summary />
         </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1.RequiredAriaLabel">
+            <summary>
+            Gets the `Required` aria label.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1.InlineStyleValue">
             <summary />
         </member>
@@ -6049,6 +6054,11 @@
             Gets or sets the texts shown on th button.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton.IconStart">
+            <summary>
+            Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Icon"/> displayed at the start of button content.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton.ButtonStyle">
             <summary>
             Gets or sets the button style.

examples/Demo/Shared/Pages/MenuButton/Examples/MenuButtonAppearance.razor

@@ -11,6 +11,9 @@
     <span>
         Stealth: <FluentMenuButton @ref=menubutton ButtonAppearance="@Appearance.Stealth" Text="Select an item" Items="@items"></FluentMenuButton>
     </span>
+    <span>
+        With Icon: <FluentMenuButton @ref=menubutton ButtonAppearance="@Appearance.Stealth" Text="Select an item" IconStart="new Icons.Regular.Size16.Globe()" Items="@items"></FluentMenuButton>
+    </span>
 </FluentStack>
 @code {
 

src/Core/Components/MenuButton/FluentMenuButton.razor

@@ -3,7 +3,7 @@
 @inherits FluentComponentBase
 
 <div class="fluent-menubutton-container">
-    <FluentButton Id="@_buttonId" @ref="Button" Appearance="@ButtonAppearance" Style=@ButtonStyle aria-haspopup="true" aria-expanded="@_visible" @onclick=ToggleMenu @onkeydown=OnKeyDown>
+    <FluentButton Id="@_buttonId" @ref="Button" Appearance="@ButtonAppearance" Style=@ButtonStyle IconStart="@IconStart" aria-haspopup="true" aria-expanded="@_visible" @onclick=ToggleMenu @onkeydown=OnKeyDown>
         @Text
         <FluentIcon Value="@(new CoreIcons.Regular.Size12.ChevronDown())" Slot="end" Color="@_iconColor" />
     </FluentButton>

src/Core/Components/MenuButton/FluentMenuButton.razor.cs

@@ -38,6 +38,12 @@ public partial class FluentMenuButton : FluentComponentBase
     [Parameter]
     public string? Text { get; set; }
 
+    /// <summary>
+    /// Gets or sets the <see cref="Icon"/> displayed at the start of button content.
+    /// </summary>
+    [Parameter]
+    public Icon? IconStart { get; set; }
+
     /// <summary>
     /// Gets or sets the button style.
     /// </summary>

tests/Core/_ToDo/MenuButton/FluentMenuButtonTests.FluentMenuButton_Default.verified.html

@@ -1,8 +1,11 @@
 
 <div class="fluent-menubutton-container" b-nrgns4mio7="">
-    <fluent-button type="button" id="xxx" appearance="accent" blazor:onclick="1" aria-haspopup="true" blazor:onkeydown="2" b-x1200685t0="" blazor:elementreference="xxx">
-        <svg slot="end" style="width: 12px; fill: var(--neutral-fill-rest);" focusable="false" viewBox="0 0 12 12" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
-            <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 1 1 .7.7l-3.5 3.5a.5.5 0 0 1-.7 0l-3.5-3.5a.5.5 0 0 1 0-.7Z"></path>
-        </svg>
-    </fluent-button>
-</div>
+  <fluent-button type="button" id="xxx" appearance="accent" blazor:onclick="1" aria-haspopup="true" blazor:onkeydown="2" b-x1200685t0="" blazor:elementreference="xxx">
+    <svg slot="start" style="width: 24px; fill: var(--neutral-layer-1);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
+      <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>
+    <svg slot="end" style="width: 12px; fill: var(--neutral-fill-rest);" focusable="false" viewBox="0 0 12 12" aria-hidden="true" blazor:onkeydown="5" blazor:onclick="6">
+      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 1 1 .7.7l-3.5 3.5a.5.5 0 0 1-.7 0l-3.5-3.5a.5.5 0 0 1 0-.7Z"></path>
+    </svg>
+  </fluent-button>
+</div>

tests/Core/_ToDo/MenuButton/FluentMenuButtonTests.cs

@@ -1,5 +1,6 @@
 using Bunit;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.FluentUI.AspNetCore.Components.Tests.Extensions;
 using Xunit;
 
 namespace Microsoft.FluentUI.AspNetCore.Components.Tests.MenuButton;
@@ -30,6 +31,7 @@ public void FluentMenuButton_Default()
             .Add(p => p.MenuStyle, menuStyle)
             .Add(p => p.Items, items)
             .Add(p => p.OnMenuChanged, onMenuChanged)
+            .Add(p => p.IconStart, SampleIcons.Info)
         );
         //Act