[AppBar] Fix regression with icon active color (#2318)

* AppBar address Aspire regression * Update WhatsNew --------- Co-authored-by: Denis Voituron <[email protected]>
microsoft · Jul 4, 2024 · 211af3f · 211af3f
1 parent 47affd9
commit 211af3f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/WHATSNEW.md b/WHATSNEW.md
@@ -10,6 +10,8 @@
 - [Demo] Fixes link for Time picker in demo projects ([#2246](https://github.com/microsoft/fluentui-blazor/pull/2246))
 
 ### Components
+- [Rating] **New component** ([#2258](https://github.com/microsoft/fluentui-blazor/pull/2258))
+- [AppBar] Fix regression with icon accent color ([#2318](https://github.com/microsoft/fluentui-blazor/pull/2318))
 - [Autocomplete] Accessibility: Scrolling not working with keyboard ([#2221](https://github.com/microsoft/fluentui-blazor/pull/2221))
 - [AutoComplete] Allow focusable Badge dismiss buttons (accessibility) ([#2272](https://github.com/microsoft/fluentui-blazor/pull/2272))
 - [Autocomplete] Fix AriaLabel ([#2303](https://github.com/microsoft/fluentui-blazor/pull/2303))
@@ -35,7 +37,6 @@
 - [NumberField] Add sbyte type ([#2308](https://github.com/microsoft/fluentui-blazor/pull/2308))
 - [Overflow] Add refresh method, add VisibleOnLoad parameter ([#2236](https://github.com/microsoft/fluentui-blazor/pull/2236))
 - [ProfileMenu] Fix the initials inner the popup panel ([#2294](https://github.com/microsoft/fluentui-blazor/pull/2294))
-- [Rating] **New component** ([#2258](https://github.com/microsoft/fluentui-blazor/pull/2258))
 - [Slider] Fix getting caught in update loop ([#2265](https://github.com/microsoft/fluentui-blazor/pull/2265))
 - [Slider] Refactor code after PR #2265 ([#2287](https://github.com/microsoft/fluentui-blazor/pull/2287))
 - [TimePicker] Add null check for empty string ([#2245](https://github.com/microsoft/fluentui-blazor/pull/2245))

diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md
@@ -10,6 +10,8 @@
 - [Demo] Fixes link for Time picker in demo projects ([#2246](https://github.com/microsoft/fluentui-blazor/pull/2246))
 
 ### Components
+- [Rating] **New component** ([#2258](https://github.com/microsoft/fluentui-blazor/pull/2258))
+- [AppBar] Fix regression with icon accent color ([#2318](https://github.com/microsoft/fluentui-blazor/pull/2318))
 - [Autocomplete] Accessibility: Scrolling not working with keyboard ([#2221](https://github.com/microsoft/fluentui-blazor/pull/2221))
 - [AutoComplete] Allow focusable Badge dismiss buttons (accessibility) ([#2272](https://github.com/microsoft/fluentui-blazor/pull/2272))
 - [Autocomplete] Fix AriaLabel ([#2303](https://github.com/microsoft/fluentui-blazor/pull/2303))
@@ -35,7 +37,6 @@
 - [NumberField] Add sbyte type ([#2308](https://github.com/microsoft/fluentui-blazor/pull/2308))
 - [Overflow] Add refresh method, add VisibleOnLoad parameter ([#2236](https://github.com/microsoft/fluentui-blazor/pull/2236))
 - [ProfileMenu] Fix the initials inner the popup panel ([#2294](https://github.com/microsoft/fluentui-blazor/pull/2294))
-- [Rating] **New component** ([#2258](https://github.com/microsoft/fluentui-blazor/pull/2258))
 - [Slider] Fix getting caught in update loop ([#2265](https://github.com/microsoft/fluentui-blazor/pull/2265))
 - [Slider] Refactor code after PR #2265 ([#2287](https://github.com/microsoft/fluentui-blazor/pull/2287))
 - [TimePicker] Add null check for empty string ([#2245](https://github.com/microsoft/fluentui-blazor/pull/2245))

diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.css b/src/Core/Components/AppBar/FluentAppBar.razor.css
@@ -63,7 +63,19 @@
 
 ::deep .fluent-appbar-item:hover svg[part="icon-rest"],
 ::deep .fluent-appbar-item:not(:hover):not(.active) svg[part="icon-active"],
-::deep .fluent-appbar-item:not(:hover).active svg[part="icon-rest"],
+::deep .fluent-appbar-item:not(:hover) a.active svg[part="icon-rest"],
 ::deep .fluent-appbar-item[overflow] {
     display: none;
 }
+
+::deep .fluent-appbar-item:not(:hover) .active svg[part="icon-active"] {
+    display: block;
+}
+
+::deep .fluent-appbar-item.popover:not(:hover) a.active svg[part="icon-active"] {
+    display: none;
+}
+
+::deep .fluent-appbar-item.popover:not(:hover) a.active svg[part="icon-rest"] {
+    display: block;
+}