DataGrid - Validation message gets cut off in Fluent and Material themes (T1285387) (DevExpress#29849)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/common/validation/cellEditing.ts

@@ -1,6 +1,10 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
+import { Themes } from '../../../../helpers/themes';
+import { changeTheme } from '../../../../helpers/changeTheme';
 
 fixture.disablePageReloads`Validation`
   .page(url(__dirname, '../../../container.html'));
@@ -49,3 +53,42 @@ fixture.disablePageReloads`Validation`
     }],
   }));
 });
+[
+  Themes.genericLight,
+  Themes.materialBlue,
+  Themes.fluentBlue,
+].forEach((theme) => {
+  test('DataGrid - Validation message gets cut off in Fluent and Material themes (T1285387)', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid('#container');
+    const dataCellEditLink = dataGrid.getDataCell(0, 1).getLinkEdit();
+
+    await t.click(dataCellEditLink);
+    await t.pressKey('backspace enter');
+
+    await testScreenshot(t, takeScreenshot, `Invalid-message-word-wrapping-${theme}`, { element: dataGrid.element });
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+    await createWidget('dxDataGrid', {
+      dataSource: [
+        { A: 'n' },
+      ],
+      width: 800,
+      editing: {
+        mode: 'form',
+        allowUpdating: true,
+      },
+      columns: [{
+        dataField: 'A',
+        validationRules: [{ type: 'required', message: 'sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext' }],
+      },
+      ],
+    });
+  }).after(async () => {
+    await changeTheme(Themes.genericLight);
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/common/validation/etalons/Invalid-message-word-wrapping-fluent.blue.light.png

@@ -46,12 +46,17 @@ $datagrid-text-stub-background-image-path: null !default;
   border-color: $datagrid-drag-header-border-color;
 }
 
-@mixin dx-datagrid-error-message() {
-  background-color: $datagrid-row-error-bg;
+@mixin dx-datagrid-error-popup() {
   white-space: normal;
   word-wrap: break-word;
 }
 
+@mixin dx-datagrid-error-message() {
+  background-color: $datagrid-row-error-bg;
+
+  @include dx-datagrid-error-popup();
+}
+
 .dx-datagrid {
   color: $datagrid-base-color;
 
@@ -215,6 +220,12 @@ $datagrid-text-stub-background-image-path: null !default;
     }
   }
 
+  .dx-invalid-message {
+    .dx-overlay-content {
+      @include dx-datagrid-error-popup();
+    }
+  }
+
   .dx-column-lines > td {
     &:first-child {
       border-left: none;