fix(core/drawer|inputgroup): fixed drawer display issue

.changeset/proud-waves-care.md

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

packages/core/component-doc.json

@@ -10213,11 +10213,17 @@
       "overview": "",
       "usage": {},
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "deprecated",
+          "text": "since 2.6.1. Will be removed with 3.0.0.\nUse the 'ix-input' component instead"
+        }
+      ],
       "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
+      "deprecation": "since 2.6.1. Will be removed with 3.0.0.\nUse the 'ix-input' component instead",
       "props": [],
       "methods": [],
       "events": [],

packages/core/src/components.d.ts

@@ -1610,6 +1610,10 @@ export namespace Components {
          */
         "warningText"?: string;
     }
+    /**
+     * @deprecated since 2.6.1. Will be removed with 3.0.0.
+     * Use the 'ix-input' component instead
+     */
     interface IxInputGroup {
     }
     /**
@@ -4131,6 +4135,10 @@ declare global {
         prototype: HTMLIxInputElement;
         new (): HTMLIxInputElement;
     };
+    /**
+     * @deprecated since 2.6.1. Will be removed with 3.0.0.
+     * Use the 'ix-input' component instead
+     */
     interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement {
     }
     var HTMLIxInputGroupElement: {
@@ -6744,6 +6752,10 @@ declare namespace LocalJSX {
          */
         "warningText"?: string;
     }
+    /**
+     * @deprecated since 2.6.1. Will be removed with 3.0.0.
+     * Use the 'ix-input' component instead
+     */
     interface IxInputGroup {
     }
     /**
@@ -8693,6 +8705,10 @@ declare module "@stencil/core" {
              * @form-ready 2.6.0
              */
             "ix-input": LocalJSX.IxInput & JSXBase.HTMLAttributes<HTMLIxInputElement>;
+            /**
+             * @deprecated since 2.6.1. Will be removed with 3.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

@@ -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;
+}

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

@@ -121,33 +121,35 @@ 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');
-        },
-      });
+    if (!el) {
+      return;
     }
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: [0, '16rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        el.classList.add('display-none');
+      },
+    });
   }
 
   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');
-        },
-      });
+    if (!el) {
+      return;
     }
+    anime({
+      targets: el,
+      duration: Drawer.duration,
+      translateX: ['16rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        el.classList.remove('display-none');
+      },
+    });
   }
 
   componentDidLoad() {
@@ -160,7 +162,7 @@ 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`,

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 2.6.1. Will be removed with 3.0.0.
+ * Use the 'ix-input' component instead
+ */
 @Component({
   tag: 'ix-input-group',
   styleUrl: 'input-group.scss',
@@ -23,11 +27,14 @@ export class InputGroup {
   @State() inputPaddingLeft = 0;
   @State() inputPaddingRight = 0;
 
+  startSlotRef?: HTMLElement;
+  endSlotRef?: HTMLElement;
+
   private get inputElement() {
     return this.hostElement.querySelector('input') as HTMLInputElement;
   }
 
-  private observer: MutationObserver;
+  private observer?: MutationObserver;
 
   componentWillLoad() {
     const { valid } = this.inputElement.validity;
@@ -100,50 +107,38 @@ 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;
-      } else {
-        this.inputPaddingLeft = 0;
-      }
+    if (startPadding !== 0) {
+      this.inputPaddingLeft = 11 + startPadding;
+    } else {
+      this.inputPaddingLeft = 0;
+    }
 
-      if (!this.inputElement) {
-        return;
-      }
+    if (!this.inputElement) {
+      return;
+    }
 
-      const isInputInvalid =
-        !this.inputElement.validity.valid ||
-        this.inputElement.classList.contains('is-invalid');
+    const isInputInvalid =
+      !this.inputElement.validity.valid ||
+      this.inputElement.classList.contains('is-invalid');
 
-      const formWasValidated =
-        this.inputElement.form?.classList.contains('was-validated') ||
-        this.inputElement.form?.noValidate === false;
+    const formWasValidated =
+      this.inputElement.form?.classList.contains('was-validated') ||
+      this.inputElement.form?.noValidate === false;
 
-      if (formWasValidated && isInputInvalid) {
-        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
-        this.inputElement.style.backgroundPosition = `left ${left}px center`;
-        this.inputPaddingLeft += 26;
-      }
-    });
+    if (formWasValidated && isInputInvalid) {
+      const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+      this.inputElement.style.backgroundPosition = `left ${left}px center`;
+      this.inputPaddingLeft += 26;
+    }
   }
 
   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 +161,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,11 @@ 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();
+  });
 });

packages/core/src/tests/drawer/input-group/index.html

@@ -0,0 +1,37 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-drawer>
+      <ix-input-group>
+        <ix-icon
+          slot="input-start"
+          name="success"
+          size="16">
+        </ix-icon>
+        <input />
+      </ix-input-group>
+    </ix-drawer>
+    <ix-button>Click</ix-button>
+    <script>
+      const button = document.querySelector('ix-button');
+      button.addEventListener('click', () => {
+        document.querySelector('ix-drawer').toggleDrawer(true);
+      });
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/storybook-docs/src/stories/drawer.stories.ts

@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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) => {
+    const toggleDrawer = () => {
+      args.show = !args.show;
+      const drawer = document.querySelector('ix-drawer');
+      if (drawer) {
+        drawer.toggleDrawer(args.show);
+      }
+    };
+
+    return html`
+      <ix-drawer
+        closeOnClickOutside=${args.closeOnClickOutside}
+        ?fullHeight=${true}
+        @drawerClose=${() => (args.show = false)}
+      >
+        <span>Some content of drawer</span>
+      </ix-drawer>
+      <ix-button @click=${toggleDrawer}>Toggle drawer</ix-button>
+    `;
+  },
+  argTypes: makeArgTypes<Partial<ArgTypes<Element>>>('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<Element>;
+
+export default meta;
+type Story = StoryObj<Element>;
+
+export const Default: Story = {
+  args: {
+    closeOnClickOutside: true,
+    show: false,
+  },
+};