refactor: remove iron-resizable-behavior from board (#3211)

packages/board/package.json

@@ -35,7 +35,6 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "23.0.0-alpha2",
     "@vaadin/vaadin-license-checker": "^2.1.0"

packages/board/src/vaadin-board-row.d.ts

@@ -44,7 +44,9 @@ declare class BoardRow extends ElementMixin(HTMLElement) {
    * Redraws the row, if necessary.
    *
    * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change CSS which affects the row, then you need to call this method.
+   * If you dynamically change breakpoints
+   * `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw(): void;
 }

packages/board/src/vaadin-board-row.js

@@ -3,11 +3,8 @@
  * Copyright (c) 2017 - 2021 Vaadin Ltd
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import { DomIf } from '@polymer/polymer/lib/elements/dom-if.js';
 import { DomRepeat } from '@polymer/polymer/lib/elements/dom-repeat.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 
@@ -54,7 +51,7 @@ const CLASSES = {
  * @extends HTMLElement
  * @mixes ElementMixin
  */
-class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
+class BoardRow extends ElementMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -82,7 +79,6 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
 
   constructor() {
     super();
-    this._onIronResize = this._onIronResize.bind(this);
     this._oldWidth = 0;
     this._oldBreakpoints = { smallSize: 600, mediumSize: 960 };
     this._oldFlexBasis = [];
@@ -91,26 +87,19 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
   /** @protected */
   ready() {
     super.ready();
-    this.addEventListener('iron-resize', this._onIronResize, true);
-    this.$.insertionPoint.addEventListener('slotchange', this.redraw.bind(this));
-    afterNextRender(this, () => {
-      // force this as an interested resizable of parent
-      this.dispatchEvent(
-        new CustomEvent('iron-request-resize-notifications', {
-          node: this,
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {}
-        })
-      );
+
+    this.$.insertionPoint.addEventListener('slotchange', () => this.redraw());
+
+    this.__resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => this._onResize());
     });
+    this.__resizeObserver.observe(this);
   }
 
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    afterNextRender(this, this._onIronResize);
+    this._onResize();
   }
 
   /**
@@ -223,14 +212,16 @@ class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], Poly
    * Redraws the row, if necessary.
    *
    * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change CSS which affects the row, then you need to call this method.
+   * If you dynamically change breakpoints
+   * --vaadin-board-width-small or --vaadin-board-width-medium,
+   * then you need to call this method.
    */
   redraw() {
     this._recalculateFlexBasis(true);
   }
 
   /** @private */
-  _onIronResize() {
+  _onResize() {
     this._recalculateFlexBasis(false);
   }
 

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

@@ -28,8 +28,9 @@ declare class Board extends ElementMixin(HTMLElement) {
   /**
    * Redraws the board and all rows inside it, if necessary.
    *
-   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS
-   * which affects this element, then you need to call this method.
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw(): void;
 }

packages/board/src/vaadin-board.js

@@ -5,10 +5,9 @@
  */
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
 import './vaadin-board-row.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { BoardRow } from './vaadin-board-row.js';
 
 /**
  * `<vaadin-board>` is a web component to create flexible responsive layouts
@@ -32,7 +31,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
  * @extends HTMLElement
  * @mixes ElementMixin
  */
-class Board extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
+class Board extends ElementMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -65,11 +64,12 @@ class Board extends ElementMixin(mixinBehaviors([IronResizableBehavior], Polymer
   /**
    * Redraws the board and all rows inside it, if necessary.
    *
-   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS
-   * which affects this element, then you need to call this method.
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw() {
-    this.notifyResize();
+    [...this.querySelectorAll('*')].filter((node) => node instanceof BoardRow).forEach((row) => row.redraw());
   }
 }
 

packages/board/test/common.js

@@ -0,0 +1,28 @@
+import sinon from 'sinon';
+
+/**
+ * Resolves once the function is invoked on the given object.
+ */
+function onceInvoked(object, functionName) {
+  return new Promise((resolve) => {
+    const stub = sinon.stub(object, functionName).callsFake((...args) => {
+      stub.restore();
+      object[functionName](...args);
+      resolve();
+    });
+  });
+}
+
+/**
+ * Resolves once the ResizeObserver in BoardRow has processed a resize.
+ */
+export async function onceResized(boardRow) {
+  await onceInvoked(boardRow, '_onResize');
+}
+
+/**
+ * Resolves once the ResizeObserver in all the BoardRows has processed a resize.
+ */
+export function allResized(boardRows) {
+  return Promise.all(boardRows.map((boardRow) => onceResized(boardRow)));
+}

packages/board/test/redraw.test.js

@@ -1,12 +1,13 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync } from '@vaadin/testing-helpers';
 import '../vaadin-board.js';
+import { allResized, onceResized } from './common.js';
 
 describe('redraw', () => {
   describe('board', () => {
-    let board;
+    let board, row;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       board = fixtureSync(`
         <vaadin-board style="width: 1200px;">
           <vaadin-board-row id="top">
@@ -17,6 +18,8 @@ describe('redraw', () => {
           </vaadin-board-row>
         </vaadin-board>
       `);
+      row = board.firstElementChild;
+      await onceResized(row);
     });
 
     it('should trigger layout after board style is changed', () => {
@@ -37,7 +40,7 @@ describe('redraw', () => {
   describe('row', () => {
     let row;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       row = fixtureSync(`
         <vaadin-board-row style="width: 1200px;">
           <div>top A</div>
@@ -46,6 +49,7 @@ describe('redraw', () => {
           <div>top D</div>
         </vaadin-board-row>
       `);
+      await onceResized(row);
     });
 
     it('should trigger layout after board row style is changed', () => {
@@ -65,7 +69,7 @@ describe('redraw', () => {
   describe('nested row', () => {
     let board, row;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       board = fixtureSync(`
         <vaadin-board style="width: 1200px;">
           <vaadin-board-row id="top" board-cols="2">
@@ -80,6 +84,8 @@ describe('redraw', () => {
         </vaadin-board>
       `);
       row = board.querySelector('#nested');
+
+      await onceResized(row);
     });
 
     it('should trigger layout for nested rows after board style is changed', () => {
@@ -119,7 +125,7 @@ describe('redraw', () => {
   describe('row class names', () => {
     let container, board, first, second, third;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       container = fixtureSync(`
         <div style="width: 1000px;">
           <vaadin-board>
@@ -148,6 +154,8 @@ describe('redraw', () => {
       first = container.querySelector('#first');
       second = container.querySelector('#second');
       third = container.querySelector('#third');
+
+      await allResized([first, second, third]);
     });
 
     it('should set correct class name to rows by default', () => {
@@ -185,21 +193,21 @@ describe('redraw', () => {
       expect(third.className).to.equal('medium');
     });
 
-    it('should only update class on resize or breakpoint change', () => {
+    it('should only update class on resize or breakpoint change', async () => {
       first.className = '';
-      board.redraw();
+      await aTimeout(100);
       expect(first.className).to.equal('');
 
       container.style.width = '1001px';
-      board.redraw();
+      await onceResized(first);
       expect(first.className).to.equal('large');
     });
   });
 
   describe('nested row class names', () => {
     let container, board, outer, inner;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       container = fixtureSync(`
         <div style="width: 1000px;">
           <vaadin-board>
@@ -218,6 +226,8 @@ describe('redraw', () => {
       board = container.querySelector('vaadin-board');
       outer = container.querySelector('#outer');
       inner = container.querySelector('#inner');
+
+      await allResized([inner, outer]);
     });
 
     it('should update nested rows on redraw after breakpoint change', () => {