From 3c8d0412165e3cf6dbb92e56e099f0ff6a133b3d Mon Sep 17 00:00:00 2001 From: Joshua Barbosa <44610149+tongsonbarbs@users.noreply.github.com> Date: Thu, 1 Aug 2024 23:44:43 +0800 Subject: [PATCH] DataGrid - TagBox tags are incorrectly rendered if the Material/Fluent theme is used (T1228720) (#27810) Signed-off-by: tongsonbarbs --- ...rid-tagbox-on-edit_(fluent.blue.light).png | Bin 0 -> 9674 bytes ...20-grid-tagbox-on-edit_(generic.light).png | Bin 0 -> 8521 bytes ...d-tagbox-on-edit_(material.blue.light).png | Bin 0 -> 11246 bytes .../tests/dataGrid/tagBox.ts | 69 ++++++++++++++++++ .../scss/widgets/fluent/gridBase/_index.scss | 14 +--- .../widgets/material/gridBase/_index.scss | 14 +--- 6 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(fluent.blue.light).png create mode 100644 e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(generic.light).png create mode 100644 e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(material.blue.light).png create mode 100644 e2e/testcafe-devextreme/tests/dataGrid/tagBox.ts diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(fluent.blue.light).png new file mode 100644 index 0000000000000000000000000000000000000000..95a72c94cee903b61aac47eedf93501a92d033c6 GIT binary patch literal 9674 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 literal 0 HcmV?d00001 diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(generic.light).png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(generic.light).png new file mode 100644 index 0000000000000000000000000000000000000000..342e775762b2dcd5e323f3d471f733b6b2d26aac GIT binary patch literal 8521 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 literal 0 HcmV?d00001 diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1228720-grid-tagbox-on-edit_(material.blue.light).png new file mode 100644 index 0000000000000000000000000000000000000000..5e05cc3fa40df5285e3db82263ce86c8db09dde3 GIT binary patch literal 11246 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 KarS-l{eJ^H4ELn~ literal 0 HcmV?d00001 diff --git a/e2e/testcafe-devextreme/tests/dataGrid/tagBox.ts b/e2e/testcafe-devextreme/tests/dataGrid/tagBox.ts new file mode 100644 index 000000000000..6c051268c0e0 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/dataGrid/tagBox.ts @@ -0,0 +1,69 @@ +/* eslint-disable @typescript-eslint/no-floating-promises */ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import DataGrid from 'devextreme-testcafe-models/dataGrid'; +import url from '../../helpers/getPageUrl'; +import { createWidget } from '../../helpers/createWidget'; +import { changeTheme } from '../../helpers/changeTheme'; +import { Themes } from '../../helpers/themes'; + +fixture.disablePageReloads`Tagbox Columns`.page( + url(__dirname, '../container.html'), +); +// T1228720 +[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach( + (theme) => { + test('Datagrid tagbox column should not look broken', async (t) => { + const dataGrid = new DataGrid('#container'); + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + await t + .click(dataGrid.getDataCell(0, 1).element) + .expect( + await takeScreenshot( + `T1228720-grid-tagbox-on-edit_(${theme}).png`, + dataGrid.element, + ), + ) + .ok() + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }) + .before(async () => { + await changeTheme(theme); + await createWidget('dxDataGrid', { + showBorders: true, + allowColumnResizing: true, + dataSource: [{ id: 1, items: [1, 2, 3, 4, 5] }], + columns: [ + 'id', + { + dataField: 'items', + editCellTemplate(container, cellInfo) { + ($('

') as any) + .dxTagBox({ + dataSource: Array.from({ length: 10 }, (_, index) => ({ + id: index + 1, + text: `item ${index + 1}`, + })), + value: cellInfo.value, + valueExpr: 'id', + displayExpr: 'text', + onValueChanged(e) { + cellInfo.setValue(e.value); + }, + onSelectionChanged() { + cellInfo.component.updateDimensions(); + }, + searchEnabled: true, + }) + .appendTo(container); + }, + }, + ], + editing: { mode: 'batch', allowUpdating: 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 index 2ca14f5045c8..a740f219ccf6 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/gridBase/_index.scss @@ -84,19 +84,11 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } } - .dx-editor-with-menu { + .dx-#{$widget-name}-filter-row .dx-editor-with-menu { .dx-menu-item-content { display: flex; justify-content: center; align-items: center; - - .dx-icon { - @include dx-icon-sizing($fluent-grid-base-filter-icon-size - 4); - - &.dx-icon-filter-operation-default { - margin-top: 2px; - } - } } .dx-texteditor { @@ -440,7 +432,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig box-shadow: none; } - .dx-texteditor-input { + &:not(.dx-tagbox) .dx-texteditor-input { background: $datagrid-editor-bg; font-size: $fluent-grid-base-cell-font-size; height: $fluent-grid-base-cell-height; @@ -466,7 +458,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig } } - .dx-tag-container { + &:not(.dx-tagbox) .dx-tag-container { min-height: $fluent-grid-base-cell-height; padding: 0; } diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss index e4baddbdb732..f221a3668e0b 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss @@ -74,19 +74,11 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- } } - .dx-editor-with-menu { + .dx-#{$widget-name}-filter-row .dx-editor-with-menu { .dx-menu-item-content { display: flex; justify-content: center; align-items: center; - - .dx-icon { - @include dx-icon-sizing($material-grid-base-filter-icon-size - 4); - - &.dx-icon-filter-operation-default { - margin-top: 2px; - } - } } .dx-texteditor { @@ -418,7 +410,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- box-shadow: none; } - .dx-texteditor-input { + &:not(.dx-tagbox) .dx-texteditor-input { background: $datagrid-editor-bg; font-size: $material-grid-base-cell-font-size; height: $material-grid-base-cell-height; @@ -444,7 +436,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line- } } - .dx-tag-container { + &:not(.dx-tagbox) .dx-tag-container { min-height: $material-grid-base-cell-height; padding: 0; }