refactor: update OverlayMixin properties to use sync: true (#8226)

vaadin · Nov 25, 2024 · 591b644 · 591b644
1 parent be6a81c
commit 591b644
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 300 deletions.
diff --git a/packages/avatar-group/src/vaadin-lit-avatar-group-overlay.js b/packages/avatar-group/src/vaadin-lit-avatar-group-overlay.js
@@ -32,22 +32,6 @@ class AvatarGroupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMix
     return overlayStyles;
   }
 
-  static get properties() {
-    return {
-      /**
-       * When true, the overlay is visible and attached to body.
-       * This property config is overridden to set `sync: true`.
-       */
-      opened: {
-        type: Boolean,
-        notify: true,
-        observer: '_openedChanged',
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   /** @protected */
   render() {
     return html`

diff --git a/packages/combo-box/src/vaadin-lit-combo-box-overlay.js b/packages/combo-box/src/vaadin-lit-combo-box-overlay.js
@@ -45,22 +45,6 @@ export class ComboBoxOverlay extends ComboBoxOverlayMixin(
     return [overlayStyles, comboBoxOverlayStyles, comboBoxOverlayStyles];
   }
 
-  static get properties() {
-    return {
-      /**
-       * When true, the overlay is visible and attached to body.
-       * This property config is overridden to set `sync: true`.
-       */
-      opened: {
-        type: Boolean,
-        notify: true,
-        observer: '_openedChanged',
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   /** @protected */
   render() {
     return html`

diff --git a/packages/context-menu/src/vaadin-lit-context-menu-overlay.js b/packages/context-menu/src/vaadin-lit-context-menu-overlay.js
@@ -31,22 +31,6 @@ export class ContextMenuOverlay extends MenuOverlayMixin(
     return 'vaadin-context-menu-overlay';
   }
 
-  static get properties() {
-    return {
-      /**
-       * When true, the overlay is visible and attached to body.
-       * This property config is overridden to set `sync: true`.
-       */
-      opened: {
-        type: Boolean,
-        notify: true,
-        observer: '_openedChanged',
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   static get styles() {
     return [overlayStyles, styles];
   }

diff --git a/packages/date-picker/src/vaadin-lit-date-picker-overlay.js b/packages/date-picker/src/vaadin-lit-date-picker-overlay.js
@@ -30,22 +30,6 @@ class DatePickerOverlay extends DatePickerOverlayMixin(DirMixin(ThemableMixin(Po
     return [overlayStyles, datePickerOverlayStyles];
   }
 
-  static get properties() {
-    return {
-      /**
-       * When true, the overlay is visible and attached to body.
-       * This property config is overridden to set `sync: true`.
-       */
-      opened: {
-        type: Boolean,
-        notify: true,
-        observer: '_openedChanged',
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   /** @protected */
   render() {
     return html`

diff --git a/packages/menu-bar/src/vaadin-lit-menu-bar-overlay.js b/packages/menu-bar/src/vaadin-lit-menu-bar-overlay.js
@@ -29,22 +29,6 @@ export class MenuBarOverlay extends MenuOverlayMixin(OverlayMixin(DirMixin(Thema
     return 'vaadin-menu-bar-overlay';
   }
 
-  static get properties() {
-    return {
-      /**
-       * When true, the overlay is visible and attached to body.
-       * This property config is overridden to set `sync: true`.
-       */
-      opened: {
-        type: Boolean,
-        notify: true,
-        observer: '_openedChanged',
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   static get styles() {
     return [overlayStyles, styles];
   }

diff --git a/packages/overlay/src/vaadin-overlay-mixin.js b/packages/overlay/src/vaadin-overlay-mixin.js
@@ -25,6 +25,7 @@ export const OverlayMixin = (superClass) =>
           notify: true,
           observer: '_openedChanged',
           reflectToAttribute: true,
+          sync: true,
         },
 
         /**
@@ -33,13 +34,15 @@ export const OverlayMixin = (superClass) =>
          */
         owner: {
           type: Object,
+          sync: true,
         },
 
         /**
          * Object with properties that is passed to `renderer` function
          */
         model: {
           type: Object,
+          sync: true,
         },
 
         /**
@@ -53,6 +56,7 @@ export const OverlayMixin = (superClass) =>
          */
         renderer: {
           type: Object,
+          sync: true,
         },
 
         /**
@@ -65,6 +69,7 @@ export const OverlayMixin = (superClass) =>
           value: false,
           reflectToAttribute: true,
           observer: '_modelessChanged',
+          sync: true,
         },
 
         /**
@@ -76,6 +81,7 @@ export const OverlayMixin = (superClass) =>
           type: Boolean,
           reflectToAttribute: true,
           observer: '_hiddenChanged',
+          sync: true,
         },
 
         /**
@@ -86,6 +92,7 @@ export const OverlayMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          sync: true,
         },
       };
     }

diff --git a/packages/overlay/test/animations.common.js b/packages/overlay/test/animations.common.js
@@ -121,81 +121,64 @@ function afterOverlayClosingFinished(overlay, callback) {
       await nextRender();
     });
 
-    afterEach(async () => {
+    afterEach(() => {
       overlay.opened = false;
-      await nextRender();
     });
 
-    it('should flush closing overlay when re-opened while closing animation is in progress', async () => {
+    it('should flush closing overlay when re-opened while closing animation is in progress', () => {
       overlay.opened = true;
-      await nextRender();
       overlay._flushAnimation('opening');
 
       overlay.opened = false;
-      await nextRender();
 
       overlay.opened = true;
-      await nextRender();
 
       expect(overlay.hasAttribute('closing')).to.be.false;
     });
 
-    it('should flush opening overlay when closed while opening animation is in progress', async () => {
+    it('should flush opening overlay when closed while opening animation is in progress', () => {
       overlay.opened = true;
-      await nextRender();
 
       overlay.opened = false;
-      await nextRender();
 
       expect(overlay.hasAttribute('opening')).to.be.false;
     });
 
-    it('should detach the overlay even if it is scheduled for reopening', async () => {
+    it('should detach the overlay even if it is scheduled for reopening', () => {
       overlay.opened = true;
-      await nextRender();
 
       overlay.opened = false;
-      await nextRender();
 
       overlay.opened = true;
-      await nextRender();
 
       overlay.opened = false;
-      await nextRender();
       overlay._flushAnimation('closing');
 
       expect(overlay.parentNode).not.to.equal(document.body);
     });
 
-    it('should not animate closing if the overlay is explicitly hidden', async () => {
+    it('should not animate closing if the overlay is explicitly hidden', () => {
       overlay.opened = true;
-      await nextRender();
 
       overlay.hidden = true;
-      await nextRender();
 
       overlay.opened = false;
-      await nextRender();
 
       expect(overlay.parentNode).not.to.equal(document.body);
     });
 
-    it('should close the overlay if hidden is set while closing', async () => {
+    it('should close the overlay if hidden is set while closing', () => {
       overlay.opened = true;
-      await nextRender();
 
       overlay.opened = false;
-      await nextRender();
 
       overlay.hidden = true;
-      await nextRender();
 
       expect(overlay.parentNode).not.to.equal(document.body);
     });
 
-    it('should close the overlay when ESC pressed while opening', async () => {
+    it('should close the overlay when ESC pressed while opening', () => {
       overlay.opened = true;
-      await nextRender();
       escKeyDown(document.body);
       expect(overlay.opened).to.equal(false);
     });
@@ -214,11 +197,10 @@ function afterOverlayClosingFinished(overlay, callback) {
       overlays[0].opened = true;
     });
 
-    afterEach(async () => {
+    afterEach(() => {
       overlays.forEach((overlay) => {
         overlay.opened = false;
       });
-      await nextRender();
     });
 
     it('should remove pointer events on previously opened overlay', (done) => {
@@ -242,11 +224,10 @@ function afterOverlayClosingFinished(overlay, callback) {
       }
     });
 
-    afterEach(async () => {
+    afterEach(() => {
       overlays.forEach((overlay) => {
         overlay.opened = false;
       });
-      await nextRender();
     });
 
     it('should not remove pointer events on last opened overlay', (done) => {
@@ -275,11 +256,10 @@ function afterOverlayClosingFinished(overlay, callback) {
       }
     });
 
-    afterEach(async () => {
+    afterEach(() => {
       overlays.forEach((overlay) => {
         overlay.opened = false;
       });
-      await nextRender();
     });
 
     it('should restore pointer events on the remaining overlay', (done) => {
@@ -330,11 +310,10 @@ function afterOverlayClosingFinished(overlay, callback) {
       }
     });
 
-    afterEach(async () => {
+    afterEach(() => {
       overlays.forEach((overlay) => {
         overlay.opened = false;
       });
-      await nextRender();
     });
 
     it('should not remove pointer events on last opened overlay', (done) => {