[AppBar] Allow for omitting Href on AppBarItems and don't show active…

… status when Href is null or not specified (#1976) * [AppBar] changes for fixing #1974 * [AppBar] Fix #1973 by addin margin to top * Process PR comment
microsoft · Apr 30, 2024 · 452cc64 · 452cc64
1 parent 3a0fd20
commit 452cc64
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/examples/Demo/Shared/Pages/AppBar/Examples/AppBarClick.razor b/examples/Demo/Shared/Pages/AppBar/Examples/AppBarClick.razor
@@ -13,8 +13,7 @@
                           IconActive="AppBarIcon(active: true)"
                           Text="AppBar"
                           OnClick="HandleOnClick" />
-        <FluentAppBarItem Href="@(null)"
-                          IconRest="WhatsNewIcon()"
+        <FluentAppBarItem IconRest="WhatsNewIcon()"
                           IconActive="WhatsNewIcon(active: true)"
                           Text="What's New'"
                           OnClick="ShowSuccessAsync" />

diff --git a/src/Core/Components/AppBar/FluentAppBar.razor b/src/Core/Components/AppBar/FluentAppBar.razor
@@ -27,7 +27,8 @@
                            HorizontalPosition="HorizontalPosition.End"
                            HorizontalInset="false"
                            VerticalPosition="VerticalPosition.Center"
-                           Style="width: 320px; height: 200px; overflow-y: scroll;">
+                           VerticalThreshold="25"
+                           Style="width: 320px; height: 200px; overflow-y: scroll; margin-top: 35px; ">
                 <Body>
                     @if (PopoverShowSearch)
                     {

diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.css b/src/Core/Components/AppBar/FluentAppBar.razor.css
@@ -44,11 +44,19 @@
     right: unset;
 }
 
+::deep .fluent-appbar-item.fluent-appbar-item-local:not(.popover) a.active::before {
+    all: initial;
+}
+
 [dir='rtl'] * ::deep .fluent-appbar-item:not(.popover) a.active::before {
     right: calc(var(--design-unit) * 0.5px);
     left: unset;
 }
 
+[dir='rtl'] * ::deep .fluent-appbar-item.fluent-appbar-item-local:not(.popover) a.active::before {
+    all: initial;
+}
+
 ::deep .fluent-popover-content .fluent-popover-body {
     margin-top: 0 !important;
 }

diff --git a/src/Core/Components/AppBar/FluentAppBarItem.razor.cs b/src/Core/Components/AppBar/FluentAppBarItem.razor.cs
@@ -14,8 +14,8 @@ public partial class FluentAppBarItem : FluentComponentBase, IDisposable
     /// <summary>
     /// Gets or sets the URL for this item.
     /// </summary>
-    [Parameter, EditorRequired]
-    public required string Href { get; set; }
+    [Parameter]
+    public string? Href { get; set; }
 
     /// <summary>
     /// Gets or sets how the link should be matched.
@@ -78,6 +78,7 @@ public partial class FluentAppBarItem : FluentComponentBase, IDisposable
     public bool? Overflow { get; private set; }
 
     internal string? ClassValue => new CssBuilder("fluent-appbar-item")
+        .AddClass("fluent-appbar-item-local", when: string.IsNullOrEmpty(Href))
         .AddClass(Class)
         .Build();