refactor: remove iron-resizable-behavior from app-layout (#3206)

vaadin · Dec 20, 2021 · c3e4d23 · c3e4d23
1 parent fd6b415
commit c3e4d23
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 95 deletions.
diff --git a/packages/app-layout/package.json b/packages/app-layout/package.json
@@ -32,7 +32,6 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/button": "23.0.0-alpha2",
     "@vaadin/component-base": "23.0.0-alpha2",

diff --git a/packages/app-layout/src/vaadin-app-layout.js b/packages/app-layout/src/vaadin-app-layout.js
@@ -5,8 +5,6 @@
  */
 import './safe-area-inset.js';
 import './detect-ios-navbar.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { afterNextRender, beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -111,9 +109,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ThemableMixin
  * @mixes ControllerMixin
  */
-class AppLayout extends ElementMixin(
-  ThemableMixin(ControllerMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)))
-) {
+class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -513,8 +509,6 @@ class AppLayout extends ElementMixin(
         this.__releaseFocusFromDrawer();
       }
     }
-
-    this.notifyResize();
   }
 
   /**
@@ -583,8 +577,6 @@ class AppLayout extends ElementMixin(
     const drawerRect = drawer.getBoundingClientRect();
 
     this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', drawerRect.width + 'px');
-
-    this.notifyResize();
   }
 
   /** @protected */
@@ -613,10 +605,6 @@ class AppLayout extends ElementMixin(
 
     this._updateDrawerHeight();
     this.__updateDrawerAriaAttributes();
-
-    if (this.overlay !== overlay) {
-      this.notifyResize();
-    }
   }
 
   /**

diff --git a/packages/app-layout/test/app-layout.test.js b/packages/app-layout/test/app-layout.test.js
@@ -3,9 +3,6 @@ import { aTimeout, esc, fixtureSync, nextFrame, nextRender, oneEvent } from '@va
 import sinon from 'sinon';
 import '../vaadin-app-layout.js';
 import '../vaadin-drawer-toggle.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior';
-import { PolymerElement } from '@polymer/polymer';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 
 describe('vaadin-app-layout', () => {
   let layout;
@@ -326,82 +323,4 @@ describe('vaadin-app-layout', () => {
       });
     });
   });
-
-  describe('notify children about resize', () => {
-    class ResizeAwareElement extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
-      static get is() {
-        return 'resize-aware';
-      }
-    }
-
-    customElements.define(ResizeAwareElement.is, ResizeAwareElement);
-
-    let resizeAwareChild;
-
-    beforeEach(async () => {
-      layout = fixtureSync(`
-        <vaadin-app-layout>
-          <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
-          <h2 slot="navbar">App name</h2>
-          <section slot="drawer">
-            <p>Item 1</p>
-            <p>Item 2</p>
-            <p>Item 3</p>
-          </section>
-          <resize-aware></resize-aware>
-        </vaadin-app-layout>
-      `);
-      // force non-overlay mode as default
-      layout.style.setProperty('--vaadin-app-layout-drawer-overlay', 'false');
-      layout._updateOverlayMode();
-      await nextRender();
-      resizeAwareChild = layout.querySelector('resize-aware');
-      sinon.stub(resizeAwareChild, 'notifyResize');
-    });
-
-    afterEach(() => {
-      resizeAwareChild.notifyResize.restore();
-    });
-
-    it('should notify when drawer opens or closes', () => {
-      layout.drawerOpened = false;
-      expect(resizeAwareChild.notifyResize.calledOnce).to.be.true;
-
-      resizeAwareChild.notifyResize.resetHistory();
-      layout.drawerOpened = true;
-      expect(resizeAwareChild.notifyResize.calledOnce).to.be.true;
-    });
-
-    it('should notify when drawer is hidden due to empty content', () => {
-      const section = layout.querySelector('[slot="drawer"]');
-      section.parentNode.removeChild(section);
-      layout._drawerChildObserver.flush();
-
-      expect(resizeAwareChild.notifyResize.calledOnce).to.be.true;
-    });
-
-    it('should notify when content is added to drawer', () => {
-      const newContent = document.createElement('div');
-      newContent.setAttribute('slot', 'drawer');
-      layout.appendChild(newContent);
-      layout._drawerChildObserver.flush();
-
-      expect(resizeAwareChild.notifyResize.calledOnce).to.be.true;
-    });
-
-    it('should notify when switching between regular and overlay mode', () => {
-      // force overlay mode
-      layout.style.setProperty('--vaadin-app-layout-drawer-overlay', 'true');
-      layout._updateOverlayMode();
-
-      expect(resizeAwareChild.notifyResize.calledOnce).to.be.true;
-
-      // remove overlay mode
-      resizeAwareChild.notifyResize.resetHistory();
-      layout.style.setProperty('--vaadin-app-layout-drawer-overlay', 'false');
-      layout._updateOverlayMode();
-
-      expect(resizeAwareChild.notifyResize.calledOnce).to.be.true;
-    });
-  });
 });