T1186613 - DataGrid - Toolbar items are vertically misaligned (#25594)

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;

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 {

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" {

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 {

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},

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',
+        },
+      },
+    ],
+  },
+}));