diff --git a/.changeset/proud-waves-care.md b/.changeset/proud-waves-care.md new file mode 100644 index 00000000000..bc90144afde --- /dev/null +++ b/.changeset/proud-waves-care.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': patch +--- + +Update slot references for **ix-input-group**. diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 0de1f7d9fa8..9a6a766a109 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -10797,11 +10797,17 @@ "overview": "", "usage": {}, "docs": "", - "docsTags": [], + "docsTags": [ + { + "name": "deprecated", + "text": "since 3.0.0. Will be removed with 4.0.0.\nUse the 'ix-input' component instead" + } + ], "encapsulation": "shadow", "dependents": [], "dependencies": [], "dependencyGraph": {}, + "deprecation": "since 3.0.0. Will be removed with 4.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 6e0f414b7f6..1e2a6846f51 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1638,6 +1638,10 @@ export namespace Components { */ "warningText"?: string; } + /** + * @deprecated since 3.0.0. Will be removed with 4.0.0. + * Use the 'ix-input' component instead + */ interface IxInputGroup { } /** @@ -4160,6 +4164,10 @@ declare global { prototype: HTMLIxInputElement; new (): HTMLIxInputElement; }; + /** + * @deprecated since 3.0.0. Will be removed with 4.0.0. + * Use the 'ix-input' component instead + */ interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement { } var HTMLIxInputGroupElement: { @@ -6807,6 +6815,10 @@ declare namespace LocalJSX { */ "warningText"?: string; } + /** + * @deprecated since 3.0.0. Will be removed with 4.0.0. + * Use the 'ix-input' component instead + */ interface IxInputGroup { } /** @@ -8761,6 +8773,10 @@ declare module "@stencil/core" { * @form-ready 2.6.0 */ "ix-input": LocalJSX.IxInput & JSXBase.HTMLAttributes; + /** + * @deprecated since 3.0.0. Will be removed with 4.0.0. + * Use the 'ix-input' component instead + */ "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes; /** * @since 1.6.0 diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss index 84cae23a5b3..1ccfcce9bab 100644 --- a/packages/core/src/components/drawer/drawer.scss +++ b/packages/core/src/components/drawer/drawer.scss @@ -24,6 +24,7 @@ flex-flow: column nowrap; justify-content: flex-start; align-items: center; + opacity: 0; max-height: 100vh; min-height: $large-space; @@ -55,7 +56,6 @@ .content { position: relative; flex: 1; - flex-grow: 1; order: 2; height: 100%; width: 100%; @@ -66,3 +66,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 df960d04944..239e8ef7db7 100644 --- a/packages/core/src/components/drawer/drawer.tsx +++ b/packages/core/src/components/drawer/drawer.tsx @@ -15,6 +15,7 @@ import { Host, Method, Prop, + State, Watch, } from '@stencil/core'; import anime from 'animejs'; @@ -69,6 +70,8 @@ export class Drawer { private callback = this.clickedOutside.bind(this); private divElement?: HTMLElement; + @State() showContent = true; + @Watch('show') onShowChanged(newValue: boolean) { this.show = newValue !== undefined ? newValue : !this.show; @@ -85,13 +88,17 @@ export class Drawer { if (show) { this.open.emit(); - this.slideInRight(this.divElement); + if (this.divElement) { + this.slideInRight(this.divElement); + } setTimeout(() => { window.addEventListener('mousedown', this.callback); - }, 300); + }, Drawer.duration); } else { this.drawerClose.emit(); - this.slideOutRight(this.divElement); + if (this.divElement) { + this.slideOutRight(this.divElement); + } window.removeEventListener('mousedown', this.callback); } @@ -120,34 +127,50 @@ 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 getConstrainedWidth(width: number) { + return Math.min(Math.max(width, this.minWidth), this.maxWidth); } - 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 slideOutRight(el: HTMLElement) { + const initialWidth = `${this.getConstrainedWidth( + this.width === 'auto' ? this.minWidth : this.width + )}rem`; + + anime({ + targets: el, + duration: Drawer.duration, + width: [initialWidth, 0], + opacity: [1, 0], + easing: 'easeInSine', + begin: () => { + el.style.opacity = '0'; + this.showContent = false; + }, + complete: () => { + el.classList.add('display-none'); + }, + }); + } + + private slideInRight(el: HTMLElement) { + const targetWidth = `${this.getConstrainedWidth( + this.width === 'auto' ? this.minWidth : this.width + )}rem`; + + anime({ + targets: el, + duration: Drawer.duration, + width: [0, targetWidth], + opacity: [0, 1], + easing: 'easeOutSine', + begin: () => { + el.classList.remove('display-none'); + el.style.opacity = '0'; + }, + complete: () => { + this.showContent = true; + }, + }); } componentDidLoad() { @@ -160,13 +183,13 @@ export class Drawer { class={{ 'drawer-container': true, toggle: this.show, - 'd-none': true, + 'display-none': true, }} style={{ - width: this.width === 'auto' ? this.width : `${this.width}rem`, - 'min-width': `${this.minWidth}rem`, + width: '0', 'max-width': `${this.maxWidth}rem`, height: this.fullHeight ? '100%' : 'auto', + overflow: 'hidden', }} ref={(el) => (this.divElement = el as HTMLElement)} data-testid="container" @@ -178,6 +201,9 @@ export class Drawer { -
+
diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx index 6aca64c0364..2ab5f8a6da2 100644 --- a/packages/core/src/components/input-group/input-group.tsx +++ b/packages/core/src/components/input-group/input-group.tsx @@ -10,6 +10,10 @@ import { Component, Element, h, Host, State } from '@stencil/core'; import { getSlottedElements } from '../utils/shadow-dom'; +/** + * @deprecated since 3.0.0. Will be removed with 4.0.0. + * Use the 'ix-input' component instead + */ @Component({ tag: 'ix-input-group', styleUrl: 'input-group.scss', @@ -23,6 +27,9 @@ export class InputGroup { @State() inputPaddingLeft = 0; @State() inputPaddingRight = 0; + startSlotRef?: HTMLElement; + endSlotRef?: HTMLElement; + private get inputElement() { return this.hostElement.querySelector('input') as HTMLInputElement; } @@ -100,12 +107,8 @@ export class InputGroup { } private startSlotChanged() { - const slot = this.hostElement.shadowRoot!.querySelector( - 'slot[name="input-start"]' - )!; - setTimeout(() => { - const startPadding = this.getChildrenWidth(slot); + const startPadding = this.getChildrenWidth(this.startSlotRef); if (startPadding !== 0) { this.inputPaddingLeft = 11 + startPadding; @@ -134,16 +137,12 @@ export class InputGroup { } private endSlotChanged() { - const slot = this.hostElement.shadowRoot!.querySelector( - 'slot[name="input-end"]' - )!; - setTimeout(() => { - this.inputPaddingRight = 15 + this.getChildrenWidth(slot); + this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef); }); } - private getChildrenWidth(slotElement: Element) { + private getChildrenWidth(slotElement: Element | undefined) { if (!slotElement) { return 0; } @@ -166,11 +165,17 @@ export class InputGroup { return (
- + (this.startSlotRef = el as HTMLElement)} + name="input-start" + >
- + (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 18e04ae15a8..2f62d61d359 100644 --- a/packages/core/src/tests/drawer/drawer.e2e.ts +++ b/packages/core/src/tests/drawer/drawer.e2e.ts @@ -24,4 +24,18 @@ 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.waitForSelector('ix-drawer[style*="opacity: 1;"]'); + expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(); + }); + + regressionTest('inside container', async ({ page }) => { + await page.goto('drawer/inside-container'); + await page.locator('ix-button').click(); + await page.waitForSelector('ix-drawer[style*="opacity: 1;"]'); + expect(await page.screenshot({ animations: 'disabled' })).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 00000000000..267e2f6932b Binary files /dev/null and b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..c634e5834af Binary files /dev/null and b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-input-group-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-inside-container-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-inside-container-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..52dece8bba7 Binary files /dev/null and b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-inside-container-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-inside-container-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-inside-container-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..4141663786c Binary files /dev/null and b/packages/core/src/tests/drawer/drawer.e2e.ts-snapshots/drawer-inside-container-1-chromium---theme-classic-light-linux.png differ 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 00000000000..a19829ed02c --- /dev/null +++ b/packages/core/src/tests/drawer/input-group/index.html @@ -0,0 +1,37 @@ + + + + + + + + Stencil Component Starter + + + + + + + + + + Click + + + + diff --git a/packages/core/src/tests/drawer/inside-container/index.html b/packages/core/src/tests/drawer/inside-container/index.html new file mode 100644 index 00000000000..883a4135930 --- /dev/null +++ b/packages/core/src/tests/drawer/inside-container/index.html @@ -0,0 +1,30 @@ + + + + + + + + Stencil Component Starter + + +
+ Content + 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 00000000000..235e3c58098 --- /dev/null +++ b/packages/storybook-docs/src/stories/drawer.stories.ts @@ -0,0 +1,67 @@ +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) => { + // Create a state handler function + const toggleDrawer = () => { + args.show = !args.show; + // Force a re-render of the component + const drawer = document.querySelector('ix-drawer'); + if (drawer) { + drawer.show = args.show; + } + }; + + return html` + { + args.show = false; + const drawer = document.querySelector('ix-drawer'); + if (drawer) { + drawer.show = false; + } + }} + > +
+
+ + dasda +
+
+ + Toggle`; + }, + 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, + show: true, + }, +};