Scheduler: Appointment Form - fix paddings

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

@@ -2,6 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
+import { Themes } from '../../../../helpers/themes';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Appointment Form: Main Form`
@@ -338,7 +339,10 @@ test.meta({ browserSize: [1500, 1500] })('Recurrence settings button should have
   });
 });
 
-test.meta({ browserSize: [1500, 1500] })('appointment form with labelMode=static', async (t) => {
+test.meta({
+  browserSize: [1500, 1500],
+  themes: [Themes.genericLight, Themes.materialBlue, Themes.fluentBlue],
+})('appointment form with labelMode=static', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const scheduler = new Scheduler(SCHEDULER_SELECTOR);

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

@@ -503,6 +503,10 @@ $scheduler-appointment-form-label-padding: 20px;
         }
       }
 
+      .dx-scheduler-form-recurrence-group.dx-field-item {
+        padding: 0;
+      }
+
       /* Icons alignment */
       .dx-scheduler-form-group-with-icon .dx-item-content > .dx-box-item:has(.dx-scheduler-form-icon) {
         flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important

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

@@ -285,6 +285,13 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
       }
     }
 
+    // Fix icon height and padding for floating and static input's label modes
+    .dx-item-content:has(.dx-texteditor-with-floating-label):not(:has(.dx-scheduler-form-all-day-switch)) .dx-scheduler-form-icon.dx-field-item,
+    .dx-item-content:has(.dx-texteditor-with-label):not(:has(.dx-scheduler-form-all-day-switch)) .dx-scheduler-form-icon.dx-field-item {
+      height: $generic-scheduler-appointment-popup-icon-static-label-container-height;
+      padding-top: $generic-scheduler-appointment-popup-icon-static-label-padding-top;
+    }
+
     .dx-scheduler-form-icon-sized-gap {
       width: $generic-scheduler-appointment-popup-icon-size;
     }

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

@@ -31,6 +31,8 @@ $generic-scheduler-appointment-popup-toolbar-height: null !default;
 $generic-scheduler-appointment-popup-toolbar-label-size: null !default;
 $generic-scheduler-appointment-popup-icon-size: null !default;
 $generic-scheduler-appointment-popup-icon-container-height: null !default;
+$generic-scheduler-appointment-popup-icon-static-label-container-height: null !default;
+$generic-scheduler-appointment-popup-icon-static-label-padding-top: 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;
@@ -98,6 +100,8 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-toolbar-label-size: 20px !default;
   $generic-scheduler-appointment-popup-icon-size: 18px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 36px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-container-height: 42px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-padding-top: 7px !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;
@@ -167,6 +171,8 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-toolbar-label-size: 18px !default;
   $generic-scheduler-appointment-popup-icon-size: 14px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 26px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-container-height: 26px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-padding-top: 2px !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;

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

@@ -1852,21 +1852,8 @@ describe('Appointment Form', () => {
         const mainFormIcons = POM.popup.mainGroup.querySelectorAll(`.${CLASSES.icon}`);
         const recurrenceFormIcons = POM.popup.recurrenceGroup.querySelectorAll(`.${CLASSES.icon}`);
 
-        expect(mainFormIcons.length).toBe(4);
-        expect(recurrenceFormIcons.length).toBe(3);
-
-        const mainIconsCorrect = Array.from(mainFormIcons).every((icon) => {
-          const isVisible = !icon.classList.contains(CLASSES.hidden);
-          return isVisible === visibleMain;
-        });
-
-        const recurrenceIconsCorrect = Array.from(recurrenceFormIcons).every((icon) => {
-          const isVisible = !icon.classList.contains(CLASSES.hidden);
-          return isVisible === visibleRecurrence;
-        });
-
-        expect(mainIconsCorrect).toBe(true);
-        expect(recurrenceIconsCorrect).toBe(true);
+        expect(mainFormIcons.length).toBe(visibleMain ? 4 : 0);
+        expect(recurrenceFormIcons.length).toBe(visibleRecurrence ? 3 : 0);
       });
     });
   });

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

@@ -219,17 +219,18 @@ export class AppointmentForm {
   create(popup: any): void {
     this._popup = popup;
 
-    const mainGroup = this.createMainFormGroup();
+    const iconsShowMode = this.getIconsShowMode();
+    const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
+    const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
+
+    const mainGroup = this.createMainFormGroup(showMainGroupIcons);
 
     this._recurrenceForm = new RecurrenceForm(this.scheduler);
-    const recurrenceGroup = this._recurrenceForm.createRecurrenceFormGroup();
+    const recurrenceGroup = this._recurrenceForm
+      .createRecurrenceFormGroup(showRecurrenceGroupIcons);
 
     const items = [mainGroup, recurrenceGroup];
 
-    const iconsShowMode = this.getIconsShowMode();
-    const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
-    const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
-
     this.setStylingModeToEditors(mainGroup, showMainGroupIcons);
     this.setStylingModeToEditors(recurrenceGroup, showRecurrenceGroupIcons);
 
@@ -324,43 +325,42 @@ export class AppointmentForm {
     return this.scheduler.createComponent(element, dxForm, formOptions) as dxForm;
   }
 
-  private createMainFormGroup(): GroupItem {
+  private createMainFormGroup(showIcon: boolean): GroupItem {
     return {
       name: MAIN_GROUP_NAME,
       itemType: 'group',
       colSpan: 1,
       cssClass: CLASSES.mainGroup,
       items: [
-        this.createSubjectGroup(),
-        this.createDateRangeGroup(),
-        this.createRepeatGroup(),
-        this.createResourcesGroup(),
-        this.createDescriptionGroup(),
+        this.createSubjectGroup(showIcon),
+        this.createDateRangeGroup(showIcon),
+        this.createRepeatGroup(showIcon),
+        this.createResourcesGroup(showIcon),
+        this.createDescriptionGroup(showIcon),
       ],
     } as GroupItem;
   }
 
-  private createSubjectGroup(): GroupItem {
+  private createSubjectGroup(showIcon: boolean): GroupItem {
     const { textExpr } = this.scheduler.getDataAccessors().expr;
 
     return {
       name: SUBJECT_GROUP_NAME,
       itemType: 'group',
       cssClass: `${CLASSES.subjectGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: SUBJECT_ICON_NAME,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('isnotblank'),
+          visible: showIcon,
         },
         {
           name: SUBJECT_EDITOR_NAME,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           itemType: 'simple',
           cssClass: CLASSES.textEditor,
           dataField: textExpr,
@@ -373,24 +373,23 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createDateRangeGroup(): GroupItem {
+  private createDateRangeGroup(showIcon: boolean): GroupItem {
     return {
       name: DATE_GROUP_NAME,
       itemType: 'group',
       cssClass: `${CLASSES.dateRangeGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: DATE_ICON_NAME,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('clock'),
+          visible: showIcon,
         },
         {
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           name: DATE_OPTIONS_GROUP_NAME,
           itemType: 'group',
           items: [
@@ -653,27 +652,26 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createRepeatGroup(): GroupItem {
+  private createRepeatGroup(showIcon: boolean): GroupItem {
     const { recurrenceRuleExpr } = this.scheduler.getDataAccessors().expr;
 
     return {
       name: REPEAT_GROUP_NAME,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.repeatGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
           name: REPEAT_ICON_NAME,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('repeat'),
+          visible: showIcon,
         },
         {
           name: REPEAT_EDITOR_NAME,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           itemType: 'simple',
           cssClass: CLASSES.repeatEditor,
           label: {
@@ -709,28 +707,27 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createDescriptionGroup(): GroupItem {
+  private createDescriptionGroup(showIcon: boolean): GroupItem {
     const { descriptionExpr } = this.scheduler.getDataAccessors().expr;
 
     return {
       name: DESCRIPTION_GROUP_NAME,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.descriptionGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
           name: DESCRIPTION_ICON_NAME,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('description'),
+          visible: showIcon,
         },
         {
           name: DESCRIPTION_EDITOR_NAME,
           dataField: descriptionExpr,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           itemType: 'simple',
           cssClass: CLASSES.descriptionEditor,
           label: {
@@ -745,7 +742,7 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createResourcesGroup(): GroupItem {
+  private createResourcesGroup(showIcon: boolean): GroupItem {
     const resourcesLoaders: ResourceLoader[] = Object.values(this.scheduler.getResourceById());
 
     let resourcesItems: FormItem[] = resourcesLoaders.map((resourceLoader) => {
@@ -778,47 +775,45 @@ export class AppointmentForm {
         itemType: 'group',
         visible: resourcesItems.length > 0,
         colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
+        colCountByScreen: { xs: 2 },
         cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`,
         items: [
           {
             name: RESOURCES_GROUP_ICON_NAME,
             colSpan: 1,
             cssClass: `${CLASSES.formIcon} ${CLASSES.defaultResourceIcon}`,
             template: createFormIconTemplate('addcircleoutline'),
+            visible: showIcon,
           },
           {
             name: RESOURCE_EDITORS_GROUP_NAME,
             itemType: 'group',
-            colSpan: 1,
+            colSpan: showIcon ? 1 : 2,
             items: resourcesItems,
           },
         ],
       } as GroupItem;
     }
 
-    resourcesItems = resourcesItems.map((item, index) => {
+    resourcesItems = resourcesItems.map((formItem, index) => {
       const icon = resourcesLoaders[index].icon ?? '';
       const dataField = resourcesLoaders[index].resourceIndex;
 
       return {
         itemType: 'group',
         name: `${dataField}Group`,
         colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
+        colCountByScreen: { xs: 2 },
         cssClass: CLASSES.groupWithIcon,
         items: [
           {
             colSpan: 1,
             name: `${dataField}Icon`,
             cssClass: CLASSES.formIcon,
             template: createFormIconTemplate(icon),
+            visible: showIcon,
           },
-          item,
+          { ...formItem, colSpan: showIcon ? 1 : 2 },
         ],
       } as GroupItem;
     });
@@ -840,12 +835,6 @@ export class AppointmentForm {
     const isIconItem = itemClasses.includes(CLASSES.formIcon);
 
     if (isIconItem) {
-      const isHidden = itemClasses.includes(CLASSES.hidden);
-
-      if (!showIcon && !isHidden) {
-        item.cssClass += ` ${CLASSES.hidden}`;
-      }
-
       return;
     }