refactor: extract dialog size properties into separate mixin (#9735)

Author: web-padawan

packages/confirm-dialog/src/vaadin-confirm-dialog-overlay.js

@@ -10,6 +10,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
+import { DialogSizeMixin } from '@vaadin/dialog/src/vaadin-dialog-size-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -94,7 +95,9 @@ defineCustomElement(ConfirmDialogOverlay);
  * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
  * @private
  */
-class ConfirmDialogDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
+class ConfirmDialogDialog extends DialogSizeMixin(
+  DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-confirm-dialog-dialog';
   }

packages/dialog/src/vaadin-dialog-base-mixin.d.ts

@@ -58,16 +58,4 @@ export declare class DialogBaseMixinClass {
    * overlay from stretching all the way to the left of the viewport).
    */
   left: string;
-
-  /**
-   * Set the width of the overlay.
-   * If a unitless number is provided, pixels are assumed.
-   */
-  width: string | null;
-
-  /**
-   * Set the height of the overlay.
-   * If a unitless number is provided, pixels are assumed.
-   */
-  height: string | null;
 }

packages/dialog/src/vaadin-dialog-base-mixin.js

@@ -75,22 +75,6 @@ export const DialogBaseMixin = (superClass) =>
           type: String,
         },
 
-        /**
-         * Set the width of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        width: {
-          type: String,
-        },
-
-        /**
-         * Set the height of the overlay.
-         * If a unitless number is provided, pixels are assumed.
-         */
-        height: {
-          type: String,
-        },
-
         /**
          * The `role` attribute value to be set on the overlay. Defaults to "dialog".
          *
@@ -104,7 +88,7 @@ export const DialogBaseMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__positionChanged(top, left)', '__sizeChanged(width, height)'];
+      return ['__positionChanged(top, left)'];
     }
 
     /** @protected */

packages/dialog/src/vaadin-dialog-size-mixin.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function DialogSizeMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<DialogSizeMixinClass> & T;
+
+export declare class DialogSizeMixinClass {
+  /**
+   * Set the width of the overlay.
+   * If a unitless number is provided, pixels are assumed.
+   */
+  width: string | null;
+
+  /**
+   * Set the height of the overlay.
+   * If a unitless number is provided, pixels are assumed.
+   */
+  height: string | null;
+}

packages/dialog/src/vaadin-dialog-size-mixin.js

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+export const DialogSizeMixin = (superClass) =>
+  class DialogSizeMixinClass extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Set the width of the overlay.
+         * If a unitless number is provided, pixels are assumed.
+         */
+        width: {
+          type: String,
+        },
+
+        /**
+         * Set the height of the overlay.
+         * If a unitless number is provided, pixels are assumed.
+         */
+        height: {
+          type: String,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__sizeChanged(width, height)'];
+    }
+
+    /** @private */
+    __sizeChanged(width, height) {
+      requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }, false));
+    }
+  };

packages/dialog/src/vaadin-dialog.d.ts

@@ -10,6 +10,7 @@ import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
 import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
+import { DialogSizeMixin } from './vaadin-dialog-size-mixin.js';
 
 export { DialogOverlay, DialogOverlayBounds } from './vaadin-dialog-overlay.js';
 
@@ -124,9 +125,11 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the dialog is closed.
  */
-declare class Dialog extends DialogDraggableMixin(
-  DialogResizableMixin(
-    DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
+declare class Dialog extends DialogSizeMixin(
+  DialogDraggableMixin(
+    DialogResizableMixin(
+      DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(HTMLElement))))),
+    ),
   ),
 ) {
   /**

packages/dialog/src/vaadin-dialog.js

@@ -15,6 +15,7 @@ import { DialogBaseMixin } from './vaadin-dialog-base-mixin.js';
 import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js';
 import { DialogRendererMixin } from './vaadin-dialog-renderer-mixin.js';
 import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
+import { DialogSizeMixin } from './vaadin-dialog-size-mixin.js';
 
 export { DialogOverlay } from './vaadin-dialog-overlay.js';
 
@@ -89,11 +90,16 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * @mixes DialogDraggableMixin
  * @mixes DialogRendererMixin
  * @mixes DialogResizableMixin
+ * @mixes DialogSizeMixin
  * @mixes OverlayClassMixin
  */
-class Dialog extends DialogDraggableMixin(
-  DialogResizableMixin(
-    DialogRendererMixin(DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))))),
+class Dialog extends DialogSizeMixin(
+  DialogDraggableMixin(
+    DialogResizableMixin(
+      DialogRendererMixin(
+        DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement))))),
+      ),
+    ),
   ),
 ) {
   static get is() {