diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.d.ts b/packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.d.ts index 4da7a8588b..f4275e1fa6 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.d.ts +++ b/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>( - base: T, -): Constructor & T; +export declare function HorizontalLayoutMixin>(base: T): T; diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.js index 6fd4e5447f..f66fc4a948 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-mixin.js +++ b/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,7 +19,6 @@ 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); @@ -29,22 +26,17 @@ export const HorizontalLayoutMixin = (superClass) => 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"]'); @@ -52,25 +44,14 @@ export const HorizontalLayoutMixin = (superClass) => 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'); - } - } - } }; diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index 7d259d5fd7..010d43cd5c 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/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; - } `; diff --git a/packages/horizontal-layout/test/horizontal-layout.common.js b/packages/horizontal-layout/test/horizontal-layout.common.js index 5adc969851..61c14d4b9d 100644 --- a/packages/horizontal-layout/test/horizontal-layout.common.js +++ b/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(` - -
Div 1
-
Div 1
-
Div 1
-
Div 1
-
- `); - 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; - }); - }); }); diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png index c8e3215508..3e2e7e4df3 100644 Binary files a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png and b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png differ diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png index f5bb30c39c..21b088a9f0 100644 Binary files a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png and b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png differ diff --git a/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png b/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png index c8e3215508..3e2e7e4df3 100644 Binary files a/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png and b/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png differ diff --git a/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png b/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png index f5bb30c39c..21b088a9f0 100644 Binary files a/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png and b/packages/horizontal-layout/test/visual/material/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png differ