diff --git a/apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx b/apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx index df13a3f66561..df33eec20ca8 100644 --- a/apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx +++ b/apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx @@ -498,6 +498,49 @@ export const AiColumn: Story = { }, }; +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 ( + + ); + }, +}; + export const ColumnChooserStory: Story = { name: 'ColumnChooser', argTypes: columnChooserArgTypes, diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (fluent.blue.light).png new file mode 100644 index 000000000000..9ef395f749da Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (generic.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (generic.light).png new file mode 100644 index 000000000000..85ccda3f0644 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (generic.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (material.blue.light).png new file mode 100644 index 000000000000..d105413b6000 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/etalons/drag-icons-focused-selected-rows (material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withDragAndDrop.ts b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withDragAndDrop.ts index ae4c73d657f6..37f8d8146e94 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withDragAndDrop.ts +++ b/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', + }, +})); diff --git a/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/cell.scss index ab0a39230ccc..27797486056d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/layout/cell.scss +++ b/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; } @@ -337,8 +337,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; } diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/cell.scss index 36c2095cb5ed..c4b19d86c1e0 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/layout/cell.scss +++ b/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; } diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss index 6aab61527bbb..b4aea7c7b6e8 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss +++ b/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; }