Fix background for fixed cells in filter row (for fluent and material…

… themes)
DevExpress · Oct 17, 2024 · 8164d52 · 8164d52
1 parent d0db007
commit 8164d52
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/withFilterRow.ts b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/withFilterRow.ts
@@ -4,30 +4,41 @@ import { safeSizeTest } from '../../../helpers/safeSizeTest';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
 import { defaultConfig } from './data';
+import { changeTheme } from '../../../helpers/changeTheme';
+import { Themes } from '../../../helpers/themes';
 
 const DATA_GRID_SELECTOR = '#container';
 
 fixture.disablePageReloads`Sticky columns - Filter row`
   .page(url(__dirname, '../../container.html'));
 
-safeSizeTest('Filter row with sticky columns', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
-
-  await t.click(dataGrid.getHeaders().getFilterRow().getFilterCell(1).element);
-
-  await takeScreenshot('filter_row_with_sticky_columns_1.png', dataGrid.element);
-
-  await dataGrid.scrollTo(t, { x: 10000 });
-
-  await takeScreenshot('filter_row_with_sticky_columns_2.png', dataGrid.element);
-
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}, [800, 800]).before(async () => createWidget('dxDataGrid', {
-  ...defaultConfig,
-  filterRow: {
-    visible: true,
-  },
-}));
+[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach((theme) => {
+  safeSizeTest(`Filter row with sticky columns (${theme} theme)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+    await t.click(dataGrid.getHeaders().getFilterRow().getFilterCell(1).element);
+
+    await takeScreenshot(`filter_row_with_sticky_columns_1_(${theme}).png`, dataGrid.element);
+
+    await dataGrid.scrollTo(t, { x: 10000 });
+
+    await takeScreenshot(`filter_row_with_sticky_columns_2_(${theme}).png`, dataGrid.element);
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [800, 800])
+    .before(async () => {
+      await changeTheme(theme);
+      await createWidget('dxDataGrid', {
+        ...defaultConfig,
+        filterRow: {
+          visible: true,
+        },
+      });
+    })
+    .after(async () => {
+      await changeTheme(Themes.genericLight);
+    });
+});
diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss
@@ -751,6 +751,16 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         }
       }
     }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-#{$widget-name}-filter-row > td {
+        &.dx-#{$widget-name}-sticky-column,
+        &.dx-#{$widget-name}-sticky-column-left,
+        &.dx-#{$widget-name}-sticky-column-right {
+          background-color: $datagrid-filter-row-background-color;
+        }
+      }
+    }
   }
 
   .dx-#{$widget-name}-filter-row {

diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss
@@ -724,6 +724,16 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         }
       }
     }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-#{$widget-name}-filter-row > td {
+        &.dx-#{$widget-name}-sticky-column,
+        &.dx-#{$widget-name}-sticky-column-left,
+        &.dx-#{$widget-name}-sticky-column-right {
+          background-color: $datagrid-filter-row-background-color;
+        }
+      }
+    }
   }
 
   .dx-#{$widget-name}-filter-row {