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`
@@ -226,6 +227,35 @@ test.meta({ browserSize: [450, 1000] })('main form on mobile screen', async (t)
   },
 }));
 
+test.meta({ browserSize: [1500, 1500] })('main form without icons', 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__icons-mode-none.png',
+    { element: appointmentPopup.contentElement },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [],
+  views: ['week'],
+  currentView: 'week',
+  currentDate: new Date(2021, 2, 25),
+  resources: getResources(true),
+  editing: {
+    form: {
+      iconsShowMode: 'none',
+    },
+  },
+}));
+
 test.meta({ browserSize: [1500, 1500] })('appointment form resource with multiple selection', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -338,7 +368,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/_sizes.scss

@@ -100,7 +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-icon-inner-label-margin-top: 7px !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;
@@ -169,7 +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-icon-inner-label-margin-top: 6px !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/appointment_popup.test.ts

@@ -1722,21 +1722,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 iconsShowMode = this.getIconsShowMode();
+    const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
+    const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
+
     const mainGroup = this.createMainFormGroup();
 
     this._recurrenceForm = new RecurrenceForm(this.scheduler);
-    const recurrenceGroup = this._recurrenceForm.createRecurrenceFormGroup();
+    const recurrenceGroup = this._recurrenceForm
+      .createRecurrenceFormGroup();
 
     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);
 
@@ -348,9 +349,7 @@ export class AppointmentForm {
       itemType: 'group',
       cssClass: `${CLASSES.subjectGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: SUBJECT_ICON_NAME,
@@ -379,9 +378,7 @@ export class AppointmentForm {
       itemType: 'group',
       cssClass: `${CLASSES.dateRangeGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: DATE_ICON_NAME,
@@ -660,9 +657,7 @@ export class AppointmentForm {
       name: REPEAT_GROUP_NAME,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.repeatGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
@@ -716,9 +711,7 @@ export class AppointmentForm {
       name: DESCRIPTION_GROUP_NAME,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.descriptionGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
@@ -778,9 +771,7 @@ export class AppointmentForm {
         itemType: 'group',
         visible: resourcesItems.length > 0,
         colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
+        colCountByScreen: { xs: 2 },
         cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`,
         items: [
           {
@@ -807,9 +798,7 @@ export class AppointmentForm {
         itemType: 'group',
         name: `${dataField}Group`,
         colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
+        colCountByScreen: { xs: 2 },
         cssClass: CLASSES.groupWithIcon,
         items: [
           {
@@ -818,7 +807,7 @@ export class AppointmentForm {
             cssClass: CLASSES.formIcon,
             template: createFormIconTemplate(icon),
           },
-          item,
+          { ...item },
         ],
       } as GroupItem;
     });
@@ -840,12 +829,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;
     }
 
@@ -862,6 +845,19 @@ export class AppointmentForm {
 
     if (item.itemType === 'group') {
       const groupItem = item as GroupItem;
+
+      if (itemClasses.includes(CLASSES.groupWithIcon)) {
+        groupItem.items?.forEach((child) => {
+          const childClasses = (child.cssClass ?? '').split(' ');
+
+          if (childClasses.includes(CLASSES.formIcon)) {
+            (child as SimpleItem).visible = showIcon;
+          } else {
+            (child as SimpleItem).colSpan = showIcon ? 1 : 2;
+          }
+        });
+      }
+
       groupItem.items?.forEach((child) => {
         this.setStylingModeToEditors(child, showIcon);
       });

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

@@ -201,9 +201,7 @@ export class RecurrenceForm {
       name: GROUP_NAMES.recurrenceStartDateGroup,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: CLASSES.groupWithIcon,
       items: [
         {
@@ -217,6 +215,7 @@ export class RecurrenceForm {
           getStartDateCommonConfig(this.scheduler.getFirstDayOfWeek()),
           {
             name: EDITOR_NAMES.recurrenceStartDateEditor,
+            colSpan: 1,
             cssClass: CLASSES.recurrenceStartDateEditor,
             label: {
               text: messageLocalization.format('dxScheduler-editorLabelStartDate'),
@@ -241,9 +240,7 @@ export class RecurrenceForm {
       name: GROUP_NAMES.recurrenceRuleGroup,
       cssClass: `${CLASSES.recurrenceSettingsGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: ICON_NAMES.recurrenceRuleIcon,
@@ -256,9 +253,7 @@ export class RecurrenceForm {
           name: GROUP_NAMES.recurrencePatternGroup,
           colSpan: 1,
           colCount: 1,
-          colCountByScreen: {
-            xs: 1,
-          },
+          colCountByScreen: { xs: 1 },
           items: [
             this.createRecurrenceRuleGroup(),
             this.createDaysOfWeekGroup(),
@@ -445,9 +440,7 @@ export class RecurrenceForm {
       name: GROUP_NAMES.recurrenceEndGroup,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.groupWithIcon} ${CLASSES.recurrenceEndGroup}`,
       items: [
         {