DataGrid - ColorBox in DataGrid causes input value to appear behind color preview (T1280023) (#29978)

Author: tongsonbarbs

apps/demos/testing/etalons/TreeList-Resizing (material.blue.light).png

@@ -9,6 +9,7 @@ import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 import { changeTheme } from '../../helpers/changeTheme';
 import { getData } from './helpers/generateDataSourceData';
+import { Themes } from '../../helpers/themes';
 
 fixture.disablePageReloads`Editing`
   .page(url(__dirname, '../container.html'));
@@ -2767,3 +2768,42 @@ test('DataGrid - A new row is added above the existing row if the data source is
     },
   ],
 }));
+
+[
+  Themes.genericLight,
+  Themes.fluentBlue,
+  Themes.materialBlue,
+].forEach((theme) => {
+  test('DataGrid - ColorBox in DataGrid causes input value to appear behind color preview (T1280023)', async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid('#container');
+
+    await t.click(dataGrid.getDataCell(0, 0).element);
+
+    await t
+      .expect(await takeScreenshot(`grid-form-editing-with-color-box_(${theme})`, dataGrid.element))
+      .ok()
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  })
+    .before(async () => {
+      await changeTheme(theme);
+      await createWidget('dxDataGrid', {
+        dataSource: [
+          { Color: 'red' },
+        ],
+        showBorders: true,
+        editing: {
+          allowUpdating: true,
+          mode: 'cell',
+        },
+        onEditorPreparing(e) {
+          if (e.dataField === 'Color') {
+            e.editorName = 'dxColorBox';
+            e.editorOptions.readOnly = false;
+          }
+        },
+      });
+    })
+    .after(async () => changeTheme(Themes.genericLight));
+});

apps/demos/testing/etalons/TreeList-Resizing (material.blue.light)_mask.png

@@ -92,9 +92,11 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       }
 
       .dx-texteditor {
-        .dx-texteditor-input,
-        .dx-placeholder::before {
-          padding-left: $fluent-grid-base-texteditor-input-padding;
+        .dx-texteditor-container {
+          .dx-texteditor-input,
+          .dx-placeholder::before {
+            padding-left: $fluent-grid-base-texteditor-input-padding;
+          }
         }
       }
     }
@@ -437,13 +439,13 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         font-size: $fluent-grid-base-cell-font-size;
         height: $fluent-grid-base-cell-height;
         line-height: $fluent-grid-base-cell-height;
-        padding-right: $fluent-grid-base-cell-horizontal-padding;
-        padding-left: $fluent-grid-base-cell-horizontal-padding;
-        padding-top: 0;
-        padding-bottom: 0;
         margin-top: 0;
       }
 
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 $fluent-grid-base-cell-horizontal-padding;
+      }
+
       .dx-placeholder::before {
         padding-right: $fluent-grid-base-cell-horizontal-padding;
         padding-left: $fluent-grid-base-cell-horizontal-padding;

apps/demos/testing/widgets/vectormap/etalons/vectormap_tooltip (material.blue.light).png

@@ -82,9 +82,11 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       }
 
       .dx-texteditor {
-        .dx-texteditor-input,
-        .dx-placeholder::before {
-          padding-left: $material-grid-base-texteditor-input-padding;
+        .dx-texteditor-container {
+          .dx-texteditor-input,
+          .dx-placeholder::before {
+            padding-left: $material-grid-base-texteditor-input-padding;
+          }
         }
       }
     }
@@ -415,13 +417,15 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         font-size: $material-grid-base-cell-font-size;
         height: $material-grid-base-cell-height;
         line-height: $material-grid-base-cell-height;
-        padding-right: $material-grid-base-cell-horizontal-padding;
-        padding-left: $material-grid-base-cell-horizontal-padding;
         padding-top: 0;
         padding-bottom: 0;
         margin-top: 0;
       }
 
+      &:not(.dx-tagbox):not(.dx-colorbox) .dx-texteditor-input {
+        padding: 0 $material-grid-base-cell-horizontal-padding;
+      }
+
       .dx-placeholder::before {
         padding-right: $material-grid-base-cell-horizontal-padding;
         padding-left: $material-grid-base-cell-horizontal-padding;