fix(core/drawer|input-group): prevent layout issues in nested content of ix-drawer (#1561)

Co-authored-by: Demirci <ridvan.demirci@siemens.com>
Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
Co-authored-by: matthias <matthias.hader.ext@siemens.com>
Co-authored-by: matthiashader <144090716+matthiashader@users.noreply.github.com>
Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

Author: 5 people

.changeset/proud-waves-care.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Update slot references for **ix-input-group**.

.changeset/tame-deers-kick.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+**ix-drawer**: Allow nested content to calculate it's layout properly by setting drawer width explicitly.

packages/core/component-doc.json

@@ -10879,11 +10879,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": [],

packages/core/src/components.d.ts

@@ -1656,6 +1656,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 {
     }
     /**
@@ -4220,6 +4224,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: {
@@ -6887,6 +6895,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 {
     }
     /**
@@ -8880,6 +8892,10 @@ declare module "@stencil/core" {
              * @form-ready 2.6.0
              */
             "ix-input": LocalJSX.IxInput & JSXBase.HTMLAttributes<HTMLIxInputElement>;
+            /**
+             * @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<HTMLIxInputGroupElement>;
             /**
              * @since 1.6.0

packages/core/src/components/drawer/drawer.scss

@@ -17,11 +17,11 @@
   right: 0;
   @include box-shadow(3);
 
-  display: flex;
+  display: block;
   position: absolute;
-  flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: center;
+  opacity: 0;
 
   max-height: 100vh;
   min-height: $large-space;
@@ -52,10 +52,13 @@
   .content {
     position: relative;
     flex: 1;
-    flex-grow: 1;
     order: 2;
     height: 100%;
     width: 100%;
     overflow-y: auto;
   }
 }
+
+:host(.display-none) {
+  display: none;
+}

packages/core/src/components/drawer/drawer.tsx

@@ -15,6 +15,7 @@ import {
   Host,
   Method,
   Prop,
+  State,
   Watch,
 } from '@stencil/core';
 import anime from 'animejs';
@@ -71,6 +72,8 @@ export class Drawer {
   private callback = this.clickedOutside.bind(this);
   private divElement?: HTMLElement;
 
+  @State() showContent = true;
+
   @Watch('show')
   onShowChanged(newValue: boolean, oldValue?: boolean) {
     if (newValue === oldValue) {
@@ -96,14 +99,12 @@ export class Drawer {
       }
 
       this.show = true;
-
-      if (!this.toggle) {
+      if (!this.toggle && this.divElement) {
         this.slideInRight(this.divElement);
+        setTimeout(() => {
+          window.addEventListener('mousedown', this.callback);
+        }, Drawer.duration);
       }
-
-      setTimeout(() => {
-        window.addEventListener('mousedown', this.callback);
-      }, 300);
     } else {
       const { defaultPrevented } = this.drawerClose.emit();
 
@@ -113,7 +114,7 @@ export class Drawer {
 
       this.show = false;
 
-      if (this.toggle) {
+      if (this.toggle && this.divElement) {
         this.slideOutRight(this.divElement);
       }
 
@@ -147,34 +148,45 @@ 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',
+      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');
+      },
+      complete: () => {
+        this.showContent = true;
+      },
+    });
   }
 
   componentDidLoad() {
@@ -186,33 +198,50 @@ export class Drawer {
       <Host
         class={{
           'drawer-container': true,
-          '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"
         id="div-container"
       >
-        <div class="header">
-          <div class="header-content">
-            <slot name="header"></slot>
+        <div
+          style={{
+            width:
+              this.width === 'auto'
+                ? 'auto'
+                : `${this.getConstrainedWidth(this.width)}rem`,
+          }}
+        >
+          <div class="header">
+            <div class="header-content">
+              <slot name="header"></slot>
+            </div>
+            <ix-icon-button
+              class="close-button"
+              style={{
+                display: this.showContent ? 'block' : 'none',
+              }}
+              icon={'close'}
+              size="24"
+              ghost
+              onClick={() => this.onCloseClicked()}
+              data-testid="close-button"
+            ></ix-icon-button>
+          </div>
+          <div
+            class="content"
+            style={{
+              display: this.showContent ? 'block' : 'none',
+            }}
+          >
+            <slot></slot>
           </div>
-          <ix-icon-button
-            class="close-button"
-            icon={'close'}
-            size="24"
-            ghost
-            onClick={() => this.onCloseClicked()}
-            data-testid="close-button"
-          ></ix-icon-button>
-        </div>
-        <div class="content">
-          <slot></slot>
         </div>
       </Host>
     );

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 (
       <Host class={{ disabled: this.disabled }}>
         <div class="group group-start">
-          <slot name="input-start"></slot>
+          <slot
+            ref={(el) => (this.startSlotRef = el as HTMLElement)}
+            name="input-start"
+          ></slot>
         </div>
         <slot></slot>
         <div class="group group-end">
-          <slot name="input-end"></slot>
+          <slot
+            ref={(el) => (this.endSlotRef = el as HTMLElement)}
+            name="input-end"
+          ></slot>
         </div>
       </Host>
     );

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();
+  });
 });