DataGrid - Group summaries are shown over sticky columns on a horizontal scroll (DevExpress#30610)

Author: Raushen

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=false.png

@@ -281,3 +281,80 @@ test('DataGrid - Group row content is scrolled if repaintChangesOnly is enabled
     autoExpandAll: false,
   },
 }));
+
+[false, true].forEach((rtlEnabled) => {
+  // T1284612
+  safeSizeTest(`DataGrid - Group summaries are shown over sticky columns on a horizontal scroll (rtl=${rtlEnabled})`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    await dataGrid.scrollTo(t, { x: rtlEnabled ? 100 : 250 });
+    await takeScreenshot(`grouping-scroll-total_summary_intersection-rtl=${rtlEnabled}.png`, dataGrid.element);
+
+    await dataGrid.apiOption('summary.totalItems', [{
+      column: 'SaleAmount',
+      summaryType: 'max',
+      valueFormat: 'currency',
+    }]);
+    await dataGrid.scrollTo(t, { x: 0 });
+    await dataGrid.scrollTo(t, { x: rtlEnabled ? 100 : 250 });
+
+    await takeScreenshot(`grouping-scroll-total_summary-rtl=${rtlEnabled}.png`, dataGrid.element);
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [900, 800]).before(async () => createWidget('dxDataGrid', {
+    ...defaultConfig,
+    rtlEnabled,
+    customizeColumns(columns) {
+      columns[2].groupIndex = 0;
+    },
+    summary: {
+      groupItems: [{
+        column: 'OrderNumber',
+        summaryType: 'count',
+        displayFormat: '{0} orders',
+      }, {
+        column: 'City',
+        summaryType: 'max',
+        valueFormat: 'currency',
+        showInGroupFooter: false,
+        alignByColumn: true,
+      }, {
+        column: 'TotalAmount',
+        summaryType: 'max',
+        valueFormat: 'currency',
+        showInGroupFooter: false,
+        alignByColumn: true,
+      }, {
+        column: 'TotalAmount',
+        summaryType: 'sum',
+        valueFormat: 'currency',
+        displayFormat: 'Total: {0}',
+        showInGroupFooter: true,
+      }],
+      totalItems: [{
+        column: 'OrderNumber',
+        summaryType: 'count',
+        displayFormat: '{0} orders',
+      }, {
+        column: 'SaleAmount',
+        summaryType: 'max',
+        valueFormat: 'currency',
+      }, {
+        column: 'TotalAmount',
+        summaryType: 'max',
+        valueFormat: 'currency',
+      }, {
+        column: 'TotalAmount',
+        summaryType: 'sum',
+        valueFormat: 'currency',
+        displayFormat: 'Total: {0}',
+      }],
+    },
+  }));
+});

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary-rtl=true.png

@@ -203,6 +203,12 @@
         z-index: 3;
       }
     }
+
+    .dx-#{$widget-name}-total-footer {
+      .dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-sticky-column-left, .dx-#{$widget-name}-sticky-column-right {
+        background-color: transparent;
+      }
+    }
   }
 
   .dx-sortable-dragging .dx-#{$widget-name}-rowsview .dx-data-row .dx-command-drag {

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=false.png

@@ -15,6 +15,7 @@ $datagrid-text-stub-background-image-path: null !default;
 @use "../mixins" as *;
 @use "../icons" as *;
 @use "./common";
+@use "./variables" as *;
 
 .dx-datagrid-borders {
   > .dx-datagrid-headers,
@@ -205,6 +206,27 @@ $datagrid-text-stub-background-image-path: null !default;
     }
   }
 
+  .dx-datagrid-total-footer {
+    .dx-row.dx-footer-row {
+      td.dx-command-expand {
+        &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+          background-color: $datagrid-base-background-color;
+        }
+      }
+
+      .dx-datagrid-sticky-column,
+      .dx-datagrid-sticky-column-left,
+      .dx-datagrid-sticky-column-right {
+        padding-inline: 0;
+
+        .dx-datagrid-summary-item {
+          background-color: $datagrid-base-background-color;
+          padding-inline: $datagrid-cell-padding;
+        }
+      }
+    }
+  }
+
   .dx-datagrid-filter-row .dx-filter-range-content {
     color: $datagrid-base-color;
   }

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/grouping-scroll-total_summary_intersection-rtl=true.png

@@ -0,0 +1 @@
+$datagrid-cell-padding: null !default;

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withGrouping.ts

@@ -1,4 +1,5 @@
 @use "../sizes" as *;
+@use '../../base/dataGrid/variables' as *;
 
 // adduse
 
@@ -17,3 +18,5 @@ $area-field-top-bottom-padding: null !default;
   $area-field-border-radius: 4px !default;
   $area-field-top-bottom-padding: 2px !default;
 }
+
+$datagrid-cell-padding: $fluent-datagrid-cell-padding !default;

packages/devextreme-scss/scss/widgets/base/_gridBase.scss

@@ -1,4 +1,5 @@
 @use "../sizes" as *;
+@use '../../base/dataGrid/variables' as *;
 
 // adduse
 
@@ -12,3 +13,4 @@ $generic-datagrid-cell-padding: null !default;
   $generic-datagrid-cell-padding: 5px !default;
 }
 
+$datagrid-cell-padding: $generic-datagrid-cell-padding !default;