fix(core/panes): expanded and slot error (#1119)

packages/core/src/components/pane-layout/pane-layout.tsx

@@ -294,6 +294,11 @@ export class Panes {
     return pane && !pane.hideOnCollapse;
   }
 
+  private slotExists(composition: Composition) {
+    const pane = this.panes.find((pane) => pane.slot === composition);
+    return !!pane;
+  }
+
   private isFloating(composition: Composition) {
     const pane = this.panes.find((pane) => pane.slot === composition);
     return pane ? pane.floating : false;
@@ -410,6 +415,7 @@ export class Panes {
               key="top"
               style={{
                 minHeight: this.hasPaddingMobile('top') ? '48px' : '0',
+                display: this.slotExists('top') ? 'block' : 'none',
               }}
             >
               <slot name="top"></slot>
@@ -418,6 +424,7 @@ export class Panes {
               key="left"
               style={{
                 minHeight: this.hasPaddingMobile('left') ? '48px' : '0',
+                display: this.slotExists('left') ? 'block' : 'none',
               }}
             >
               <slot name="left"></slot>
@@ -433,6 +440,7 @@ export class Panes {
               key="right"
               style={{
                 minHeight: this.hasPaddingMobile('right') ? '48px' : '0',
+                display: this.slotExists('right') ? 'block' : 'none',
               }}
             >
               <slot name="right"></slot>
@@ -441,6 +449,7 @@ export class Panes {
               key="bottom"
               style={{
                 minHeight: this.hasPaddingMobile('bottom') ? '48px' : '0',
+                display: this.slotExists('bottom') ? 'block' : 'none',
               }}
             >
               <slot name="bottom"></slot>

packages/core/src/components/pane-layout/test/pane-layout.ct.ts

@@ -49,6 +49,8 @@ test.describe('pane-layout with floating pane', () => {
   test('expanded', async ({ page }) => {
     await page.waitForSelector('h1');
     const title = page.locator('h1');
+    // timeout to make sure it is currently not closing
+    await page.waitForTimeout(1000);
     await expect(title).toBeVisible();
   });
 

packages/core/src/components/pane/pane.scss

@@ -47,10 +47,6 @@
         overflow: hidden;
       }
     }
-
-    .title-text-left-right-expanded {
-      order: 1;
-    }
   }
 
   .header-gap {
@@ -101,6 +97,14 @@
       .title-text {
         flex-direction: row-reverse;
         justify-content: start;
+        flex-direction: row;
+      }
+
+      .rotate {
+        writing-mode: vertical-lr;
+        text-orientation: mixed;
+        transform: rotate(180deg);
+        flex-direction: row-reverse;
       }
     }
 
@@ -127,12 +131,6 @@
     flex-direction: column;
   }
 
-  .rotate {
-    writing-mode: vertical-lr;
-    text-orientation: mixed;
-    transform: rotate(180deg);
-  }
-
   .mobile-pane {
     display: flex;
     flex-direction: column;
@@ -142,7 +140,6 @@
       display: flex;
       flex-direction: row-reverse;
       justify-content: space-between;
-      padding: 0 !important;
       margin: var(--theme-space-1) var(--theme-space-2);
     }
   }

packages/core/src/components/pane/pane.tsx

@@ -152,6 +152,8 @@ export class Pane {
   private validPositions = ['top', 'left', 'bottom', 'right'];
   private collapsedPane = '40px';
   private collapsedPaneMobile = '48px';
+  private animations: Map<string, anime.AnimeInstance> = new Map();
+  private animationCounter = 0;
 
   private mutationObserver: MutationObserver;
   private resizeObserver: ResizeObserver;
@@ -178,7 +180,7 @@ export class Pane {
     this.floating = this.variant === 'floating';
 
     if (this.expanded) {
-      this.onExpandedChange();
+      this.onParentSizeChange();
     }
 
     this.isMobile = matchBreakpoint('sm');
@@ -313,8 +315,13 @@ export class Pane {
     return { expandIcon, minimizeIcon };
   }
 
+  private getKey() {
+    return (this.animationCounter++).toString();
+  }
+
   private animateVerticalFadeIn(size: string) {
-    anime({
+    let key = this.getKey();
+    let animation = anime({
       targets: this.hostElement,
       duration: Animation.mediumTime,
       width: size,
@@ -332,12 +339,17 @@ export class Pane {
         if (this.expanded) {
           this.showContent = true;
         }
+
+        this.animations.delete(key);
       },
     });
+
+    this.animations.set(key, animation);
   }
 
   private animateHorizontalFadeIn(size: string) {
-    anime({
+    let key = this.getKey();
+    let animation = anime({
       targets: this.hostElement,
       duration: Animation.mediumTime,
       height: size,
@@ -346,17 +358,21 @@ export class Pane {
       begin: () => {
         if (!this.expanded) {
           this.showContent = false;
-          this.animateHorizontalPadding('0px');
+          if (!this.isMobile) this.animateHorizontalPadding('0px');
         } else {
-          this.animateHorizontalPadding('8px');
+          if (!this.isMobile) this.animateHorizontalPadding('8px');
         }
       },
       complete: () => {
         if (this.expanded) {
           this.showContent = true;
         }
+
+        this.animations.delete(key);
       },
     });
+
+    this.animations.set(key, animation);
   }
 
   private removePadding() {
@@ -371,26 +387,50 @@ export class Pane {
     });
   }
 
-  private animateHorizontalPadding(size: string) {
-    anime({
+  private animateHorizontalPadding(
+    size: string,
+    duration = Animation.mediumTime
+  ) {
+    let key = this.getKey();
+    let animation = anime({
       targets: this.hostElement.shadowRoot.querySelector('#title-div'),
-      duration: Animation.mediumTime,
+      duration: duration,
       paddingTop: size,
       paddingBottom: size,
       easing: 'easeInOutSine',
       delay: 0,
+      complete: () => {
+        this.animations.delete(key);
+      },
     });
+
+    this.animations.set(key, animation);
   }
 
-  private animateVerticalPadding(size: string) {
-    anime({
+  private animateVerticalPadding(
+    size: string,
+    duration = Animation.mediumTime
+  ) {
+    let key = this.getKey();
+    let animation = anime({
       targets: this.hostElement.shadowRoot.querySelector('#title-div'),
-      duration: Animation.mediumTime,
+      duration: duration,
       paddingLeft: size,
       paddingRight: size,
       easing: 'easeInOutSine',
       delay: 0,
+      complete: () => {
+        this.animations.delete(key);
+      },
     });
+
+    this.animations.set(key, animation);
+  }
+
+  private clearAnimations() {
+    this.animations.forEach((animation) => animation.pause());
+    this.animations.clear();
+    this.animationCounter = 0;
   }
 
   @Watch('isMobile')
@@ -451,6 +491,9 @@ export class Pane {
   @Watch('parentHeightPx')
   @Watch('parentWidthPx')
   onParentSizeChange() {
+    this.clearAnimations();
+    this.removePadding();
+
     if (this.expanded) {
       if (this.isMobile) {
         this.hostElement.style.height = '100%';
@@ -459,15 +502,18 @@ export class Pane {
 
         if (this.isBottomTopPane) {
           this.hostElement.style.height = expandPaneSize;
+          this.animateHorizontalPadding('8px', 0);
         } else {
           this.hostElement.style.width = expandPaneSize;
+          this.animateVerticalPadding('8px', 0);
         }
       }
+
+      this.showContent = true;
     } else {
       this.showContent = false;
 
       if (this.isMobile) {
-        this.removePadding();
         this.hostElement.style.height = this.hideOnCollapse
           ? '0'
           : this.collapsedPaneMobile;
@@ -512,7 +558,6 @@ export class Pane {
       this.showContent = false;
 
       if (this.isMobile) {
-        this.removePadding();
         this.hostElement.style.height = this.collapsedPaneMobile;
       } else {
         if (this.isBottomTopPane) {
@@ -605,14 +650,7 @@ export class Pane {
               }}
             >
               {this.icon ? (
-                <ix-icon
-                  class={{
-                    'title-text-left-right-expanded':
-                      this.expanded && !this.isMobile && this.isLeftRightPane,
-                  }}
-                  size="24"
-                  name={this.icon}
-                ></ix-icon>
+                <ix-icon size="24" name={this.icon}></ix-icon>
               ) : null}
               <div class="title-text-overflow">
                 <ix-typography format="h4">{this.heading}</ix-typography>

packages/core/src/tests/panes/basic/index.html

@@ -18,6 +18,7 @@
     <div style="position: relative; width: 100%; height: 100%">
       <ix-pane
         id="popup-pane"
+        icon="star"
         heading="Pane Popup"
         composition="right"
         size="50%"

packages/core/src/tests/panes/panes.e2e.ts

@@ -134,4 +134,15 @@ test.describe('pane', () => {
 
     await expect(page).toHaveScreenshot();
   });
+
+  regressionTest(
+    'slot, correctly toggles while being collapsed through content click',
+    async ({ page }) => {
+      await page.goto('panes/slot');
+      await page.locator('ix-button').first().click();
+      await page.waitForTimeout(1000);
+
+      await expect(page).toHaveScreenshot();
+    }
+  );
 });

packages/core/src/tests/panes/slot/index.html

@@ -0,0 +1,42 @@
+<!--
+SPDX-FileCopyrightText: 2023 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: 100vw; height: 100vh">
+    <ix-pane-layout
+      variant="floating"
+      layout="full-horizontal"
+      borderless="true"
+    >
+      <ix-pane id="pane" heading="Pane Right" slot="right" size="33%" expanded>
+        <p>This is the left pane.</p>
+      </ix-pane>
+
+      <div slot="content" style="display: flex; flex-direction: column;">
+        <ix-button id="toggle-slot" style="margin: 2.5rem">Toggle Slot</ix-button>
+      </div>
+    </ix-pane-layout>
+
+    <script>
+      const pane = document.getElementById("pane");
+      const buttonSlot = document.getElementById("toggle-slot");
+
+      buttonSlot.addEventListener("click", () => {
+        pane.slot = "top"
+      })
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>