refactor: remove logic for first-in-row attribute

packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.d.ts

@@ -4,8 +4,5 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 
-export declare function HorizontalLayoutMixin<T extends Constructor<HTMLElement>>(
-  base: T,
-): Constructor<ResizeMixinClass> & T;
+export declare function HorizontalLayoutMixin<T extends Constructor<HTMLElement>>(base: T): T;

packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.js

@@ -4,15 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 
 /**
  * @polymerMixin
- * @mixes ResizeMixin
  */
 export const HorizontalLayoutMixin = (superClass) =>
-  class extends ResizeMixin(superClass) {
+  class extends superClass {
     /** @protected */
     ready() {
       super.ready();
@@ -21,56 +19,39 @@ export const HorizontalLayoutMixin = (superClass) =>
       this.__startSlotObserver = new SlotObserver(startSlot, ({ currentNodes, removedNodes }) => {
         if (removedNodes.length) {
           this.__clearAttribute(removedNodes, 'last-start-child');
-          this.__clearAttribute(removedNodes, 'first-in-row');
         }
 
         const children = currentNodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
         this.__updateAttributes(children, 'start', false, true);
 
         const nodes = currentNodes.filter((node) => !isEmptyTextNode(node));
         this.toggleAttribute('has-start', nodes.length > 0);
-
-        this.__updateRowState();
       });
 
       const endSlot = this.shadowRoot.querySelector('[name="end"]');
       this.__endSlotObserver = new SlotObserver(endSlot, ({ currentNodes, removedNodes }) => {
         if (removedNodes.length) {
           this.__clearAttribute(removedNodes, 'first-end-child');
-          this.__clearAttribute(removedNodes, 'first-in-row');
         }
 
         this.__updateAttributes(currentNodes, 'end', true, false);
 
         this.toggleAttribute('has-end', currentNodes.length > 0);
-
-        this.__updateRowState();
       });
 
       const middleSlot = this.shadowRoot.querySelector('[name="middle"]');
       this.__middleSlotObserver = new SlotObserver(middleSlot, ({ currentNodes, removedNodes }) => {
         if (removedNodes.length) {
           this.__clearAttribute(removedNodes, 'first-middle-child');
           this.__clearAttribute(removedNodes, 'last-middle-child');
-          this.__clearAttribute(removedNodes, 'first-in-row');
         }
 
         this.__updateAttributes(currentNodes, 'middle', true, true);
 
         this.toggleAttribute('has-middle', currentNodes.length > 0);
-
-        this.__updateRowState();
       });
     }
 
-    /**
-     * @protected
-     * @override
-     */
-    _onResize() {
-      this.__updateRowState();
-    }
-
     /** @private */
     __clearAttribute(nodes, attr) {
       const el = nodes.find((node) => node.nodeType === Node.ELEMENT_NODE && node.hasAttribute(attr));
@@ -101,17 +82,4 @@ export const HorizontalLayoutMixin = (superClass) =>
         }
       });
     }
-
-    /** @private */
-    __updateRowState() {
-      let offset = 0;
-      for (const child of this.children) {
-        if (child.offsetTop > offset) {
-          offset = child.offsetTop;
-          child.setAttribute('first-in-row', '');
-        } else {
-          child.removeAttribute('first-in-row');
-        }
-      }
-    }
   };

packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js

@@ -43,8 +43,4 @@ export const horizontalLayoutStyles = css`
   :host([has-start]:not([has-middle])) ::slotted([first-end-child]) {
     margin-inline-start: auto;
   }
-
-  ::slotted([slot='end'][first-in-row]) {
-    margin-inline-start: auto;
-  }
 `;

packages/horizontal-layout/test/horizontal-layout.common.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame, nextResize } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { getComputedCSSPropertyValue } from './helpers.js';
 
 describe('vaadin-horizontal-layout', () => {
@@ -284,78 +284,4 @@ describe('vaadin-horizontal-layout', () => {
       });
     });
   });
-
-  describe('wrapping', () => {
-    let layout, items;
-
-    beforeEach(() => {
-      layout = fixtureSync(`
-        <vaadin-horizontal-layout style="flex-wrap: wrap">
-          <div style="width: 50px">Div 1</div>
-          <div style="width: 50px">Div 1</div>
-          <div style="width: 50px">Div 1</div>
-          <div style="width: 50px">Div 1</div>
-        </vaadin-horizontal-layout>
-      `);
-      items = [...layout.children];
-    });
-
-    it('should set first-in-row on first item in row on layout resize', async () => {
-      layout.style.width = '100px';
-      await nextResize(layout);
-      expect(items[2].hasAttribute('first-in-row')).to.be.true;
-    });
-
-    it('should remove first-in-row on first item in row on layout resize', async () => {
-      layout.style.width = '100px';
-      await nextResize(layout);
-
-      layout.style.width = '200px';
-      await nextResize(layout);
-      expect(items[2].hasAttribute('first-in-row')).to.be.false;
-    });
-
-    it('should update first-in-row on remaining elements when an element is removed', async () => {
-      layout.style.width = '100px';
-      await nextResize(layout);
-
-      items[0].remove();
-      await nextFrame();
-      expect(items[2].hasAttribute('first-in-row')).to.be.false;
-      expect(items[3].hasAttribute('first-in-row')).to.be.true;
-    });
-
-    it('should remove first-in-row from the element when removing it from default slot', async () => {
-      layout.style.width = '100px';
-      await nextResize(layout);
-
-      items[2].remove();
-      await nextFrame();
-      expect(items[2].hasAttribute('first-in-row')).to.be.false;
-    });
-
-    it('should remove first-in-row from the element when removing it from middle slot', async () => {
-      items[2].setAttribute('slot', 'middle');
-      items[3].setAttribute('slot', 'middle');
-
-      layout.style.width = '100px';
-      await nextResize(layout);
-
-      items[2].remove();
-      await nextFrame();
-      expect(items[2].hasAttribute('first-in-row')).to.be.false;
-    });
-
-    it('should remove first-in-row from the element when removing it from end slot', async () => {
-      items[2].setAttribute('slot', 'end');
-      items[3].setAttribute('slot', 'end');
-
-      layout.style.width = '100px';
-      await nextResize(layout);
-
-      items[2].remove();
-      await nextFrame();
-      expect(items[2].hasAttribute('first-in-row')).to.be.false;
-    });
-  });
 });