📌 Sticky columns: The row height changes when you select/focus/edit it

e2e/testcafe-devextreme/helpers/themes.ts

@@ -36,9 +36,15 @@ export const Themes = {
   materialTealCompact: 'material.teal.light.compact',
   materialTealDarkCompact: 'material.teal.dark.compact',
   fluentBlue: 'fluent.blue.light',
+  fluentBlueCompact: 'fluent.blue.light.compact',
   fluentBlueDark: 'fluent.blue.dark',
+  fluentBlueDarkCompact: 'fluent.blue.dark.compact',
   // eslint-disable-next-line spellcheck/spell-checker
   fluentSaaS: 'fluent.saas.light',
   // eslint-disable-next-line spellcheck/spell-checker
+  fluentSaaSCompact: 'fluent.saas.light.compact',
+  // eslint-disable-next-line spellcheck/spell-checker
   fluentSaaSDark: 'fluent.saas.dark',
+  // eslint-disable-next-line spellcheck/spell-checker
+  fluentSaaSDarkCompact: 'fluent.saas.dark.compact',
 };

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/appearance.ts

@@ -0,0 +1,83 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { getData } from '../helpers/generateDataSourceData';
+import { Themes } from '../../../helpers/themes';
+import { changeTheme } from '../../../helpers/changeTheme';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`FixedColumns - appearance`
+  .page(url(__dirname, '../../container.html'));
+
+[
+  Themes.genericLight,
+  Themes.genericLightCompact,
+  Themes.materialBlue,
+  Themes.materialBlueCompact,
+  Themes.fluentBlue,
+  Themes.fluentBlueCompact,
+].forEach(
+  (theme) => {
+    test('Row height for selected, focus and edit state should not differ from the default one', async (t) => {
+      const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+      const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+      await t.expect(dataGrid.isReady()).ok();
+
+      await takeScreenshot(`datagrid_default_state_(${theme}).png`, dataGrid.element);
+
+      await t
+        .click(dataGrid.getDataRow(2).getCommandCell(41).getButton(0))
+        .click(dataGrid.getDataRow(3).getCommandCell(0).element)
+        .click(dataGrid.getDataRow(4).getDataCell(4).element);
+
+      await t.debug();
+
+      await takeScreenshot(`datagrid_selected_focused_edit_state_(${theme}).png`, dataGrid.element);
+
+      await t
+        .expect(compareResults.isValid())
+        .ok(compareResults.errorMessages());
+    }).before(async () => {
+      await changeTheme(theme);
+
+      return createWidget('dxDataGrid', {
+        dataSource: getData(13, 40),
+        keyExpr: 'field_0',
+        columnFixing: {
+          enabled: true,
+        },
+        groupPanel: {
+          visible: true,
+        },
+        editing: {
+          allowUpdating: true,
+          mode: 'row',
+        },
+        showColumnHeaders: true,
+        columnAutoWidth: true,
+        allowColumnReordering: true,
+        allowColumnResizing: true,
+        focusedRowEnabled: true,
+        showRowLines: false,
+        selection: {
+          mode: 'multiple',
+        },
+        customizeColumns(columns) {
+          columns[5].fixed = true;
+          columns[6].fixed = true;
+
+          columns[11].fixed = true;
+          columns[11].fixedPosition = 'right';
+          columns[12].fixed = true;
+          columns[12].fixedPosition = 'right';
+        },
+      });
+    }).after(async () => {
+      await changeTheme(Themes.genericLight);
+    });
+  },
+);

packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss

@@ -1133,10 +1133,24 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
     }
 
     &.dx-#{$widget-name}-sticky-columns {
-      .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      .dx-row:not(.dx-row-lines, .dx-group-row, .dx-#{$widget-name}-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
         padding-top: $fluent-grid-base-cell-vertical-padding + 1px;
       }
 
+      .dx-selection.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
+      .dx-row-focused.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+        padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px;
+      }
+
+      .dx-row.dx-edit-row > td.dx-command-edit {
+        padding-top: $fluent-grid-base-cell-vertical-padding - 1px;
+      }
+
+      .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+        height: $fluent-grid-base-cell-height - 2px;
+        line-height: $fluent-grid-base-cell-height - 2px;
+      }
+
       .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
         .dx-row.dx-group-row + &, .dx-row.dx-master-detail-row + & {
           padding-top: $fluent-grid-base-cell-vertical-padding;

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -32,6 +32,7 @@ $generic-grid-base-checkbox-icon-size: 16px;
 $generic-grid-base-checkbox-indeterminate-icon-size: 6px;
 $grid-masterdetail-padding: 20px;
 $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
+$generic-grid-base-cell-input-height: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
 
 @mixin dx-set-checkbox-border-color-as-background() {
   @if $generic-color-postfix == ".contrast" {
@@ -247,7 +248,7 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
   .dx-#{$widget-name}-rowsview {
     .dx-texteditor-input {
       padding: $generic-grid-base-cell-padding;
-      min-height: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
+      min-height: $generic-grid-base-cell-input-height;
     }
 
     .dx-numberbox,
@@ -1012,10 +1013,24 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
   }
 
   .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns {
-    .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+    .dx-row:not(.dx-row-lines, .dx-group-row, .dx-#{$widget-name}-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
       padding-top: $generic-grid-base-cell-padding + 1px;
     }
 
+    .dx-selection.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
+    .dx-row-focused.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      padding-bottom: $generic-grid-base-cell-padding - 1px;
+    }
+
+    .dx-row.dx-edit-row > td.dx-command-edit {
+      padding-top: $generic-grid-base-cell-padding - 1px;
+    }
+
+    .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+      padding-bottom: $generic-grid-base-cell-padding - 1px;
+      min-height: $generic-grid-base-cell-input-height - 2px;
+    }
+
     .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
       .dx-row.dx-group-row + &, .dx-row.dx-master-detail-row + & {
         padding-top: $generic-grid-base-cell-padding;

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -1104,10 +1104,25 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     }
 
     &.dx-#{$widget-name}-sticky-columns {
-      .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
         padding-top: $material-grid-base-cell-vertical-padding + 1px;
       }
 
+      .dx-selection.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
+      .dx-row-focused.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+        padding-bottom: $material-grid-base-cell-vertical-padding - 1px;
+      }
+
+      .dx-row.dx-edit-row > td.dx-command-edit {
+        padding-top: $material-grid-base-cell-vertical-padding - 1px;
+        padding-bottom: $material-grid-base-cell-vertical-padding - 1px;
+      }
+
+      .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
+        height: $material-grid-base-cell-height - 1px;
+        line-height: $material-grid-base-cell-height - 1px;
+      }
+
       .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
         .dx-row.dx-group-row + &, .dx-row.dx-master-detail-row + & {
           padding-top: $material-grid-base-cell-vertical-padding;