From d7212b037b1e59949c0d82e57fc2e40fbcdc064f Mon Sep 17 00:00:00 2001
From: James Allen <34049950+tjamesallen15@users.noreply.github.com>
Date: Tue, 27 Aug 2024 11:53:33 +0800
Subject: [PATCH 1/3] Fixed datagrid hover color for contextual toolbar when a
 row is selected

---
 docs/CHANGELOG.md                    | 1 +
 src/components/button/_button.scss   | 2 +-
 src/components/toolbar/_toolbar.scss | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index ebe73528ce..ed2f121124 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ## v4.99.0 Fixes
 
+- `[ContextualToolbar]` Fixed datagrid hover color for contextual toolbar when a row is selected. ([#8980](https://github.com/infor-design/enterprise-/issues/8980))
 - `[Datagrid]` Fixed a bug in compact mode where datagrid filters doesn't extend all throughout the parents width. ([#8900](https://github.com/infor-design/enterprise-/issues/8900))
 - `[Datagrid]` Fixed data return by select event on datagrid when having filter on. ([#8905](https://github.com/infor-design/enterprise/issues/8905))
 - `[Datagrid]` Optimize the initial loading of datagrids with filterable setting. ([#8935](https://github.com/infor-design/enterprise/issues/8935))
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index ddef2b6d1f..e61b935a5d 100755
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -888,7 +888,7 @@ a.btn-close {
   overflow: hidden;
 
   &:hover:not([disabled]):not(.btn-primary):not(.btn-secondary) {
-    background-color: $button-color-tertiary-hover-background-new !important;
+    background-color: $button-color-tertiary-hover-background-new;
     color: $button-color-tertiary-hover-text;
 
     .icon {
diff --git a/src/components/toolbar/_toolbar.scss b/src/components/toolbar/_toolbar.scss
index a440edf5a8..4dca151f8e 100755
--- a/src/components/toolbar/_toolbar.scss
+++ b/src/components/toolbar/_toolbar.scss
@@ -360,7 +360,7 @@ $toolbar-buttonset-height: 40px;
       }
 
       &:hover {
-        color: $contextual-toolbar-button-hover-color;
+        color: $contextual-toolbar-button-hover-color !important;
         background-color: rgba(0, 0, 0, .3) !important;
 
         .icon {

From 5936218c15578404c342c448c593d54399c1a413 Mon Sep 17 00:00:00 2001
From: James Allen <jamesallen.tadique@infor.com>
Date: Thu, 29 Aug 2024 19:13:32 +0800
Subject: [PATCH 2/3] added playwright

---
 tests/datagrid/datagrid.spec.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/tests/datagrid/datagrid.spec.js b/tests/datagrid/datagrid.spec.js
index 73fbbd6a86..e2e233e2f5 100644
--- a/tests/datagrid/datagrid.spec.js
+++ b/tests/datagrid/datagrid.spec.js
@@ -102,4 +102,29 @@ test.describe('Datagrid tests', () => {
       });
     });
   });
+
+  test.describe('datagrid toolbar button tests', () => {
+    const url = '/components/datagrid/example-mixed-selection.html';
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
+
+    test.describe('button hover tests', () => {
+      test('value should have a proper color', async ({ page }) => {
+        await page.evaluate('document.getElementsByClassName("datagrid-selection-checkbox")[0].click()');
+
+        await expect(page.locator('.contextual-toolbar > .buttonset > .btn')).toBeVisible();
+
+        const button = page.locator('.contextual-toolbar > .buttonset > .btn');
+        await button.hover();
+
+        const color = await button.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
+
+        await expect(color).toBe('rgba(0, 0, 0, 0.3)');
+      });
+    });
+  });
 });

From 112303dfc7f3d4f811264d821e5380fe21ba131a Mon Sep 17 00:00:00 2001
From: James Allen <jamesallen.tadique@infor.com>
Date: Thu, 29 Aug 2024 19:40:51 +0800
Subject: [PATCH 3/3] Skip

---
 tests/datagrid/datagrid.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/datagrid/datagrid.spec.js b/tests/datagrid/datagrid.spec.js
index e2e233e2f5..acb3172f26 100644
--- a/tests/datagrid/datagrid.spec.js
+++ b/tests/datagrid/datagrid.spec.js
@@ -119,6 +119,7 @@ test.describe('Datagrid tests', () => {
         const button = page.locator('.contextual-toolbar > .buttonset > .btn');
         await button.hover();
 
+        // eslint-disable-next-line arrow-body-style
         const color = await button.evaluate((el) => {
           return window.getComputedStyle(el).getPropertyValue('background-color');
         });