[AppBar] changes for fixing #1974

microsoft · Apr 30, 2024 · eeed839 · eeed839
1 parent 1cb7292
commit eeed839
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 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.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: Href == null)
         .AddClass(Class)
         .Build();