FluentNavMenu binding support (#522)

* two way binding on Expanded * Events not propagating, but click not toggling group expansion * WIP * Complete * Completed * Nearly working * Merge from upstream * WIP * WIP * Remove FindElementById * Remove SetExpanded * Change ParentElement to Owner * Get rid of AutoExpandOnGroupExpanded * Works in demos, but not in nav menu * Only select a single item * All working * Working all round, just not expanding groups * Finally fixed!!!! * Remove .orig files * It works!!! * Possibly working * WIP * WIP * Nearly there (new approach) * Undo CSS changes * WIP * Frozen * Tree fixed Fully working! * Working! * No need for custom event * Code formatting --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Jul 12, 2023 · 378cc00 · 378cc00
1 parent 6d041f8
commit 378cc00
Show file tree

Hide file tree

Showing 17 changed files with 498 additions and 325 deletions.
diff --git a/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor b/examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor
@@ -0,0 +1,60 @@
+@namespace FluentUI.Demo.Shared
+
+@inject ILogger<NavMenuDefault> logger;
+
+<h2>Navigation Examples</h2>
+
+<FluentStack Orientation="Orientation.Horizontal">
+    <!-- Menu with sub-items and icons -->
+    <FluentNavMenu @bind-Expanded=MenuExpanded>
+        <FluentNavMenuGroup Id="Group1" Text="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())">
+            <FluentNavMenuLink Text="Item 1.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item1Point1Selected />
+            <FluentNavMenuLink Text="Item 1.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item1Point2Selected />
+        </FluentNavMenuGroup>
+        <FluentNavMenuGroup Id="Group2" Text="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())">
+            <FluentNavMenuLink Text="Item 2.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item2Point1Selected />
+            <FluentNavMenuLink Text="Item 2.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item2Point2Selected />
+        </FluentNavMenuGroup>
+    </FluentNavMenu>
+    <FluentStack Orientation="Orientation.Vertical">
+
+        <h2>Expanded elements</h2>
+        <FluentCheckbox @bind-Value=MenuExpanded>
+            <span aria-label="Menu expanded">Menu</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item1Expanded>
+            <span aria-label="Item 1 expanded">Item 1</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item2Expanded>
+            <span aria-label="Item 2 expanded">Item 2</span>
+        </FluentCheckbox>
+
+        <h2>Selected elements</h2>
+        <FluentCheckbox @bind-Value=Item1Point1Selected>
+            <span aria-label="Item 1.1 selected">Item 1.1</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item1Point2Selected>
+            <span aria-label="Item 1.2 selected">Item 1.2</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item2Point1Selected>
+            <span aria-label="Item 2.1 selected">Item 2.1</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item2Point2Selected>
+            <span aria-label="Item 2.2 selected">Item 2.2</span>
+        </FluentCheckbox>
+
+    </FluentStack>
+</FluentStack>
+
+@code {
+    bool MenuExpanded = true;
+    bool Item1Expanded = true;
+    bool Item2Expanded = true;
+
+    bool Item1Point1Selected = false;
+    bool Item1Point2Selected = false;
+    bool Item2Point1Selected = false;
+    bool Item2Point2Selected = false;
+}
+
+
diff --git a/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor b/examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor
@@ -35,3 +35,9 @@
         More complete example which show how menu works with together with a text section when it collapses. 
     </Description>
 </DemoSection>
+
+<DemoSection Component="typeof(NavMenuDataBound)" Title="Data bound">
+    <Description>
+        An example data binding the Expanded parameter.
+    </Description>
+</DemoSection>
diff --git a/examples/Demo/Shared/Pages/TreeView/Examples/TreeViewDisabledItem.razor b/examples/Demo/Shared/Pages/TreeView/Examples/TreeViewDisabledItem.razor
@@ -1,13 +1,13 @@
 <FluentTreeView>
     <FluentTreeItem InitiallyExpanded="true">
         Root item
-        <FluentTreeItem>
+        <FluentTreeItem InitiallyExpanded="true">
             Flowers
             <FluentTreeItem>Daisy</FluentTreeItem>
             <FluentTreeItem>Sunflower</FluentTreeItem>
             <FluentTreeItem>Rose</FluentTreeItem>
         </FluentTreeItem>
-        <FluentTreeItem Expanded="true">
+        <FluentTreeItem InitiallyExpanded="true">
             Planes
             <FluentTreeItem Disabled="true">Tomcat</FluentTreeItem>
             <FluentTreeItem>Hawker Harrier</FluentTreeItem>

diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
@@ -497,74 +497,3 @@ code {
         margin-inline-end: calc(100% - env(viewport-segment-left 1 0));
     }
 }
-
-
-
-
-
-
-/*NavMenu expander*/
-.nav-menu-expander::part(positioning-region) {
-    background-color: var(--neutral-fill-stealth-rest);
-}
-
-.nav-menu-expander::part(content-region) {
-    margin-inline-start: calc(var(--design-unit) * 2px);
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-.nav-menu-expander::part(positioning-region):hover {
-    background-color: var(--neutral-fill-secondary-rest);
-}
-
-.nav-menu-expander.selected::after {
-    display: none;
-}
-
-
-
-/*Child Elements (Groups and Items)*/
-.navmenu-child-element::part(content-region) {
-    -webkit-user-select: none;
-    user-select: none;
-    margin-inline-start: calc(var(--design-unit) * 2px);
-    margin-inline-end: calc(var(--design-unit) * 2px);
-}
-
-
-
-/* Groups */
-.navmenu-group::part(content-region) {
-    margin-inline-end: var(--expand-collapse-button-size);
-}
-
-
-
-/* Group expander*/
-.navmenu .navmenu-group::part(expand-collapse-button) {
-    right: calc(var(--design-unit) * 2px);
-    left: unset;
-    margin-inline-end: calc(var(--expand-collapse-button-size) * -1);
-}
-
-[dir="rtl"] * .navmenu-group::part(expand-collapse-button) {
-    left: calc(var(--design-unit) * 2px);
-    right: unset;
-    margin-inline-start: calc(var(--expand-collapse-button-size) - (var(--design-unit) * 2px));
-}
-
-
-
-/* Group items */
-.navmenu-group .navmenu-child-element::part(content-region) {
-    padding-inline-start: 20px;
-
-}
-
-
-
-/* Nav links */
-.navmenu .navmenu-link::part(content-region) {
-    margin-inline-start: calc(var(--design-unit) * 2px);
-}
diff --git a/examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuDataBound.razor.txt b/examples/FluentUI.Demo.Shared/wwwroot/sources/NavMenuDataBound.razor.txt
@@ -0,0 +1,60 @@
+@namespace FluentUI.Demo.Shared
+
+@inject ILogger<NavMenuDefault> logger;
+
+<h2>Navigation Examples</h2>
+
+<FluentStack Orientation="Orientation.Horizontal">
+    <!-- Menu with sub-items and icons -->
+    <FluentNavMenu @bind-Expanded=MenuExpanded>
+        <FluentNavMenuGroup Id="Group1" Text="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())">
+            <FluentNavMenuLink Text="Item 1.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item1Point1Selected />
+            <FluentNavMenuLink Text="Item 1.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item1Point2Selected />
+        </FluentNavMenuGroup>
+        <FluentNavMenuGroup Id="Group2" Text="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())">
+            <FluentNavMenuLink Text="Item 2.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item2Point1Selected />
+            <FluentNavMenuLink Text="Item 2.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item2Point2Selected />
+        </FluentNavMenuGroup>
+    </FluentNavMenu>
+    <FluentStack Orientation="Orientation.Vertical">
+
+        <h2>Expanded elements</h2>
+        <FluentCheckbox @bind-Value=MenuExpanded>
+            <span aria-label="Menu expanded">Menu</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item1Expanded>
+            <span aria-label="Item 1 expanded">Item 1</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item2Expanded>
+            <span aria-label="Item 2 expanded">Item 2</span>
+        </FluentCheckbox>
+
+        <h2>Selected elements</h2>
+        <FluentCheckbox @bind-Value=Item1Point1Selected>
+            <span aria-label="Item 1.1 selected">Item 1.1</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item1Point2Selected>
+            <span aria-label="Item 1.2 selected">Item 1.2</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item2Point1Selected>
+            <span aria-label="Item 2.1 selected">Item 2.1</span>
+        </FluentCheckbox>
+        <FluentCheckbox @bind-Value=Item2Point2Selected>
+            <span aria-label="Item 2.2 selected">Item 2.2</span>
+        </FluentCheckbox>
+
+    </FluentStack>
+</FluentStack>
+
+@code {
+    bool MenuExpanded = true;
+    bool Item1Expanded = true;
+    bool Item2Expanded = true;
+
+    bool Item1Point1Selected = false;
+    bool Item1Point2Selected = false;
+    bool Item2Point1Selected = false;
+    bool Item2Point2Selected = false;
+}
+
+
diff --git a/src/Core/BindAttributes.cs b/src/Core/BindAttributes.cs
@@ -53,7 +53,6 @@ namespace Microsoft.Fast.Components.FluentUI;
 
 [BindElement("fluent-search", null, "value", "onchange")]
 [BindElement("fluent-search", "value", "value", "onchange")]
-
 public static class BindAttributes
 {
 }

diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor b/src/Core/Components/NavMenu/FluentNavMenu.razor
@@ -1,5 +1,6 @@
 @namespace Microsoft.Fast.Components.FluentUI
 @inherits FluentComponentBase
+@inject NavigationManager NavigationManager
 
 <div>
     <CascadingValue Value="this" IsFixed="true">
@@ -8,7 +9,8 @@
                 <CascadingValue Value="@HasChildIcons" Name="NavMenuItemSiblingHasIcon">
                     <FluentTreeView Class="@ClassValue"
                                     Style="@StyleValue"
-                                    OnSelectedChange="@HandleSelectedChange">
+                                    CurrentSelected="@_selectedTreeItem"
+                                    CurrentSelectedChanged="@HandleCurrentSelectedChanged">
                         @if (Collapsible)
                         {
                             <FluentTreeItem Id="@_expandCollapseTreeItemId" Class="nav-menu-expander" @onclick="@ToggleCollapsedAsync" @onkeydown="@HandleExpandCollapseKeyDownAsync">