From 87e0a0c067f3a40244c8092bd360f8b4d124a02d Mon Sep 17 00:00:00 2001 From: Demirci Date: Wed, 13 Nov 2024 18:51:36 +0300 Subject: [PATCH 1/9] fix(core/drawer|inputgroup): fixed drawer display issue --- .../core/src/components/drawer/drawer.scss | 6 +- .../core/src/components/drawer/drawer.tsx | 48 ++++++--------- .../components/input-group/input-group.tsx | 61 +++++++++---------- 3 files changed, 52 insertions(+), 63 deletions(-) diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss index 84cae23a5b..e66776188f 100644 --- a/packages/core/src/components/drawer/drawer.scss +++ b/packages/core/src/components/drawer/drawer.scss @@ -20,17 +20,19 @@ visibility: hidden; display: flex; - position: absolute; + position: fixed; flex-flow: column nowrap; justify-content: flex-start; align-items: center; + transform: translateX(16rem); + opacity: 0; max-height: 100vh; min-height: $large-space; background-color: var(--theme-color-1); border-radius: $default-border-radius; - transition: all var(--theme-medium-time) ease-out; + transition: transform var(--theme-medium-time) ease-out; .toggle { z-index: 100; diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index df960d0494..946c02606b 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -70,7 +70,8 @@ export class Drawer { private divElement?: HTMLElement; @Watch('show') - onShowChanged(newValue: boolean) { + onShowChanged(newValue: boolean, oldValue?: boolean) { + if (newValue === !!oldValue) return; this.show = newValue !== undefined ? newValue : !this.show; this.toggleDrawer(this.show); } @@ -120,34 +121,24 @@ export class Drawer { } } - private slideOutRight(el?: HTMLElement) { - if (el) { - anime({ - targets: el, - duration: Drawer.duration, - translateX: [0, '16rem'], - opacity: [1, 0], - easing: 'easeInSine', - complete: () => { - el.classList.add('d-none'); - }, - }); - } + private slideOutRight(el: HTMLElement) { + anime({ + targets: el, + duration: Drawer.duration, + translateX: [0, '16rem'], + opacity: [1, 0], + easing: 'easeInSine', + }); } - private slideInRight(el?: HTMLElement) { - if (el) { - anime({ - targets: el, - duration: Drawer.duration, - translateX: ['16rem', 0], - opacity: [0, 1], - easing: 'easeOutSine', - begin: () => { - el.classList.remove('d-none'); - }, - }); - } + private slideInRight(el: HTMLElement) { + anime({ + targets: el, + duration: Drawer.duration, + translateX: ['16rem', 0], + opacity: [0, 1], + easing: 'easeOutSine', + }); } componentDidLoad() { @@ -160,7 +151,8 @@ export class Drawer { class={{ 'drawer-container': true, toggle: this.show, - 'd-none': true, + 'full-height': this.fullHeight, + }} style={{ width: this.width === 'auto' ? this.width : `${this.width}rem`, diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx index 57cb199304..2b2d312365 100644 --- a/packages/core/src/components/input-group/input-group.tsx +++ b/packages/core/src/components/input-group/input-group.tsx @@ -23,6 +23,9 @@ export class InputGroup { @State() inputPaddingLeft = 0; @State() inputPaddingRight = 0; + startSlotRef: HTMLElement; + endSlotRef: HTMLElement; + private get inputElement() { return this.hostElement.querySelector('input') as HTMLInputElement; } @@ -61,6 +64,7 @@ export class InputGroup { }); } + componentDidRender() { this.prepareInputElement(); } @@ -100,50 +104,41 @@ export class InputGroup { } private startSlotChanged() { - const slot = this.hostElement.shadowRoot.querySelector( - 'slot[name="input-start"]' - ); + const startPadding = this.getChildrenWidth(this.startSlotRef); - setTimeout(() => { - const startPadding = this.getChildrenWidth(slot); + if (startPadding !== 0) { + this.inputPaddingLeft = 11 + startPadding; + } else { + this.inputPaddingLeft = 0; + } - if (startPadding !== 0) { - this.inputPaddingLeft = 11 + startPadding; - } else { - this.inputPaddingLeft = 0; - } + if (!this.inputElement) { + return; + } - if (!this.inputElement) { - return; - } + const isInputInvalid = + !this.inputElement.validity.valid || + this.inputElement.classList.contains('is-invalid'); - const isInputInvalid = - !this.inputElement.validity.valid || - this.inputElement.classList.contains('is-invalid'); + const formWasValidated = + this.inputElement.form?.classList.contains('was-validated') || + this.inputElement.form?.noValidate === false; - const formWasValidated = - this.inputElement.form?.classList.contains('was-validated') || - this.inputElement.form?.noValidate === false; + if (formWasValidated && isInputInvalid) { + const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7; + this.inputElement.style.backgroundPosition = `left ${left}px center`; + this.inputPaddingLeft += 26; + } - if (formWasValidated && isInputInvalid) { - const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7; - this.inputElement.style.backgroundPosition = `left ${left}px center`; - this.inputPaddingLeft += 26; - } - }); } private endSlotChanged() { - const slot = this.hostElement.shadowRoot.querySelector( - 'slot[name="input-end"]' - ); + this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef); - setTimeout(() => { - this.inputPaddingRight = 15 + this.getChildrenWidth(slot); - }); } private getChildrenWidth(slotElement: Element) { + if (!slotElement) { return 0; } @@ -166,11 +161,11 @@ export class InputGroup { return (
- + this.startSlotRef = el} name="input-start">
- + this.endSlotRef = el} name="input-end">
); From 9df7db1a050f51e703b9607c0b99d5a9161623e2 Mon Sep 17 00:00:00 2001 From: matthias Date: Wed, 18 Dec 2024 10:37:04 +0100 Subject: [PATCH 2/9] fix: toggle behavior, add vrt, deprecate input-group chore: changeset --- .changeset/proud-waves-care.md | 5 ++ .../core/src/components/drawer/drawer.tsx | 45 ++++++++------ .../components/input-group/input-group.tsx | 26 ++++---- packages/core/src/tests/drawer/drawer.e2e.ts | 7 +++ ...-1-chromium---theme-classic-dark-linux.png | Bin 0 -> 8458 bytes ...1-chromium---theme-classic-light-linux.png | Bin 0 -> 8497 bytes .../src/tests/drawer/input-group/index.html | 37 ++++++++++++ .../src/stories/drawer.stories.ts | 56 ++++++++++++++++++ 8 files changed, 147 insertions(+), 29 deletions(-) create mode 100644 .changeset/proud-waves-care.md create mode 100644 packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-dark-linux.png create mode 100644 packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-light-linux.png create mode 100644 packages/core/src/tests/drawer/input-group/index.html create mode 100644 packages/storybook-docs/src/stories/drawer.stories.ts diff --git a/.changeset/proud-waves-care.md b/.changeset/proud-waves-care.md new file mode 100644 index 0000000000..fa3f4e38bd --- /dev/null +++ b/.changeset/proud-waves-care.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +fix(core/input-group): update slot references diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index 946c02606b..aeba8f653f 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -121,24 +121,34 @@ export class Drawer { } } - private slideOutRight(el: HTMLElement) { - anime({ - targets: el, - duration: Drawer.duration, - translateX: [0, '16rem'], - opacity: [1, 0], - easing: 'easeInSine', - }); + private slideOutRight(el?: HTMLElement) { + if (el) { + anime({ + targets: el, + duration: Drawer.duration, + translateX: [0, '16rem'], + opacity: [1, 0], + easing: 'easeInSine', + complete: () => { + el.classList.remove('toggle'); + }, + }); + } } - private slideInRight(el: HTMLElement) { - anime({ - targets: el, - duration: Drawer.duration, - translateX: ['16rem', 0], - opacity: [0, 1], - easing: 'easeOutSine', - }); + private slideInRight(el?: HTMLElement) { + if (el) { + anime({ + targets: el, + duration: Drawer.duration, + translateX: ['16rem', 0], + opacity: [0, 1], + easing: 'easeOutSine', + begin: () => { + el.classList.add('toggle'); + }, + }); + } } componentDidLoad() { @@ -150,9 +160,6 @@ export class Drawer {
- this.startSlotRef = el} name="input-start"> + (this.startSlotRef = el as HTMLElement)} + name="input-start" + >
- this.endSlotRef = el} name="input-end"> + (this.endSlotRef = el as HTMLElement)} + name="input-end" + >
); diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts b/packages/core/src/tests/drawer/drawer.e2e.ts index 18e04ae15a..e6823af19e 100644 --- a/packages/core/src/tests/drawer/drawer.e2e.ts +++ b/packages/core/src/tests/drawer/drawer.e2e.ts @@ -24,4 +24,11 @@ regressionTest.describe('drawer', () => { await page.waitForTimeout(2000); expect(await page.screenshot()).toMatchSnapshot(); }); + + regressionTest('input-group', async ({ page }) => { + await page.goto('drawer/input-group'); + await page.locator('ix-button').click(); + await page.waitForTimeout(2000); + expect(await page.screenshot()).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c0bb8eea409fd23c01e03800ad2ff6d7983e3ac6 GIT binary patch literal 8458 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 J#n=;f;h*oaBi;Z2 literal 0 HcmV?d00001 diff --git a/packages/core/src/tests/drawer/input-group/index.html b/packages/core/src/tests/drawer/input-group/index.html new file mode 100644 index 0000000000..a19829ed02 --- /dev/null +++ b/packages/core/src/tests/drawer/input-group/index.html @@ -0,0 +1,37 @@ + + + + + + + + Stencil Component Starter + + + + + + + + + + Click + + + + diff --git a/packages/storybook-docs/src/stories/drawer.stories.ts b/packages/storybook-docs/src/stories/drawer.stories.ts new file mode 100644 index 0000000000..c38b25b86c --- /dev/null +++ b/packages/storybook-docs/src/stories/drawer.stories.ts @@ -0,0 +1,56 @@ +/* + * SPDX-FileCopyrightText: 2024 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import type { Components } from '@siemens/ix/components'; +import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; +import { makeArgTypes } from './utils/generic-render'; + +type Element = Components.IxDrawer; + +const meta = { + title: 'Example/Drawer', + tags: [], + render: (args) => { + return html` +
+ + + + dasda + +
+ `; + }, + argTypes: makeArgTypes>>('ix-drawer'), + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=8033-151366&m=dev', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + closeOnClickOutside: true, + }, +}; From df3573778048ab2763556199b2cc20d9ee89b084 Mon Sep 17 00:00:00 2001 From: matthias Date: Wed, 18 Dec 2024 12:07:57 +0100 Subject: [PATCH 3/9] fix: test push --- packages/core/src/components/drawer/drawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index aeba8f653f..7d9467fee0 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -145,7 +145,7 @@ export class Drawer { opacity: [0, 1], easing: 'easeOutSine', begin: () => { - el.classList.add('toggle'); + el.classList.add('test'); }, }); } From 8ff107e010e30dc0cf2b8749ed0f6145a7c8d517 Mon Sep 17 00:00:00 2001 From: matthias Date: Wed, 18 Dec 2024 12:17:41 +0100 Subject: [PATCH 4/9] Revert "fix: test push" This reverts commit df3573778048ab2763556199b2cc20d9ee89b084. --- packages/core/src/components/drawer/drawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index 7d9467fee0..aeba8f653f 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -145,7 +145,7 @@ export class Drawer { opacity: [0, 1], easing: 'easeOutSine', begin: () => { - el.classList.add('test'); + el.classList.add('toggle'); }, }); } From 6b68edc951c7cff284e79d2a66ab00d1fe061566 Mon Sep 17 00:00:00 2001 From: matthias Date: Wed, 18 Dec 2024 13:30:50 +0100 Subject: [PATCH 5/9] fix: component doc --- packages/core/component-doc.json | 8 +++++++- packages/core/src/components.d.ts | 16 ++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index c6027e323d..2043a0be0c 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -10213,11 +10213,17 @@ "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "deprecated", + "text": "since 2.6.1. Will be removed with 3.0.0.\nUse the 'ix-input' component instead" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, + "deprecation": "since 2.6.1. Will be removed with 3.0.0.\nUse the 'ix-input' component instead", "props": [], "methods": [], "events": [], diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 1c4895fe85..53f415c391 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1610,6 +1610,10 @@ export namespace Components { */ "warningText"?: string; } + /** + * @deprecated since 2.6.1. Will be removed with 3.0.0. + * Use the 'ix-input' component instead + */ interface IxInputGroup { } /** @@ -4131,6 +4135,10 @@ declare global { prototype: HTMLIxInputElement; new (): HTMLIxInputElement; }; + /** + * @deprecated since 2.6.1. Will be removed with 3.0.0. + * Use the 'ix-input' component instead + */ interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement { } var HTMLIxInputGroupElement: { @@ -6744,6 +6752,10 @@ declare namespace LocalJSX { */ "warningText"?: string; } + /** + * @deprecated since 2.6.1. Will be removed with 3.0.0. + * Use the 'ix-input' component instead + */ interface IxInputGroup { } /** @@ -8693,6 +8705,10 @@ declare module "@stencil/core" { * @form-ready 2.6.0 */ "ix-input": LocalJSX.IxInput & JSXBase.HTMLAttributes; + /** + * @deprecated since 2.6.1. Will be removed with 3.0.0. + * Use the 'ix-input' component instead + */ "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes; /** * @since 1.6.0 From 26dcf1574654bbec8f5e136aec64ba002db261e1 Mon Sep 17 00:00:00 2001 From: matthias Date: Wed, 18 Dec 2024 14:17:49 +0100 Subject: [PATCH 6/9] fix: revert changes, remove bootstrap dep --- packages/core/src/components/drawer/drawer.scss | 5 ++++- packages/core/src/components/drawer/drawer.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss index e66776188f..5889b9845f 100644 --- a/packages/core/src/components/drawer/drawer.scss +++ b/packages/core/src/components/drawer/drawer.scss @@ -57,7 +57,6 @@ .content { position: relative; flex: 1; - flex-grow: 1; order: 2; height: 100%; width: 100%; @@ -68,3 +67,7 @@ :host(.toggle) { visibility: visible; } + +:host(.display-none) { + display: none; +} diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index aeba8f653f..c23143b603 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -130,7 +130,7 @@ export class Drawer { opacity: [1, 0], easing: 'easeInSine', complete: () => { - el.classList.remove('toggle'); + el.classList.add('display-none'); }, }); } @@ -145,7 +145,7 @@ export class Drawer { opacity: [0, 1], easing: 'easeOutSine', begin: () => { - el.classList.add('toggle'); + el.classList.remove('display-none'); }, }); } @@ -160,6 +160,8 @@ export class Drawer { Date: Thu, 19 Dec 2024 10:21:16 +0100 Subject: [PATCH 7/9] fix: storybook, behavior --- .../core/src/components/drawer/drawer.scss | 3 +- .../core/src/components/drawer/drawer.tsx | 3 +- .../src/stories/drawer.stories.ts | 38 +++++++++---------- 3 files changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss index 5889b9845f..b1a074cc2e 100644 --- a/packages/core/src/components/drawer/drawer.scss +++ b/packages/core/src/components/drawer/drawer.scss @@ -24,7 +24,6 @@ flex-flow: column nowrap; justify-content: flex-start; align-items: center; - transform: translateX(16rem); opacity: 0; max-height: 100vh; @@ -32,7 +31,7 @@ background-color: var(--theme-color-1); border-radius: $default-border-radius; - transition: transform var(--theme-medium-time) ease-out; + transition: all var(--theme-medium-time) ease-out; .toggle { z-index: 100; diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index c23143b603..666141be1c 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -70,8 +70,7 @@ export class Drawer { private divElement?: HTMLElement; @Watch('show') - onShowChanged(newValue: boolean, oldValue?: boolean) { - if (newValue === !!oldValue) return; + onShowChanged(newValue: boolean) { this.show = newValue !== undefined ? newValue : !this.show; this.toggleDrawer(this.show); } diff --git a/packages/storybook-docs/src/stories/drawer.stories.ts b/packages/storybook-docs/src/stories/drawer.stories.ts index c38b25b86c..256d2c700e 100644 --- a/packages/storybook-docs/src/stories/drawer.stories.ts +++ b/packages/storybook-docs/src/stories/drawer.stories.ts @@ -17,25 +17,24 @@ const meta = { title: 'Example/Drawer', tags: [], render: (args) => { - return html` -
- - - - dasda - -
- `; + const toggleDrawer = () => { + args.show = !args.show; + const drawer = document.querySelector('ix-drawer'); + if (drawer) { + drawer.toggleDrawer(args.show); + } + }; + + return html` + (args.show = false)} + > + Some content of drawer + + Toggle drawer + `; }, argTypes: makeArgTypes>>('ix-drawer'), parameters: { @@ -52,5 +51,6 @@ type Story = StoryObj; export const Default: Story = { args: { closeOnClickOutside: true, + show: false, }, }; From 1203e1889ba4752ed7794e6cb272d094401c5388 Mon Sep 17 00:00:00 2001 From: matthias Date: Thu, 19 Dec 2024 10:35:05 +0100 Subject: [PATCH 8/9] fix: review comments --- .changeset/proud-waves-care.md | 2 +- .../core/src/components/drawer/drawer.scss | 2 +- .../core/src/components/drawer/drawer.tsx | 46 ++++++++++--------- packages/core/src/tests/drawer/drawer.e2e.ts | 5 +- 4 files changed, 30 insertions(+), 25 deletions(-) diff --git a/.changeset/proud-waves-care.md b/.changeset/proud-waves-care.md index fa3f4e38bd..bc90144afd 100644 --- a/.changeset/proud-waves-care.md +++ b/.changeset/proud-waves-care.md @@ -2,4 +2,4 @@ '@siemens/ix': patch --- -fix(core/input-group): update slot references +Update slot references for **ix-input-group**. diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss index b1a074cc2e..1ccfcce9ba 100644 --- a/packages/core/src/components/drawer/drawer.scss +++ b/packages/core/src/components/drawer/drawer.scss @@ -20,7 +20,7 @@ visibility: hidden; display: flex; - position: fixed; + position: absolute; flex-flow: column nowrap; justify-content: flex-start; align-items: center; diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx index 666141be1c..69b6c675bf 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -121,33 +121,35 @@ export class Drawer { } private slideOutRight(el?: HTMLElement) { - if (el) { - anime({ - targets: el, - duration: Drawer.duration, - translateX: [0, '16rem'], - opacity: [1, 0], - easing: 'easeInSine', - complete: () => { - el.classList.add('display-none'); - }, - }); + if (!el) { + return; } + anime({ + targets: el, + duration: Drawer.duration, + translateX: [0, '16rem'], + opacity: [1, 0], + easing: 'easeInSine', + complete: () => { + el.classList.add('display-none'); + }, + }); } private slideInRight(el?: HTMLElement) { - if (el) { - anime({ - targets: el, - duration: Drawer.duration, - translateX: ['16rem', 0], - opacity: [0, 1], - easing: 'easeOutSine', - begin: () => { - el.classList.remove('display-none'); - }, - }); + if (!el) { + return; } + anime({ + targets: el, + duration: Drawer.duration, + translateX: ['16rem', 0], + opacity: [0, 1], + easing: 'easeOutSine', + begin: () => { + el.classList.remove('display-none'); + }, + }); } componentDidLoad() { diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts b/packages/core/src/tests/drawer/drawer.e2e.ts index e6823af19e..8683ca1bb8 100644 --- a/packages/core/src/tests/drawer/drawer.e2e.ts +++ b/packages/core/src/tests/drawer/drawer.e2e.ts @@ -28,7 +28,10 @@ regressionTest.describe('drawer', () => { regressionTest('input-group', async ({ page }) => { await page.goto('drawer/input-group'); await page.locator('ix-button').click(); - await page.waitForTimeout(2000); + await page.waitForFunction(() => { + const drawer = document.querySelector('ix-drawer'); + return drawer && window.getComputedStyle(drawer).opacity === '1'; + }); expect(await page.screenshot()).toMatchSnapshot(); }); }); From 43b14f262dbdbbb9e99a5a0d40d65b5cc11b5e40 Mon Sep 17 00:00:00 2001 From: matthias Date: Thu, 19 Dec 2024 12:31:00 +0100 Subject: [PATCH 9/9] fix: adapt selector --- packages/core/src/tests/drawer/drawer.e2e.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts b/packages/core/src/tests/drawer/drawer.e2e.ts index 8683ca1bb8..173df08d49 100644 --- a/packages/core/src/tests/drawer/drawer.e2e.ts +++ b/packages/core/src/tests/drawer/drawer.e2e.ts @@ -28,10 +28,7 @@ regressionTest.describe('drawer', () => { regressionTest('input-group', async ({ page }) => { await page.goto('drawer/input-group'); await page.locator('ix-button').click(); - await page.waitForFunction(() => { - const drawer = document.querySelector('ix-drawer'); - return drawer && window.getComputedStyle(drawer).opacity === '1'; - }); - expect(await page.screenshot()).toMatchSnapshot(); + await page.waitForSelector('ix-drawer[style*="opacity: 1;"]'); + expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(); }); });