Appointment Form Redesign: Common Layout changes after designer review

packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss

@@ -480,7 +480,7 @@ $scheduler-appointment-form-label-padding: 20px;
         position: relative;
 
         &.dx-scheduler-form-main-group-hidden {
-          transform: translateX(-100%);
+          transform: translateX(-110%);
           position: absolute;
           top: 0;
         }
@@ -493,7 +493,7 @@ $scheduler-appointment-form-label-padding: 20px;
         position: relative;
 
         &.dx-scheduler-form-recurrence-group-hidden {
-          transform: translateX(100%);
+          transform: translateX(110%);
           position: absolute;
           top: 0;
         }
@@ -629,7 +629,6 @@ $scheduler-appointment-form-label-padding: 20px;
       .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
         overflow: visible;
         position: relative;
-        height: auto;
 
         .dx-icon {
           color: $scheduler-workspace-accent-color;
@@ -649,14 +648,11 @@ $scheduler-appointment-form-label-padding: 20px;
       /* Recurrence Day Buttons */
       .dx-scheduler-days-of-week-buttons {
         display: flex;
+        align-items: center;
         gap: 8px;
 
         .dx-button {
           border-radius: 50%;
-          width: $scheduler-days-of-week-button-size;
-          height: $scheduler-days-of-week-button-size;
-          min-width: $scheduler-days-of-week-button-size;
-          min-height: $scheduler-days-of-week-button-size;
 
           .dx-button-content {
             padding: 0;

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -5,6 +5,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../form/sizes" as *;
+@use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icons" as *;
@@ -644,8 +645,17 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
       padding-inline-end: 8px !important; // stylelint-disable-line declaration-no-important
     }
 
+    .dx-scheduler-form-recurrence-end-editors {
+      margin-top: $fluent-form-layout-manager-vertical-padding;
+    }
+
     .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
       height: $fluent-scheduler-appointment-popup-all-day-item-height - $fluent-form-layout-manager-vertical-padding;
+      margin-bottom: $fluent-form-layout-manager-vertical-padding;
+    }
+
+    .dx-scheduler-days-of-week-buttons {
+      height: $fluent-toolbar-height;
     }
 
     .dx-field-item:not(.dx-first-col) {
@@ -665,6 +675,10 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
         }
       }
     }
+
+    .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
+      height: auto;
+    }
   }
 }
 
@@ -967,3 +981,9 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   margin-top: 0;
 }
 
+@media (max-width: 450px) {
+  .dx-scheduler-appointment-popup .dx-form .dx-scheduler-days-of-week-buttons {
+    gap: 6px;
+  }
+}
+

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icons" as *;
@@ -281,12 +282,64 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
     }
 
     .dx-scheduler-form-description-group .dx-scheduler-form-icon,
-    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon {
+    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
+    .dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
       margin-top: $generic-scheduler-appointment-popup-description-icon-margin-top;
     }
 
+    .dx-scheduler-days-of-week-buttons {
+      height: $generic-toolbar-height;
+
+      .dx-button {
+        width: $generic-scheduler-days-of-week-button-size;
+        height: $generic-scheduler-days-of-week-button-size;
+        min-width: $generic-scheduler-days-of-week-button-size;
+        min-height: $generic-scheduler-days-of-week-button-size;
+      }
+    }
+
     .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
       height: $generic-scheduler-appointment-popup-all-day-item-height;
+      margin-bottom: $generic-scheduler-appointment-popup-item-padding-top;
+    }
+
+    .dx-scheduler-form-recurrence-end-editors {
+      .dx-texteditor.dx-editor-filled,
+      .dx-texteditor.dx-editor-outlined {
+        .dx-lookup-field,
+        .dx-placeholder::before,
+        .dx-texteditor-input {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+      }
+
+      // RadioGroup and Inputs columns - use generic inline widget height
+      .dx-item.dx-radiobutton {
+        height: $generic-base-inline-widget-height !important; // stylelint-disable-line declaration-no-important
+      }
+
+      .dx-box-item {
+        height: $generic-base-inline-widget-height;
+
+        .dx-box-item-content {
+          height: $generic-base-inline-widget-height;
+        }
+      }
+
+      .dx-field-item,
+      .dx-empty-item {
+        height: $generic-base-inline-widget-height;
+
+        .dx-field-item-content {
+          height: $generic-base-inline-widget-height;
+        }
+      }
+
+      .dx-texteditor,
+      .dx-numberbox {
+        height: $generic-base-inline-widget-height;
+      }
     }
 
     .dx-field-item:not(.dx-first-col) {
@@ -545,3 +598,9 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
     background: $base-bg;
   }
 }
+
+@media (max-width: 450px) {
+  .dx-scheduler-appointment-popup .dx-form .dx-scheduler-days-of-week-buttons {
+    gap: 6px;
+  }
+}

packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss

@@ -1,5 +1,6 @@
 @use "../sizes" as *;
 @use "../button/colors" as *;
+@use "../toolbar/sizes" as *;
 
 // adduse
 

packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../toolbar/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icons" as *;
@@ -585,18 +586,69 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     .dx-scheduler-form-description-group .dx-scheduler-form-icon,
-    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon {
+    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
+    .dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
       margin-top: $material-scheduler-appointment-popup-description-icon-margin-top;
     }
 
+    .dx-scheduler-days-of-week-buttons {
+      height: $material-toolbar-height;
+    }
+
     .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
       padding-left: 0;
+      margin-bottom: 6px;
+
+      .dx-field-item-label-text {
+        color: $base-text-color;
+      }
 
       @if $size == "compact" {
         height: $material-scheduler-appointment-popup-icon-container-height;
       }
     }
 
+    .dx-scheduler-form-recurrence-end-editors {
+      margin-top: 6px;
+
+      .dx-texteditor.dx-editor-filled,
+      .dx-texteditor.dx-editor-outlined {
+        .dx-lookup-field,
+        .dx-placeholder::before,
+        .dx-texteditor-input {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+      }
+
+      // RadioGroup and Inputs columns - use material inline widget height
+      .dx-item.dx-radiobutton {
+        height: $material-base-inline-widget-height !important; // stylelint-disable-line declaration-no-important
+      }
+
+      .dx-box-item {
+        height: $material-base-inline-widget-height;
+
+        .dx-box-item-content {
+          height: $material-base-inline-widget-height;
+        }
+      }
+
+      .dx-field-item,
+      .dx-empty-item {
+        height: $material-base-inline-widget-height;
+
+        .dx-field-item-content {
+          height: $material-base-inline-widget-height;
+        }
+      }
+
+      .dx-texteditor,
+      .dx-numberbox {
+        height: $material-base-inline-widget-height;
+      }
+    }
+
     .dx-field-item:not(.dx-first-col) {
       padding-inline-start: $material-scheduler-appointment-popup-item-padding-horizontal;
     }
@@ -899,3 +951,9 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-header-panel-empty-cell {
   margin-top: 0;
 }
+
+@media (max-width: 450px) {
+  .dx-scheduler-appointment-popup .dx-form .dx-scheduler-days-of-week-buttons {
+    gap: 6px;
+  }
+}

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

@@ -920,7 +920,7 @@ export class AppointmentForm {
             this.showRecurrenceGroup();
           },
           elementAttr: {
-            class: CLASSES.recurrenceSettingsButton,
+            class: `${CLASSES.recurrenceSettingsButton} dx-shape-standard`,
           },
         },
       });

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

@@ -322,6 +322,7 @@ export class RecurrenceForm {
     return {
       name: GROUP_NAMES.daysOfWeek,
       colSpan: 1,
+      cssClass: 'dx-field-item-has-group',
       label: {
         visible: false,
       },
@@ -333,6 +334,9 @@ export class RecurrenceForm {
 
           this._weekDayButtons[item.key] = this.scheduler.createComponent(buttonContainer, Button, {
             text: item.text,
+            onContentReady: (e): void => {
+              $(e.element).removeClass('dx-button-has-text');
+            },
             onClick: (): void => {
               const isSelected = this.recurrenceRule.byDay.includes(item.key);