DevExpress · sjbur · Mar 11, 2026 · Mar 11, 2026 · Mar 11, 2026 · Mar 11, 2026
@@ -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);

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

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

@@ -1762,21 +1762,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);
       });
     });
   });

@@ -841,12 +841,7 @@ export class AppointmentForm {
     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;
     }
 
@@ -863,6 +858,13 @@ 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);
       });