Scheduler New Form — Fix slide animation overlapping items outside mainGroup

[aleksei-semikozov]

No description provided.

[Copilot]

Pull request overview

Fixes the appointment form slide animation in Scheduler so that when the main/recurrence groups are moved to position: absolute during the transition, they don’t overlap custom form items placed outside (e.g., before) mainGroup.

Changes:

• Compute and store a top offset (--dx-scheduler-animation-top) on the form element when switching to the recurrence form.
• Use that CSS variable for top positioning of the hidden main/recurrence groups during slide transitions.
• Add Jest coverage (and mock layout data) plus a Storybook scenario demonstrating a custom item before mainGroup.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts	Calculates and sets --dx-scheduler-animation-top before switching to recurrence group.
packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts	Adds a test asserting the CSS variable is set when switching to recurrence via repeat selection.
packages/devextreme/js/__internal/scheduler/tests/mock/m_mock_scheduler.ts	Extends getBoundingClientRect mock to provide a non-zero top for .dx-scheduler-form-main-group.
packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss	Applies top: var(--dx-scheduler-animation-top, 0) for hidden form groups to avoid overlap.
apps/react-storybook/stories/scheduler/form-customization.css	Adds styling for a custom notice element used in the new Storybook story.
apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx	Adds a story placing a custom item before mainGroup to showcase the fixed animation behavior.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Fixes the Scheduler appointment popup “new form” slide animation so that when switching between mainGroup and recurrenceGroup, the animated (absolutely positioned) group doesn’t overlap custom items placed before mainGroup.

Changes:

• Compute the mainGroup vertical offset within the form on recurrence navigation and store it in a CSS variable (--dx-scheduler-animation-top).
• Use that CSS variable for the top value of the hidden (sliding) main/recurrence groups in Scheduler SCSS.
• Add Jest coverage (with enhanced test DOM rect mocking) and a React Storybook scenario demonstrating a custom item placed before mainGroup.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts	Sets --dx-scheduler-animation-top before applying hidden/absolute positioning for the slide animation.
packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss	Applies top: var(--dx-scheduler-animation-top, 0) to hidden sliding groups to prevent overlap with preceding items.
packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts	Adds a test asserting the CSS variable is set when navigating to the recurrence form.
packages/devextreme/js/__internal/scheduler/__tests__/__mock__/m_mock_scheduler.ts	Extends getBoundingClientRect mock to support per-class rect overrides for tests.
apps/react-storybook/stories/scheduler/form-customization.css	Adds styling for a custom notice element used in the new story.
apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx	Adds a story demonstrating a custom element placed before mainGroup to validate the fix visually.

---

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Fixes Scheduler Appointment Popup slide animation so hidden/transitioning groups don’t overlap custom content placed above mainGroup in the new form layout.

Changes:

• Introduces a CSS variable (--dx-scheduler-animation-top) to offset hidden group positioning during slide transitions.
• Computes and sets the offset dynamically when switching to the recurrence form.
• Extends scheduler test environment mocking to support custom getBoundingClientRect values and adds a regression test; adds a Storybook scenario demonstrating the customization case.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts	Computes and sets the animation top offset on the form when switching to the recurrence group.
packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts	Adds a test asserting the CSS variable is set correctly when switching to recurrence.
packages/devextreme/js/__internal/scheduler/tests/mock/m_mock_scheduler.ts	Enhances getBoundingClientRect mocking to support per-class rect overrides for tests.
packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss	Uses --dx-scheduler-animation-top for top on hidden main/recurrence groups.
apps/react-storybook/stories/scheduler/form-customization.css	Adds styling for a custom notice element used in a new Storybook case.
apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx	Adds a story with a custom item before mainGroup to validate slide behavior visually.

---

You can also share your feedback on Copilot code review. Take the survey.