T1303892 - DataGrid - Drag icon is vertically misaligned if column fixing is enabled in Generic Themes

apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx

@@ -353,3 +353,46 @@ export const AiColumn: Story = {
         allowColumnReordering: true,
     },
 };
+
+export const RowDraggingWithFixedColumns: Story = {
+    args: {
+        showBorders: true,
+        showRowLines: false,
+        rowDragging: {
+            showDragIcons: true,
+        },
+    },
+    render: ({ showBorders, showRowLines, rowDragging }) => {
+        const [data, setData] = useState(countries);
+
+        const onReorder = useCallback((e: DataGridTypes.RowDraggingReorderEvent) => {
+            setData((items) => {
+                const reorderedItems = [...items];
+                const [movedItem] = reorderedItems.splice(e.fromIndex, 1);
+
+                reorderedItems.splice(e.toIndex, 0, movedItem);
+
+                return reorderedItems;
+            });
+        }, []);
+
+        return (
+            <DataGrid
+                dataSource={data}
+                keyExpr="ID"
+                height={440}
+                showBorders={showBorders}
+                showRowLines={showRowLines}
+                columnFixing={{ enabled: true }}
+                focusedRowEnabled={true}
+                selection={{ mode: 'single' }}
+                rowDragging={{
+                    allowReordering: true,
+                    showDragIcons: rowDragging?.showDragIcons,
+                    onReorder,
+                }}
+                columns={['Country', 'Area', 'Population_Total', 'GDP_Total']}
+            />
+        );
+    },
+};

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

@@ -46,3 +46,42 @@ test('Fixed columns should work when drag and drop rows are enabled', async (t)
     columns[9].fixedPosition = 'right';
   },
 }));
+
+test.meta({
+  browserSize: [900, 800],
+  themes: ['generic.light', 'material.blue.light'],
+})('Drag icons keep vertical centering in focused and selected rows with fixed columns (T1303892)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await t.click(dataGrid.getDataCell(1, 1).element);
+
+  await testScreenshot(t, takeScreenshot, 'drag-icons-focused-selected-rows.png', { element: dataGrid.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(10, 5),
+  keyExpr: 'field_0',
+  width: 500,
+  columnFixing: {
+    enabled: true,
+  },
+  focusedRowEnabled: true,
+  selection: {
+    mode: 'single',
+  },
+  showRowLines: false,
+  showColumnHeaders: true,
+  columnAutoWidth: true,
+  rowDragging: {
+    allowReordering: true,
+  },
+  scrolling: {
+    showScrollbar: 'never',
+  },
+}));

packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/cell.scss

@@ -310,7 +310,7 @@
   }
 
   // (0,5,1)
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
     padding-top: $fluent-grid-base-cell-vertical-padding + 1px;
   }
 
@@ -319,6 +319,16 @@
     padding-top: $fluent-grid-base-cell-vertical-padding - 1px;
   }
 
+  // (0,6,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row.dx-row-focused:not(.dx-row-lines, .dx-edit-row, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
+    padding-top: $fluent-grid-base-cell-vertical-padding + 1px;
+  }
+
+  // (0,6,1)
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row.dx-row-focused:not(.dx-row-lines, .dx-edit-row, .dx-row-removed) > td.dx-command-drag {
+    padding-top: 1px;
+  }
+
   // (0,6,1)
   .dx-#{$widget-name}-headers.dx-header-multi-row .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row.dx-header-row > td {
     padding-top: 12px;
@@ -337,8 +347,8 @@
   }
 
   // (0,8,1) T1303478
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag),
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
     padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px;
   }
 

packages/devextreme-scss/scss/widgets/generic/gridBase/layout/cell.scss

@@ -355,13 +355,13 @@
   }
 
   // (0,7,1)
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
     padding-top: $generic-grid-base-cell-padding + 1px;
   }
 
   // (0,7,1) T1303478
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag),
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
     padding-bottom: $generic-grid-base-cell-padding - 1px;
   }
 

packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss

@@ -347,13 +347,13 @@
   }
 
   // (0,5,1)
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
     padding-top: $material-grid-base-cell-vertical-padding + 1px;
   }
 
   // (0,6,1) T1303478
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-selection:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag),
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row.dx-row-focused:not(.dx-edit-row):not(.dx-row-lines):not(.dx-group-row) > td:not(.dx-editor-cell, .dx-master-detail-cell, .dx-command-drag) {
     padding-bottom: $material-grid-base-cell-vertical-padding - 1px;
   }