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

.changeset/proud-waves-care.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/input-group): update slot references

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

@@ -121,24 +121,34 @@ export class Drawer {
     }
   }
 
-  private slideOutRight(el: HTMLElement) {
-    anime({
-      targets: el,
-      duration: Drawer.duration,
-      translateX: [0, '16rem'],
-      opacity: [1, 0],
-      easing: 'easeInSine',
-    });
+  private slideOutRight(el?: HTMLElement) {
+    if (el) {
+      anime({
+        targets: el,
+        duration: Drawer.duration,
+        translateX: [0, '16rem'],
+        opacity: [1, 0],
+        easing: 'easeInSine',
+        complete: () => {
+          el.classList.remove('toggle');
+        },
+      });
+    }
   }
 
-  private slideInRight(el: HTMLElement) {
-    anime({
-      targets: el,
-      duration: Drawer.duration,
-      translateX: ['16rem', 0],
-      opacity: [0, 1],
-      easing: 'easeOutSine',
-    });
+  private slideInRight(el?: HTMLElement) {
+    if (el) {
+      anime({
+        targets: el,
+        duration: Drawer.duration,
+        translateX: ['16rem', 0],
+        opacity: [0, 1],
+        easing: 'easeOutSine',
+        begin: () => {
+          el.classList.add('toggle');
+        },
+      });
+    }
   }
 
   componentDidLoad() {
@@ -150,9 +160,6 @@ export class Drawer {
       <Host
         class={{
           'drawer-container': true,
-          toggle: this.show,
-          'full-height': this.fullHeight,
-
         }}
         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,14 +27,14 @@ export class InputGroup {
   @State() inputPaddingLeft = 0;
   @State() inputPaddingRight = 0;
 
-  startSlotRef: HTMLElement;
-  endSlotRef: HTMLElement;
+  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;
@@ -64,7 +68,6 @@ export class InputGroup {
     });
   }
 
-
   componentDidRender() {
     this.prepareInputElement();
   }
@@ -129,16 +132,13 @@ export class InputGroup {
       this.inputElement.style.backgroundPosition = `left ${left}px center`;
       this.inputPaddingLeft += 26;
     }
-
   }
 
   private endSlotChanged() {
     this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
-
   }
 
-  private getChildrenWidth(slotElement: Element) {
-
+  private getChildrenWidth(slotElement: Element | undefined) {
     if (!slotElement) {
       return 0;
     }
@@ -161,11 +161,17 @@ export class InputGroup {
     return (
       <Host class={{ disabled: this.disabled }}>
         <div class="group group-start">
-          <slot ref={(el: HTMLElement) => this.startSlotRef = el} 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 ref={(el: HTMLElement) => this.endSlotRef = el} 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.waitForTimeout(2000);
+    expect(await page.screenshot()).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) => {
+    return html` <ix-drawer
+      closeOnClickOutside=${args.closeOnClickOutside}
+      ?fullHeight=${true}
+      show=${args.show}
+      onDrawerClose=${true}
+    >
+      <div>
+        <ix-input-group>
+          <ix-icon
+            slot="input-start"
+            name="success"
+            color="color-success"
+            size="16"
+          />
+          <input slot="input-end" />
+          <span> dasda </span>
+        </ix-input-group>
+      </div>
+    </ix-drawer>`;
+  },
+  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,
+  },
+};