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

@@ -501,6 +501,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

@@ -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

@@ -230,8 +230,8 @@ export class AppointmentForm {
     const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
     const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
 
-    this.setStylingModeToEditors(mainGroup, showMainGroupIcons);
-    this.setStylingModeToEditors(recurrenceGroup, showRecurrenceGroupIcons);
+    this.applyFormItemDefaults(mainGroup, showMainGroupIcons);
+    this.applyFormItemDefaults(recurrenceGroup, showRecurrenceGroupIcons);
 
     const editingConfig = this.scheduler.getEditingConfig();
     const customizedItems = customizeFormItems(items, editingConfig?.form?.items);
@@ -347,10 +347,6 @@ export class AppointmentForm {
       name: SUBJECT_GROUP_NAME,
       itemType: 'group',
       cssClass: `${CLASSES.subjectGroup} ${CLASSES.groupWithIcon}`,
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       items: [
         {
           name: SUBJECT_ICON_NAME,
@@ -378,10 +374,6 @@ export class AppointmentForm {
       name: DATE_GROUP_NAME,
       itemType: 'group',
       cssClass: `${CLASSES.dateRangeGroup} ${CLASSES.groupWithIcon}`,
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       items: [
         {
           name: DATE_ICON_NAME,
@@ -659,10 +651,6 @@ export class AppointmentForm {
     return {
       name: REPEAT_GROUP_NAME,
       itemType: 'group',
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       cssClass: `${CLASSES.repeatGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
@@ -715,10 +703,6 @@ export class AppointmentForm {
     return {
       name: DESCRIPTION_GROUP_NAME,
       itemType: 'group',
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       cssClass: `${CLASSES.descriptionGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
@@ -777,10 +761,6 @@ export class AppointmentForm {
         name: RESOURCES_GROUP_NAME,
         itemType: 'group',
         visible: resourcesItems.length > 0,
-        colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
         cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`,
         items: [
           {
@@ -806,10 +786,6 @@ export class AppointmentForm {
       return {
         itemType: 'group',
         name: `${dataField}Group`,
-        colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
         cssClass: CLASSES.groupWithIcon,
         items: [
           {
@@ -835,17 +811,12 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private setStylingModeToEditors(item: FormItem, showIcon: boolean): void {
+  private applyFormItemDefaults(item: FormItem, showIcon: boolean): void {
     const itemClasses = (item.cssClass ?? '').split(' ');
     const isIconItem = itemClasses.includes(CLASSES.formIcon);
 
     if (isIconItem) {
-      const isHidden = itemClasses.includes(CLASSES.hidden);
-
-      if (!showIcon && !isHidden) {
-        item.cssClass += ` ${CLASSES.hidden}`;
-      }
-
+      item.visible = showIcon;
       return;
     }
 
@@ -862,8 +833,15 @@ export class AppointmentForm {
 
     if (item.itemType === 'group') {
       const groupItem = item as GroupItem;
+
+      if (itemClasses.includes(CLASSES.groupWithIcon)) {
+        const colCount = showIcon ? 2 : 1;
+        groupItem.colCount = colCount;
+        groupItem.colCountByScreen = { xs: colCount };
+      }
+
       groupItem.items?.forEach((child) => {
-        this.setStylingModeToEditors(child, showIcon);
+        this.applyFormItemDefaults(child, showIcon);
       });
     }
   }

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

@@ -200,10 +200,6 @@ export class RecurrenceForm {
     return {
       name: GROUP_NAMES.recurrenceStartDateGroup,
       itemType: 'group',
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       cssClass: CLASSES.groupWithIcon,
       items: [
         {
@@ -240,10 +236,6 @@ export class RecurrenceForm {
       itemType: 'group',
       name: GROUP_NAMES.recurrenceRuleGroup,
       cssClass: `${CLASSES.recurrenceSettingsGroup} ${CLASSES.groupWithIcon}`,
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       items: [
         {
           name: ICON_NAMES.recurrenceRuleIcon,
@@ -444,10 +436,6 @@ export class RecurrenceForm {
     return {
       name: GROUP_NAMES.recurrenceEndGroup,
       itemType: 'group',
-      colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
       cssClass: `${CLASSES.groupWithIcon} ${CLASSES.recurrenceEndGroup}`,
       items: [
         {