Fixed focused link bg color (DevExpress#29680) (DevExpress#29693)

Author: surohak

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-link-background (fluent.blue.light).png

@@ -4,6 +4,7 @@ import { changeTheme } from '../../../../../helpers/changeTheme';
 import { createWidget } from '../../../../../helpers/createWidget';
 import url from '../../../../../helpers/getPageUrl';
 import { Themes } from '../../../../../helpers/themes';
+import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../../../../helpers/domUtils';
 
 fixture.disablePageReloads`Focused row - markup`
   .page(url(__dirname, '../../../../container.html'));
@@ -106,3 +107,42 @@ fixture.disablePageReloads`Focused row - markup`
     });
   }).after(async () => changeTheme(Themes.genericLight));
 });
+
+[
+  Themes.materialBlue,
+  Themes.genericLight,
+  Themes.fluentBlue,
+].forEach((theme) => {
+  test(`Link should not have background color in ${theme} (T1282624)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid('#container');
+
+    // assert
+    await takeScreenshot(`focused-row-link-background (${theme}).png`, dataGrid.element);
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+
+    await insertStylesheetRulesToPage('#container tr.dx-row-focused td { background-color: red }');
+
+    await createWidget('dxDataGrid', {
+      dataSource: [
+        { id: 0, text: 'text_1' },
+        { id: 1, text: 'text_2' },
+        { id: 2, text: 'text_3' },
+      ],
+      focusedRowEnabled: true,
+      editing: {
+        allowDeleting: true,
+        useIcons: false,
+      },
+      focusedRowKey: 1,
+      keyExpr: 'id',
+    });
+  }).after(async () => {
+    await changeTheme(Themes.genericLight);
+    await removeStylesheetRulesFromPage();
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-link-background (generic.light).png

@@ -1039,14 +1039,17 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       &.dx-data-row {
         & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
         & .dx-command-edit .dx-link {
-          background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
 
           & .dx-#{$widget-name}-group-opened,
           & .dx-#{$widget-name}-group-closed {
             color: $datagrid-row-focused-color;
           }
         }
+
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+          background-color: $datagrid-row-focused-bg;
+        }
       }
 
       &:not(.dx-row-lines) {

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/etalons/focused-row-link-background (material.blue.light).png

@@ -806,7 +806,6 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
         & > td:not(.dx-focused),
         & > tr > td:not(.dx-focused),
         & .dx-command-edit:not(.dx-focused) .dx-link {
-          background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
 
           .dx-texteditor-input {
@@ -819,6 +818,11 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
           }
         }
 
+        & > td:not(.dx-focused),
+        & > tr > td:not(.dx-focused) {
+          background-color: $datagrid-row-focused-bg;
+        }
+
         & .dx-command-edit .dx-link:focus {
           background-color: $datagrid-base-background-color;
           color: $datagrid-base-color;

e2e/testcafe-devextreme/tests/dataGrid/common/focus/focusedRow/markup.ts

@@ -1004,7 +1004,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       &.dx-data-row {
         & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
         & .dx-command-edit .dx-link {
-          background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
 
           & .dx-#{$widget-name}-group-opened,
@@ -1013,6 +1012,10 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           }
         }
 
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
+          background-color: $datagrid-row-focused-bg;
+        }
+
         & .dx-command-edit .dx-link:focus {
           background-color: $datagrid-base-background-color;
           color: $datagrid-link-color;