diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent.blue.light).png new file mode 100644 index 000000000000..7adcf787de77 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__icons-mode-none (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png new file mode 100644 index 000000000000..ecf9516754e2 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png new file mode 100644 index 000000000000..1a464e3e4618 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png index 8fdb5ff204d2..d10c6419aefa 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png index 866eb5abfb0e..35ea1968a61c 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png index b431e91ed2cf..5b9e549c2be3 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png index 4edc5cb29143..35ea1968a61c 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png index 924784a7155a..e28a1148fe9b 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png index 5c3ea3ce5684..02ad54490416 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png index da23ddb3f1e6..837906ad7391 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png index a81c27863970..71f952fa8b26 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png index 1d45f179e0cd..1a523deb167b 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png index c00a44a6db0f..eabaeba10d90 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png index 244c470549f5..a05e78aa6f4f 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png index 3892cd4d9df8..a550e6b34cf1 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png index 69c9e44a16e5..395855353dda 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png index 737e178ee967..689c643dcbe8 100644 Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light)_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts index 0d61f2799deb..b43e43c3c238 100644 --- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts +++ b/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); diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss index de7a07be1ec4..7a591f2a3c92 100644 --- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss +++ b/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 diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss index 97a54afea79d..d862b76ec6d1 100644 --- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss +++ b/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; diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts index 0c4216ec7fb3..736e72e60a77 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts +++ b/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); }); }); }); diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts index dc44f0c7be9a..14ca94510ca2 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts +++ b/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); }); } } diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts index 8429a6552c4f..5034d018757f 100644 --- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts +++ b/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: [ {