Add scheduler toolbar multiline option (#29218)

Co-authored-by: Vladimir Bushmanov <vladimir.bushmanov@devexpress.com>

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-false-toolbar.png

@@ -0,0 +1,35 @@
+import { compareScreenshot } from 'devextreme-screenshot-comparer';
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Scheduler multiline header`
+  .page(url(__dirname, '../../../container.html'));
+
+const buttons = Array.from({ length: 12 }).map((_, index) => ({
+  location: 'before',
+  locateInMenu: 'auto',
+  widget: 'dxButton',
+  options: { text: `Button ${index}` },
+}));
+
+[true, false].forEach((multiline) => {
+  test(`Scheduler [multiline=${multiline}] toolbar`, async (t) => {
+    const scheduler = new Scheduler('#container');
+
+    await t.expect(await compareScreenshot(t, `scheduler-multiline-${multiline}-toolbar.png`, scheduler.element)).ok();
+  }).before(async () => createWidget('dxScheduler', {
+    views: ['day', 'week', 'workWeek', 'month'],
+    currentView: 'workWeek',
+    currentDate: new Date(2021, 3, 27),
+    height: 200,
+    toolbar: {
+      multiline,
+      items: [
+        'dateNavigator',
+        ...buttons,
+        'viewSwitcher',
+      ],
+    },
+  }));
+});

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-multiline-true-toolbar.png

@@ -28,10 +28,17 @@ $arrow-down: "\f016";
 @mixin header-sizes(
   $height,
   $item-padding,
+  $border,
 ) {
-  height: $height;
-
   .dx-toolbar {
+    &:not(.dx-toolbar-multiline) {
+      @if $border {
+        height: $height - 2px;
+      } @else {
+        height: $height;
+      }
+    }
+
     .dx-toolbar-item-content,
     .dx-toolbar-menu-container {
       padding: $item-padding;

e2e/testcafe-devextreme/tests/scheduler/common/header/multiline_header.ts

@@ -438,6 +438,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   @include header-sizes(
     $fluent-scheduler-header-height,
     $fluent-scheduler-toolbar-item-offset,
+    baseScheduler.$scheduler-base-border,
   );
 
   .dx-scheduler-navigator-next,

packages/devextreme-scss/scss/widgets/base/scheduler/layout/_header.scss

@@ -149,6 +149,7 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
   @include header-sizes(
     $generic-scheduler-header-height,
     $generic-scheduler-toolbar-item-offset,
+    baseScheduler.$scheduler-base-border,
   );
 
   background-color: $scheduler-header-bg;

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -379,6 +379,7 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   @include header-sizes(
     $material-scheduler-header-height,
     $material-scheduler-toolbar-item-offset,
+    baseScheduler.$scheduler-base-border,
   );
   @include header-buttons(
     $button-normal-bg,

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

@@ -375,6 +375,7 @@ class Scheduler extends Widget<any> {
 
       toolbar: {
         disabled: false,
+        multiline: false,
         items: [
           { location: 'before', name: 'dateNavigator' },
           { location: 'after', name: 'viewSwitcher' },