diff --git a/.changeset/seven-coins-fly.md b/.changeset/seven-coins-fly.md new file mode 100644 index 00000000000..10ed505d137 --- /dev/null +++ b/.changeset/seven-coins-fly.md @@ -0,0 +1,7 @@ +--- +'@siemens/ix-angular': minor +'@siemens/ix': minor +'@siemens/ix-vue': minor +--- + +Update expandedChange event to trigger only on user interactions and add unnamed default slot for ix-pane-layout content. diff --git a/packages/core/src/components/pane-layout/pane-layout.tsx b/packages/core/src/components/pane-layout/pane-layout.tsx index 59c75bd83aa..fa86a7d1a1a 100644 --- a/packages/core/src/components/pane-layout/pane-layout.tsx +++ b/packages/core/src/components/pane-layout/pane-layout.tsx @@ -31,7 +31,7 @@ import { matchBreakpoint } from '../utils/breakpoints'; shadow: true, }) export class Panes { - @Element() hostElement: HTMLIxPaneLayoutElement; + @Element() hostElement!: HTMLIxPaneLayoutElement; /** * Choose the layout of the panes. @@ -59,7 +59,7 @@ export class Panes { floating: boolean; }> = []; - private observer: MutationObserver; + private observer?: MutationObserver; get currentPanes() { return this.hostElement.querySelectorAll('ix-pane'); @@ -179,30 +179,30 @@ export class Panes { if (isLeft) { if (leftCount) { - pane.slot = undefined; + pane.slot = ''; return; } leftCount++; } else if (isRight) { if (rightCount) { - pane.slot = undefined; + pane.slot = ''; return; } rightCount++; } else if (isTop) { if (topCount) { - pane.slot = undefined; + pane.slot = ''; return; } topCount++; } else if (isBottom) { if (bottomCount) { - pane.slot = undefined; + pane.slot = ''; return; } bottomCount++; } else { - pane.slot = undefined; + pane.slot = ''; return; } @@ -342,6 +342,7 @@ export class Panes { onClick={() => this.closeFloatingPanes()} > +
this.closeFloatingPanes()} > +
this.closeFloatingPanes()} > +
{ - this.expanded = !this.expanded; - }} + onClick={() => this.dispatchExpandedChangedEvent()} aria-controls={`pane-${this.composition}`} /> { const title = page.locator('h1'); await expect(title).toBeVisible(); }); + +test('prevent pane expansion', async ({ mount, page }) => { + await mount(` + +

Test Heading

+
+ `); + + const pane = page.locator('ix-pane'); + + await page.evaluate(() => { + const paneElement = document.querySelector('ix-pane'); + paneElement?.addEventListener('expandedChanged', (event: Event) => { + event.preventDefault(); + }); + }); + + const iconButton = page.locator('ix-icon-button'); + await iconButton.click(); + + const isExpanded = await pane.evaluate( + (el: HTMLIxPaneElement) => el.expanded + ); + expect(isExpanded).toBe(false); +});