Overview pr 32255

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts

@@ -337,3 +337,35 @@ test.meta({ browserSize: [1500, 1500] })('Recurrence settings button should have
     currentDate: new Date(2021, 2, 25),
   });
 });
+
+test.meta({ browserSize: [1500, 1500] })('appointment form with labelMode=static', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const appointmentPopup = await scheduler.openAppointmentPopup(t, undefined, false);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'scheduler__appointment__main-form__with-labelMode-static.png',
+    { element: appointmentPopup.contentElement },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 25),
+    resources: getResources(true),
+    editing: {
+      allowUpdating: true,
+      form: {
+        labelMode: 'static',
+      },
+    },
+  });
+});

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/recurrence-form.visual.ts

@@ -145,3 +145,71 @@ test.meta({ browserSize: [450, 1000] })('recurrence form on mobile screen', asyn
     },
   },
 }));
+
+test.meta({ browserSize: [1500, 1500] })('recurrence form with labelMode=static', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const appointment = {
+    text: 'Readonly Recurrent Appointment',
+    startDate: new Date('2024-01-01T10:00:00'),
+    endDate: new Date('2024-01-01T11:00:00'),
+    recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,WE,FR;COUNT=10',
+  };
+
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const appointmentPopup = await scheduler.openAppointmentPopup(t, appointment, true);
+
+  await appointmentPopup.openRecurrenceSettings(t);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'scheduler__appointment__recurrence-form__with-labelMode-static.png',
+    { element: appointmentPopup.contentElement },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 25),
+    editing: {
+      allowUpdating: true,
+      popup: {
+        width: 420,
+        height: 500,
+      },
+      form: {
+        iconsShowMode: 'both',
+        labelMode: 'static',
+        items: [
+          'mainGroup',
+          {
+            name: 'recurrenceGroup',
+            items: [
+              'recurrenceStartDateGroup',
+              'recurrenceRuleGroup',
+              {
+                name: 'recurrenceEndGroup',
+                items: [
+                  'recurrenceEndIcon',
+                  {
+                    name: 'recurrenceEndEditor',
+                    label: {
+                      visible: true,
+                      location: 'top',
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  });
+});

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

@@ -510,16 +510,26 @@ $scheduler-appointment-form-label-padding: 20px;
       .dx-scheduler-form-icon {
         display: flex;
         align-items: center;
-        margin-top: $scheduler-appointment-popup-icon-margin-top;
 
         > .dx-field-item-content {
           line-height: 1;
         }
       }
 
-      .dx-scheduler-form-date-range-group .dx-scheduler-form-icon,
-      .dx-scheduler-form-recurrence-end-group .dx-scheduler-form-icon {
-        margin-top: 0;
+      .dx-scheduler-form-subject-group .dx-scheduler-form-icon,
+      .dx-scheduler-form-repeat-group .dx-scheduler-form-icon,
+      .dx-scheduler-form-description-group .dx-scheduler-form-icon {
+        align-items: start;
+        margin-top: $scheduler-appointment-popup-icon-margin-top;
+      }
+
+      .dx-scheduler-form-date-range-group .dx-scheduler-form-icon {
+        align-items: center;
+      }
+
+      .dx-scheduler-form-resources-group .dx-scheduler-form-group-with-icon .dx-scheduler-form-icon {
+        align-items: start;
+        margin-top: $scheduler-appointment-popup-icon-margin-top;
       }
 
       /* Editors alignment */

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

@@ -277,6 +277,10 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
           font-size: $generic-scheduler-appointment-popup-icon-size;
         }
       }
+
+      &.dx-scheduler-form-inner-label-offset {
+        margin-top: $generic-scheduler-appointment-popup-icon-inner-label-margin-top;
+      }
     }
 
     .dx-scheduler-form-icon-sized-gap {

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

@@ -33,6 +33,7 @@ $generic-scheduler-appointment-popup-icon-size: null !default;
 $generic-scheduler-appointment-popup-icon-container-height: null !default;
 $generic-scheduler-appointment-popup-icon-padding-right: null !default;
 $generic-scheduler-appointment-popup-icon-margin-top: null !default;
+$generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default;
 $generic-scheduler-appointment-popup-item-padding-horizontal: null !default;
 $generic-scheduler-appointment-popup-item-padding-top: null !default;
 $generic-scheduler-appointment-popup-all-day-item-height: null !default;
@@ -99,6 +100,7 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 36px !default;
   $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
   $generic-scheduler-appointment-popup-icon-margin-top: 22px !default;
+  $generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default;
   $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
   $generic-scheduler-appointment-popup-item-padding-top: 20px !default;
   $generic-scheduler-appointment-popup-all-day-item-height: 36px !default;
@@ -167,6 +169,7 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 26px !default;
   $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
   $generic-scheduler-appointment-popup-icon-margin-top: 18px !default;
+  $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 4.5px !default;
   $generic-scheduler-appointment-popup-item-padding-horizontal: 5px !default;
   $generic-scheduler-appointment-popup-item-padding-top: 10px !default;
   $generic-scheduler-appointment-popup-all-day-item-height: 24px !default;

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -34,6 +34,9 @@ const CLASSES = {
   icon: 'dx-icon',
   hidden: 'dx-hidden',
   fieldItemContent: 'dx-field-item-content',
+  formItem: 'dx-item',
+  labelTop: 'dx-field-item-label-location-top',
+  label: 'dx-label',
 
   groupWithIcon: 'dx-scheduler-form-group-with-icon',
   formIcon: 'dx-scheduler-form-icon',