From 55a41793467a8594401103bff35a3ae46445deb6 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Fri, 30 Aug 2024 17:02:54 +0300
Subject: [PATCH] fix(ui5-menu-item): add hover and active styles (#9774)

Previously, there were no visual indicators when hovering over a menu item, aside from the focus border. With this change, we're adding `hover` and `active` styles to the menu items.
---
 packages/main/src/themes/MenuItem.css | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/themes/MenuItem.css b/packages/main/src/themes/MenuItem.css
index 0c8e2acdcc3e..0d14f2ea3184 100644
--- a/packages/main/src/themes/MenuItem.css
+++ b/packages/main/src/themes/MenuItem.css
@@ -25,13 +25,23 @@
 	background: var(--ui5-listitem-background-color);
 }
 
+:host([active]:not([disabled])),
+:host([active]:not([disabled])):hover {
+	background-color: var(--sapList_Active_Background);
+}
+
+:host(:not([active]):not([selected]):not([disabled]):hover) {
+	background-color: var(--sapList_Hover_Background);
+}
+
 /* active */
 :host([disabled][active][actionable]) .ui5-li-root .ui5-li-icon {
 	color: var(--sapContent_NonInteractiveIconColor);
 }
 
-:host([active][actionable]:not([disabled]))::part(content),
-:host([active][actionable]:not([disabled]))::part(additional-text)  {
+:host([active]:not([disabled]))::part(content),
+:host([active]:not([disabled]))::part(additional-text),
+:host([active]:not([disabled])) .ui5-li-root .ui5-li-icon {
 	color: var(--sapList_Active_TextColor);
 }