From f641c0b7bda4535b59717c067a68a764dc396e90 Mon Sep 17 00:00:00 2001
From: Eric Angeles <enrico.angeles@infor.com>
Date: Wed, 11 Sep 2024 19:50:37 +0800
Subject: [PATCH] update selected state in appmenu

---
 docs/CHANGELOG.md                             |  6 +++++
 .../applicationmenu/_applicationmenu-new.scss |  5 ++--
 .../applicationmenu/_applicationmenu.scss     | 24 +++++++++++++++++++
 src/core/_config.scss                         |  7 ++++++
 tests/applicationmenu/applicationmenu.spec.js | 15 ++++++++++++
 5 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 1d79d235d6..8253fad8b7 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,5 +1,11 @@
 # What's New with Enterprise
 
+## v4.100.0
+
+### v4.100.0 Features
+
+- `[Application Menu]` Applied the new design to the selected states. ([#8785](https://github.com/infor-design/enterprise/issues/8785))
+
 ## v4.99.0
 
 ### v4.99.0 Features
diff --git a/src/components/applicationmenu/_applicationmenu-new.scss b/src/components/applicationmenu/_applicationmenu-new.scss
index 6c3bc4623c..188e62125c 100644
--- a/src/components/applicationmenu/_applicationmenu-new.scss
+++ b/src/components/applicationmenu/_applicationmenu-new.scss
@@ -195,6 +195,7 @@
       }
 
       .icon {
+        color: $app-menu-accordion-text-color !important;
         top: -2px;
 
         &.plus-minus {
@@ -211,7 +212,7 @@
       }
 
       &.is-focused:not(.hide-focus) {
-        border-color: $ids-color-palette-white;
+        border-color: $app-menu-accordion-header-focused-border-color;
         box-shadow: none;
       }
 
@@ -236,7 +237,7 @@
       }
 
       &.is-selected {
-        border-bottom-color: $ids-color-palette-white;
+        border-bottom-color: $app-menu-accordion-header-border-color;
 
         > a > span {
           font-weight: $ids-number-font-weight-bold;
diff --git a/src/components/applicationmenu/_applicationmenu.scss b/src/components/applicationmenu/_applicationmenu.scss
index 3e7cede54f..9784a12615 100644
--- a/src/components/applicationmenu/_applicationmenu.scss
+++ b/src/components/applicationmenu/_applicationmenu.scss
@@ -8,6 +8,30 @@ body.is-open-touch {
   overflow: hidden;
 }
 
+.application-menu {
+  .accordion.panel {
+    .accordion-header {
+      &.is-selected {
+        background-color: $app-menu-accordion-header-selected-bg-color !important;
+        border-color: transparent;
+
+        &.is-focused,
+        &:hover {
+          border-color: $app-menu-accordion-header-border-color-hover;
+        }
+
+        a > span {
+          color: $app-menu-accordion-header-text-selected !important;
+        }
+  
+        .icon {
+          color: $app-menu-accordion-header-text-selected !important;
+        }
+      }
+    }
+  }
+}
+
 .resize-app-menu-container {
   @include css3(transform, translateZ(0));
   @include transition(left 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
diff --git a/src/core/_config.scss b/src/core/_config.scss
index 107da9bc50..8cda498242 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -790,6 +790,13 @@ $application-menu-searchfield-text-active-color: $ids-color-palette-white;
 
 $application-menu-new-border-color: $ids-color-palette-white;
 
+$app-menu-accordion-header-selected-bg-color: $ids-color-palette-azure-60;
+$app-menu-accordion-header-focused-border-color: $app-menu-accordion-header-selected-bg-color;
+$app-menu-accordion-header-text-selected: $ids-color-palette-white;
+$app-menu-accordion-header-border-color: transparent;
+$app-menu-accordion-header-border-color-hover: $ids-color-palette-slate-90;
+$app-menu-accordion-text-color: $ids-color-palette-slate-20;
+
 // Module Nav (App menu alternative)
 $module-nav-bg-color: $ids-color-palette-slate-10;
 $module-nav-border-color: $ids-color-palette-slate-30;
diff --git a/tests/applicationmenu/applicationmenu.spec.js b/tests/applicationmenu/applicationmenu.spec.js
index 82a823dd98..1095a15276 100644
--- a/tests/applicationmenu/applicationmenu.spec.js
+++ b/tests/applicationmenu/applicationmenu.spec.js
@@ -39,7 +39,22 @@ test.describe('Applicationmenu tests', () => {
 
     test('should match the visual snapshot in percy', async ({ page, browserName }) => {
       if (browserName !== 'chromium') return;
+
+      // Take the initial snapshot before the menu is opened
       await percySnapshot(page, 'application-menu-light');
+
+      // Find and click the app menu button
+      const appMenuButton = await page.locator('#header-hamburger');
+      await appMenuButton.click();
+
+      // Wait for the 'transitionend' event to ensure the menu transition has finished
+      await page.evaluate(() => new Promise((resolve) => {
+        const element = document.querySelector('#application-menu');
+        element.addEventListener('transitionend', resolve, { once: true });
+      }));
+
+      // Take the snapshot after the transition is complete
+      await percySnapshot(page, 'application-menu-open-light');
     });
   });