NaveMenu: add Tooltip #v3

microsoft · Nov 29, 2023 · d9bfd29 · d9bfd29
1 parent 39f43c7
commit d9bfd29
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 105 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -5064,6 +5064,12 @@
             Defaults to <see cref="F:Microsoft.AspNetCore.Components.Routing.NavLinkMatch.Prefix"/>.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.Tooltip">
+            <summary>
+            Gets or sets the tooltip to display when the mouse is placed over the item.
+            For  <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup" /> the <c>Title</c> is used as fallback.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.HasIcon">
             <summary>
             Returns <see langword="true"/> if the item has an <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentNavBase.Icon"/> set.

diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
@@ -3,13 +3,13 @@
 <FluentStack Orientation="Orientation.Horizontal" Width="100%">
     <div>
         <FluentNavMenu @bind-Expanded="@Expanded" Width="150" Collapsible="true" Title="Collapsible demo">
-            <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())">Item 1</FluentNavLink>
-            <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())">Item 2</FluentNavLink>
-            <FluentNavGroup Title="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" >
-                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" >Item 3.1</FluentNavLink>
-                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())" >Item 3.2</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())" Tooltip="Item 1 tooltip">Item 1</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())" Tooltip="Item 2 tooltip">Item 2</FluentNavLink>
+            <FluentNavGroup Title="Item 3" Tooltip="Item 3 tooltip" Icon="@(new Icons.Regular.Size24.EarthLeaf())" >
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" Tooltip="Item 3.1 tooltip">Item 3.1</FluentNavLink>
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Tooltip="Item 3.2 tooltip">Item 3.2</FluentNavLink>
             </FluentNavGroup> 
-            <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true" Href="https://microsoft.com">Item 4</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true" Href="https://microsoft.com" Tooltip="Item 4 tooltip1">Item 4</FluentNavLink>
         </FluentNavMenu>
     </div>
     <div style="width: 100%;">

diff --git a/src/Core/Components/NavMenu/FluentNavBase.cs b/src/Core/Components/NavMenu/FluentNavBase.cs
@@ -60,6 +60,13 @@ public abstract class FluentNavBase : FluentComponentBase
     [Parameter]
     public NavLinkMatch Match { get; set; } = NavLinkMatch.Prefix;
 
+    /// <summary>
+    /// Gets or sets the tooltip to display when the mouse is placed over the item.
+    /// For  <see cref="FluentNavGroup" /> the <c>Title</c> is used as fallback.
+    /// </summary>
+    [Parameter]
+    public string? Tooltip { get; set; }
+
     [CascadingParameter]
     public FluentNavMenu Owner { get; set; } = default!;
 

diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor b/src/Core/Components/NavMenu/FluentNavGroup.razor
@@ -13,8 +13,9 @@
             <NavLink class="fluent-nav-link"
                      @attributes="@Attributes"
                      Match="@Match"
-                     ActiveClass="@ActiveClass">
-                <div class="positioning-region">
+                     ActiveClass="@ActiveClass"
+                     title="@(Tooltip ?? Title)">
+                <div class="positioning-region" >
                     <div class="content-region">
                         @_renderContent
                         @_renderButton
@@ -24,7 +25,7 @@
         }
         else
         {
-            <div class="positioning-region" @onclick="ToggleExpandedAsync" @onkeydown="@HandleExpanderKeyDownAsync">
+            <div class="positioning-region" @onclick="ToggleExpandedAsync" @onkeydown="@HandleExpanderKeyDownAsync" title="@(Tooltip ?? Title)">
                 <div class="content-region">
                     <div class="fluent-nav-link notactive" tabindex="0">
                         @_renderContent
@@ -52,7 +53,7 @@
         {
             <span class="fluent-nav-icon" style="min-width: 20px;"></span>
         }
-        <div class="fluent-nav-text" title="@Title">
+        <div class="fluent-nav-text">
             @Title
             @TitleTemplate
         </div>

diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor b/src/Core/Components/NavMenu/FluentNavLink.razor
@@ -9,7 +9,8 @@
         <NavLink class="@LinkClassValue"
                  @attributes="@Attributes"
                  Match="@Match"
-                 ActiveClass="@ActiveClass">
+                 ActiveClass="@ActiveClass"
+                 title="@Tooltip">
             <div class="positioning-region">
                 <div class="content-region">
                     @_renderContent
@@ -19,7 +20,7 @@
     }
     else
     {
-        <div class="positioning-region">
+        <div class="positioning-region" title="@Tooltip">
             <div class="content-region">
                 <div class="@LinkClassValue" @onclick="OnClickHandler">
                     @_renderContent

diff --git a/.../Core/DateTime/FluentCalendarTests.FluentCalendar_Maximum_View-months.verified.razor.html b/.../Core/DateTime/FluentCalendarTests.FluentCalendar_Maximum_View-months.verified.razor.html
@@ -13,18 +13,18 @@
       </div>
     </div>
     <div class="months" part="months" b-bgn9u4guxz="">
-      <div class="month animation-none" aria-label="January 9999" title="January 9999" value="9999-01" blazor:onclick="3" b-bgn9u4guxz="">Jan</div>
-      <div class="month animation-none" aria-label="February 9999" title="February 9999" value="9999-02" blazor:onclick="4" b-bgn9u4guxz="">Feb</div>
-      <div class="month animation-none" aria-label="March 9999" title="March 9999" value="9999-03" blazor:onclick="5" b-bgn9u4guxz="">Mar</div>
-      <div class="month animation-none" aria-label="April 9999" title="April 9999" value="9999-04" blazor:onclick="6" b-bgn9u4guxz="">Apr</div>
-      <div class="month animation-none" aria-label="May 9999" title="May 9999" value="9999-05" blazor:onclick="7" b-bgn9u4guxz="">May</div>
-      <div class="month animation-none" aria-label="June 9999" title="June 9999" value="9999-06" blazor:onclick="8" b-bgn9u4guxz="">Jun</div>
-      <div class="month animation-none" aria-label="July 9999" title="July 9999" value="9999-07" blazor:onclick="9" b-bgn9u4guxz="">Jul</div>
-      <div class="month animation-none" aria-label="August 9999" title="August 9999" value="9999-08" blazor:onclick="10" b-bgn9u4guxz="">Aug</div>
-      <div class="month animation-none" aria-label="September 9999" title="September 9999" value="9999-09" blazor:onclick="11" b-bgn9u4guxz="">Sep</div>
-      <div class="month animation-none" aria-label="October 9999" title="October 9999" value="9999-10" blazor:onclick="12" b-bgn9u4guxz="">Oct</div>
-      <div class="month animation-none" aria-label="November 9999" title="November 9999" value="9999-11" blazor:onclick="13" b-bgn9u4guxz="">Nov</div>
-      <div class="month animation-none" selected="" aria-label="December 9999" title="December 9999" value="9999-12" blazor:onclick="14" b-bgn9u4guxz="">Dec</div>
+      <div class="month animation-none" aria-label="januari 9999" title="januari 9999" value="9999-01" blazor:onclick="3" b-bgn9u4guxz="">Jan</div>
+      <div class="month animation-none" aria-label="februari 9999" title="februari 9999" value="9999-02" blazor:onclick="4" b-bgn9u4guxz="">Feb</div>
+      <div class="month animation-none" aria-label="maart 9999" title="maart 9999" value="9999-03" blazor:onclick="5" b-bgn9u4guxz="">Mar</div>
+      <div class="month animation-none" aria-label="april 9999" title="april 9999" value="9999-04" blazor:onclick="6" b-bgn9u4guxz="">Apr</div>
+      <div class="month animation-none" aria-label="mei 9999" title="mei 9999" value="9999-05" blazor:onclick="7" b-bgn9u4guxz="">May</div>
+      <div class="month animation-none" aria-label="juni 9999" title="juni 9999" value="9999-06" blazor:onclick="8" b-bgn9u4guxz="">Jun</div>
+      <div class="month animation-none" aria-label="juli 9999" title="juli 9999" value="9999-07" blazor:onclick="9" b-bgn9u4guxz="">Jul</div>
+      <div class="month animation-none" aria-label="augustus 9999" title="augustus 9999" value="9999-08" blazor:onclick="10" b-bgn9u4guxz="">Aug</div>
+      <div class="month animation-none" aria-label="september 9999" title="september 9999" value="9999-09" blazor:onclick="11" b-bgn9u4guxz="">Sep</div>
+      <div class="month animation-none" aria-label="oktober 9999" title="oktober 9999" value="9999-10" blazor:onclick="12" b-bgn9u4guxz="">Oct</div>
+      <div class="month animation-none" aria-label="november 9999" title="november 9999" value="9999-11" blazor:onclick="13" b-bgn9u4guxz="">Nov</div>
+      <div class="month animation-none" selected="" aria-label="december 9999" title="december 9999" value="9999-12" blazor:onclick="14" b-bgn9u4guxz="">Dec</div>
     </div>
   </div>
 </div>
diff --git a/.../Core/DateTime/FluentCalendarTests.FluentCalendar_Minimum_View-months.verified.razor.html b/.../Core/DateTime/FluentCalendarTests.FluentCalendar_Minimum_View-months.verified.razor.html
@@ -13,18 +13,18 @@
       </div>
     </div>
     <div class="months" part="months" b-bgn9u4guxz="">
-      <div class="month animation-none" selected="" aria-label="January 0001" title="January 0001" value="0001-01" blazor:onclick="3" b-bgn9u4guxz="">Jan</div>
-      <div class="month animation-none" aria-label="February 0001" title="February 0001" value="0001-02" blazor:onclick="4" b-bgn9u4guxz="">Feb</div>
-      <div class="month animation-none" aria-label="March 0001" title="March 0001" value="0001-03" blazor:onclick="5" b-bgn9u4guxz="">Mar</div>
-      <div class="month animation-none" aria-label="April 0001" title="April 0001" value="0001-04" blazor:onclick="6" b-bgn9u4guxz="">Apr</div>
-      <div class="month animation-none" aria-label="May 0001" title="May 0001" value="0001-05" blazor:onclick="7" b-bgn9u4guxz="">May</div>
-      <div class="month animation-none" aria-label="June 0001" title="June 0001" value="0001-06" blazor:onclick="8" b-bgn9u4guxz="">Jun</div>
-      <div class="month animation-none" aria-label="July 0001" title="July 0001" value="0001-07" blazor:onclick="9" b-bgn9u4guxz="">Jul</div>
-      <div class="month animation-none" aria-label="August 0001" title="August 0001" value="0001-08" blazor:onclick="10" b-bgn9u4guxz="">Aug</div>
-      <div class="month animation-none" aria-label="September 0001" title="September 0001" value="0001-09" blazor:onclick="11" b-bgn9u4guxz="">Sep</div>
-      <div class="month animation-none" aria-label="October 0001" title="October 0001" value="0001-10" blazor:onclick="12" b-bgn9u4guxz="">Oct</div>
-      <div class="month animation-none" aria-label="November 0001" title="November 0001" value="0001-11" blazor:onclick="13" b-bgn9u4guxz="">Nov</div>
-      <div class="month animation-none" aria-label="December 0001" title="December 0001" value="0001-12" blazor:onclick="14" b-bgn9u4guxz="">Dec</div>
+      <div class="month animation-none" selected="" aria-label="januari 0001" title="januari 0001" value="0001-01" blazor:onclick="3" b-bgn9u4guxz="">Jan</div>
+      <div class="month animation-none" aria-label="februari 0001" title="februari 0001" value="0001-02" blazor:onclick="4" b-bgn9u4guxz="">Feb</div>
+      <div class="month animation-none" aria-label="maart 0001" title="maart 0001" value="0001-03" blazor:onclick="5" b-bgn9u4guxz="">Mar</div>
+      <div class="month animation-none" aria-label="april 0001" title="april 0001" value="0001-04" blazor:onclick="6" b-bgn9u4guxz="">Apr</div>
+      <div class="month animation-none" aria-label="mei 0001" title="mei 0001" value="0001-05" blazor:onclick="7" b-bgn9u4guxz="">May</div>
+      <div class="month animation-none" aria-label="juni 0001" title="juni 0001" value="0001-06" blazor:onclick="8" b-bgn9u4guxz="">Jun</div>
+      <div class="month animation-none" aria-label="juli 0001" title="juli 0001" value="0001-07" blazor:onclick="9" b-bgn9u4guxz="">Jul</div>
+      <div class="month animation-none" aria-label="augustus 0001" title="augustus 0001" value="0001-08" blazor:onclick="10" b-bgn9u4guxz="">Aug</div>
+      <div class="month animation-none" aria-label="september 0001" title="september 0001" value="0001-09" blazor:onclick="11" b-bgn9u4guxz="">Sep</div>
+      <div class="month animation-none" aria-label="oktober 0001" title="oktober 0001" value="0001-10" blazor:onclick="12" b-bgn9u4guxz="">Oct</div>
+      <div class="month animation-none" aria-label="november 0001" title="november 0001" value="0001-11" blazor:onclick="13" b-bgn9u4guxz="">Nov</div>
+      <div class="month animation-none" aria-label="december 0001" title="december 0001" value="0001-12" blazor:onclick="14" b-bgn9u4guxz="">Dec</div>
     </div>
   </div>
 </div>
diff --git a/tests/Core/DateTime/FluentCalendarTests.FluentCalendar_TitleClick-days.verified.razor.html b/tests/Core/DateTime/FluentCalendarTests.FluentCalendar_TitleClick-days.verified.razor.html
@@ -18,18 +18,18 @@
         </div>
       </div>
       <div class="months" part="months" b-bgn9u4guxz="">
-        <div class="month" aria-label="January 2022" title="January 2022" value="2022-01" blazor:onclick="49" b-bgn9u4guxz="">Jan</div>
-        <div class="month" aria-label="February 2022" title="February 2022" value="2022-02" blazor:onclick="50" b-bgn9u4guxz="">Feb</div>
-        <div class="month" aria-label="March 2022" title="March 2022" value="2022-03" blazor:onclick="51" b-bgn9u4guxz="">Mar</div>
-        <div class="month" selected="" aria-label="April 2022" title="April 2022" value="2022-04" blazor:onclick="52" b-bgn9u4guxz="">Apr</div>
-        <div class="month" aria-label="May 2022" title="May 2022" value="2022-05" blazor:onclick="53" b-bgn9u4guxz="">May</div>
-        <div class="month" aria-label="June 2022" title="June 2022" value="2022-06" blazor:onclick="54" b-bgn9u4guxz="">Jun</div>
-        <div class="month" aria-label="July 2022" title="July 2022" value="2022-07" blazor:onclick="55" b-bgn9u4guxz="">Jul</div>
-        <div class="month" aria-label="August 2022" title="August 2022" value="2022-08" blazor:onclick="56" b-bgn9u4guxz="">Aug</div>
-        <div class="month" aria-label="September 2022" title="September 2022" value="2022-09" blazor:onclick="57" b-bgn9u4guxz="">Sep</div>
-        <div class="month" aria-label="October 2022" title="October 2022" value="2022-10" blazor:onclick="58" b-bgn9u4guxz="">Oct</div>
-        <div class="month" aria-label="November 2022" title="November 2022" value="2022-11" blazor:onclick="59" b-bgn9u4guxz="">Nov</div>
-        <div class="month" aria-label="December 2022" title="December 2022" value="2022-12" blazor:onclick="60" b-bgn9u4guxz="">Dec</div>
+        <div class="month" aria-label="januari 2022" title="januari 2022" value="2022-01" blazor:onclick="49" b-bgn9u4guxz="">Jan</div>
+        <div class="month" aria-label="februari 2022" title="februari 2022" value="2022-02" blazor:onclick="50" b-bgn9u4guxz="">Feb</div>
+        <div class="month" aria-label="maart 2022" title="maart 2022" value="2022-03" blazor:onclick="51" b-bgn9u4guxz="">Mar</div>
+        <div class="month" selected="" aria-label="april 2022" title="april 2022" value="2022-04" blazor:onclick="52" b-bgn9u4guxz="">Apr</div>
+        <div class="month" aria-label="mei 2022" title="mei 2022" value="2022-05" blazor:onclick="53" b-bgn9u4guxz="">May</div>
+        <div class="month" aria-label="juni 2022" title="juni 2022" value="2022-06" blazor:onclick="54" b-bgn9u4guxz="">Jun</div>
+        <div class="month" aria-label="juli 2022" title="juli 2022" value="2022-07" blazor:onclick="55" b-bgn9u4guxz="">Jul</div>
+        <div class="month" aria-label="augustus 2022" title="augustus 2022" value="2022-08" blazor:onclick="56" b-bgn9u4guxz="">Aug</div>
+        <div class="month" aria-label="september 2022" title="september 2022" value="2022-09" blazor:onclick="57" b-bgn9u4guxz="">Sep</div>
+        <div class="month" aria-label="oktober 2022" title="oktober 2022" value="2022-10" blazor:onclick="58" b-bgn9u4guxz="">Oct</div>
+        <div class="month" aria-label="november 2022" title="november 2022" value="2022-11" blazor:onclick="59" b-bgn9u4guxz="">Nov</div>
+        <div class="month" aria-label="december 2022" title="december 2022" value="2022-12" blazor:onclick="60" b-bgn9u4guxz="">Dec</div>
       </div>
     </div>
   </div>

diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html
@@ -1,21 +1,20 @@
 
-<div class="fluent-nav-item fluent-nav-group" role="menuitem" b-5zjpev3f1l="" blazor:elementreference="xxx">
-  <div class="positioning-region" b-5zjpev3f1l="">
-    <div class="content-region" b-5zjpev3f1l="">
-      <div class="fluent-nav-link notactive" tabindex="0" blazor:onclick="1" blazor:onkeydown="2" b-5zjpev3f1l="">
-        <span class="fluent-nav-icon" style="min-width: 20px;" b-5zjpev3f1l=""></span>
-        <div class="fluent-nav-text" title="Group title" b-5zjpev3f1l="">
-          Group title
+<div class="fluent-nav-item fluent-nav-group" role="menuitem" b-hv9rzieq3w="" blazor:elementreference="xxx">
+  <div class="positioning-region" blazor:onclick="1" blazor:onkeydown="2" title="Group title" b-hv9rzieq3w="">
+    <div class="content-region" b-hv9rzieq3w="">
+      <div class="fluent-nav-link notactive" tabindex="0" b-hv9rzieq3w="">
+        <span class="fluent-nav-icon" style="min-width: 20px;" b-hv9rzieq3w=""></span>
+        <div class="fluent-nav-text" b-hv9rzieq3w="">Group title
         </div>
-        <div aria-hidden="true" class="expand-collapse-button" tabindex="-1" blazor:onclick="3" blazor:onclick:stoppropagation="" blazor:onkeydown="4" b-5zjpev3f1l="">
+        <div aria-hidden="true" class="expand-collapse-button" tabindex="-1" blazor:onclick="3" blazor:onclick:stoppropagation="" blazor:onclick:preventdefault="" blazor:onkeydown="4" b-hv9rzieq3w="">
           <svg class="fluent-nav-expand-icon" style="width: 12px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 12 12" aria-hidden="true" blazor:onclick="5">
             <path d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"></path>
           </svg>
         </div>
       </div>
     </div>
   </div>
-  <div role="group" class="fluent-collapsible-region-container items" style="height: 0;" b-2esy53gizz="">
-    <div id="xxx" class="fluent-nav-menu" style="width: 100%;" aria-label="Navigation menu" role="menu" aria-expanded="" b-dpnvrc1pyz="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>
+  <div role="group" class="fluent-collapsible-region-container items" style="height: 0;" b-hk0m26j2or="">
+    <div id="xxx" class="fluent-nav-menu" style="width: 100%;" aria-label="Navigation menu" role="menu" aria-expanded="" b-vs37bumpa7="" blazor:elementreference="xxx">NavGroups and NavLinks here</div>
   </div>
 </div>