8980 - Datagrid Contextual Toolbar Hover

docs/CHANGELOG.md

@@ -9,6 +9,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))

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 {

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 {

tests/datagrid/datagrid.spec.js

@@ -102,4 +102,30 @@ 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();
+
+        // eslint-disable-next-line arrow-body-style
+        const color = await button.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
+
+        await expect(color).toBe('rgba(0, 0, 0, 0.3)');
+      });
+    });
+  });
 });