fix(core/pane-layout): remove absolute positioning (#1457)

siemens · Nov 18, 2024 · 3d62fff · 3d62fff
1 parent a852e75
commit 3d62fff
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 8 deletions.
diff --git a/.changeset/nervous-badgers-count.md b/.changeset/nervous-badgers-count.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': major
+---
+
+fix(core/pane-layout): remove absolute positioning
diff --git a/packages/core/src/components/pane-layout/pane-layout.scss b/packages/core/src/components/pane-layout/pane-layout.scss
@@ -27,7 +27,7 @@
 :host {
   @include ix-component;
   display: flex;
-  position: absolute;
+  position: relative;
   width: 100%;
   height: 100%;
 

diff --git 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;
       }
 

diff --git a/packages/core/src/tests/panes/layout-responsive/index.html b/packages/core/src/tests/panes/layout-responsive/index.html
@@ -0,0 +1,60 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+      name="viewport"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 400px; height: 400px">
+    <ix-pane-layout
+      id="pane-layout"
+      variant="floating"
+      layout="full-horizontal"
+      borderless="true"
+    >
+      <ix-pane heading="Pane Left" slot="left" size="33%">
+        <p>This is the left pane.</p>
+      </ix-pane>
+      <ix-pane heading="Pane Top" slot="top" size="33%">
+        <p>This is the top pane.</p>
+      </ix-pane>
+      <ix-pane heading="Pane Right" slot="right" size="33%">
+        <p>This is the right pane.</p>
+      </ix-pane>
+      <ix-pane heading="Pane Bottom" slot="bottom" size="33%">
+        <p>This is the bottom pane.</p>
+      </ix-pane>
+
+      <div slot="content" style="display: flex; flex-direction: column;">
+        <ix-button id="toggle-variant" style="margin: 2.5rem">Toggle Variant</ix-button>
+        <ix-button id="toggle-layout" style="margin: 2.5rem">Toggle Layout</ix-button>
+      </div>
+    </ix-pane-layout>
+
+    <script>
+      const paneLayout = document.getElementById("pane-layout");
+      const buttonVariant = document.getElementById("toggle-variant");
+      const buttonLayout = document.getElementById("toggle-layout");
+
+      buttonVariant.addEventListener("click", () => {
+        const isInline = paneLayout.variant === 'inline'
+
+        paneLayout.variant = isInline ? 'floating' : 'inline'
+        paneLayout.borderless = isInline;
+      })
+      buttonLayout.addEventListener("click", () => {
+        paneLayout.layout = paneLayout.layout === "full-vertical" ? "full-horizontal" : "full-vertical"
+      })
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/panes/panes.e2e.ts b/packages/core/src/tests/panes/panes.e2e.ts
@@ -142,6 +142,13 @@ regressionTest.describe('pane', () => {
     await expect(page).toHaveScreenshot();
   });
 
+  regressionTest('layout, inline, collapsed, responsive', async ({ page }) => {
+    await page.goto('panes/layout-responsive');
+    await page.waitForTimeout(1000);
+
+    await expect(page).toHaveScreenshot();
+  });
+
   regressionTest(
     'slot, correctly toggles while being collapsed through content click',
     async ({ page }) => {

diff --git a/...ne-layout-inline-collapsed-responsive-1-chromium---theme-classic-dark-linux.png b/...ne-layout-inline-collapsed-responsive-1-chromium---theme-classic-dark-linux.png
diff --git a/...e-layout-inline-collapsed-responsive-1-chromium---theme-classic-light-linux.png b/...e-layout-inline-collapsed-responsive-1-chromium---theme-classic-light-linux.png