From 9abb4150b3d073fb34c350f2f9821c2dcfab9d5f Mon Sep 17 00:00:00 2001
From: Andrey Dolzhikov <eylau-andrew@mail.ru>
Date: Thu, 14 Sep 2023 17:14:50 +0300
Subject: [PATCH] T1186613 - DataGrid - Toolbar items are vertically misaligned
 (#25594)

---
 scss/widgets/base/dataGrid/_common.scss       |   2 +-
 scss/widgets/generic/dataGrid/_index.scss     |   1 +
 scss/widgets/generic/gridBase/_index.scss     |   3 +-
 scss/widgets/material/dataGrid/_index.scss    |   1 +
 scss/widgets/material/gridBase/_index.scss    |   2 +
 .../etalons/group-panel-message-align.png     | Bin 0 -> 8922 bytes
 .../grouping/etalons/groupingPanel.png        | Bin 2070 -> 2029 bytes
 .../tests/dataGrid/grouping/grouping.ts       |  43 ++++++++++++++++++
 8 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 testing/testcafe/tests/dataGrid/grouping/etalons/group-panel-message-align.png

diff --git a/scss/widgets/base/dataGrid/_common.scss b/scss/widgets/base/dataGrid/_common.scss
index 6256851fc951..d3b3b8c61c9e 100644
--- a/scss/widgets/base/dataGrid/_common.scss
+++ b/scss/widgets/base/dataGrid/_common.scss
@@ -30,7 +30,7 @@
 }
 
 .dx-datagrid-group-panel {
-  display: inline-block;
+  display: flex;
   white-space: nowrap;
   width: 100%;
   touch-action: pinch-zoom;
diff --git a/scss/widgets/generic/dataGrid/_index.scss b/scss/widgets/generic/dataGrid/_index.scss
index 90e3d8270f1d..7ec48f869da1 100644
--- a/scss/widgets/generic/dataGrid/_index.scss
+++ b/scss/widgets/generic/dataGrid/_index.scss
@@ -37,6 +37,7 @@
     padding: $generic-datagrid-cell-padding;
     border-top: $generic-grid-base-border-hidden;
     border-bottom: $generic-grid-base-border-hidden;
+    line-height: $generic-grid-base-group-panel-message-line-height;
   }
 
   .dx-group-panel-item {
diff --git a/scss/widgets/generic/gridBase/_index.scss b/scss/widgets/generic/gridBase/_index.scss
index b2539c974034..ec8e76cd1e5b 100644
--- a/scss/widgets/generic/gridBase/_index.scss
+++ b/scss/widgets/generic/gridBase/_index.scss
@@ -13,6 +13,7 @@
 @use "../toolbar/colors" as *;
 @use "../button/mixins" as *;
 @use "../button/colors" as *;
+@use "../button/sizes" as *;
 @use "../validation/colors" as *;
 
 // adduse
@@ -29,7 +30,7 @@ $generic-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-se
 $generic-grid-base-checkbox-icon-size: 16px;
 $generic-grid-base-checkbox-indeterminate-icon-size: 6px;
 $grid-masterdetail-padding: 20px;
-
+$generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
 
 @mixin dx-set-checkbox-border-color-as-background() {
   @if $generic-color-postfix == ".contrast" {
diff --git a/scss/widgets/material/dataGrid/_index.scss b/scss/widgets/material/dataGrid/_index.scss
index a1752e625bc1..5748bb4538b4 100644
--- a/scss/widgets/material/dataGrid/_index.scss
+++ b/scss/widgets/material/dataGrid/_index.scss
@@ -37,6 +37,7 @@
     padding: $material-datagrid-cell-padding 0;
     border-top: $material-grid-base-border-hidden;
     border-bottom: $material-grid-base-border-hidden;
+    line-height: $material-grid-base-group-panel-message-line-height;
   }
 
   .dx-group-panel-item {
diff --git a/scss/widgets/material/gridBase/_index.scss b/scss/widgets/material/gridBase/_index.scss
index 1d762ee51727..61ce26b44fce 100644
--- a/scss/widgets/material/gridBase/_index.scss
+++ b/scss/widgets/material/gridBase/_index.scss
@@ -16,6 +16,7 @@
 @use "../toolbar/colors" as *;
 @use "../button/mixins" as *;
 @use "../button/colors" as *;
+@use "../button/sizes" as *;
 @use "../validation/colors" as *;
 @use "../typography/sizes" as *;
 
@@ -37,6 +38,7 @@ $material-grid-base-command-select-column-width: $material-grid-base-checkbox-si
 $material-grid-base-cell-vertical-padding: round(math.div($material-grid-base-cell-height - $material-grid-base-cell-line-height, 2));
 $material-grid-base-cell-padding: $material-grid-base-cell-vertical-padding $material-grid-base-cell-horizontal-padding;
 $grid-masterdetail-padding: 16px;
+$material-grid-base-group-panel-message-line-height: $material-button-text-line-height;
 
 @mixin grid-base($widget-name) {
   .dx-#{$widget-name},
diff --git a/testing/testcafe/tests/dataGrid/grouping/etalons/group-panel-message-align.png b/testing/testcafe/tests/dataGrid/grouping/etalons/group-panel-message-align.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6359e7734494ce7b82f656e7eb0488ab17056a1
GIT binary patch
literal 8922
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

literal 0
HcmV?d00001

diff --git a/testing/testcafe/tests/dataGrid/grouping/etalons/groupingPanel.png b/testing/testcafe/tests/dataGrid/grouping/etalons/groupingPanel.png
index d72e25defee7c7677e659a34febdc6d15d77dff8..38bf749ddba44abc521b419ca2e1961347a53ff9 100644
GIT binary patch
literal 2029
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

literal 2070
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
Ppcf%nku0n67jFCmWlz<r

diff --git a/testing/testcafe/tests/dataGrid/grouping/grouping.ts b/testing/testcafe/tests/dataGrid/grouping/grouping.ts
index 9b8dd6104aeb..63db047b921f 100644
--- a/testing/testcafe/tests/dataGrid/grouping/grouping.ts
+++ b/testing/testcafe/tests/dataGrid/grouping/grouping.ts
@@ -259,3 +259,46 @@ safeSizeTest('Empty header message should appear when all columns grouped and se
     },
   });
 });
+
+test('Group panel message should be vertically aligned (T1186613)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+
+  await t
+    .expect(await takeScreenshot('group-panel-message-align.png', dataGrid.getToolbar().element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  groupPanel: {
+    visible: true,
+  },
+  showBorders: true,
+  searchPanel: {
+    visible: true,
+  },
+  editing: {
+    allowAdding: true,
+  },
+  toolbar: {
+    items: [
+      'groupPanel',
+      {
+        showText: 'always',
+        location: 'before',
+        name: 'addRowButton',
+        options: {
+          icon: null,
+          text: 'add a new row',
+        },
+      }, {
+        location: 'before',
+        widget: 'dxTextBox',
+        options: {
+          width: 140,
+          text: 'TestTest',
+        },
+      },
+    ],
+  },
+}));