fix(core/input-group): detect inital value padding (#803)

siemens · Oct 5, 2023 · 17efd6e · 17efd6e
1 parent 51ae5b2
commit 17efd6e
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 10 deletions.
diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx
@@ -25,6 +25,8 @@ export class InputGroup {
     return this.hostElement.querySelector('input') as HTMLInputElement;
   }
 
+  private observer: MutationObserver;
+
   componentWillLoad() {
     const { valid } = this.inputElement.validity;
     this.inputElement.addEventListener('valid', () => {
@@ -42,6 +44,18 @@ export class InputGroup {
     });
 
     valid ? this.onValidInput() : this.onInvalidInput();
+
+    this.observer = new MutationObserver(() => {
+      this.startSlotChanged();
+      this.endSlotChanged();
+    });
+
+    this.observer.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true,
+    });
   }
 
   componentDidRender() {
@@ -63,13 +77,13 @@ export class InputGroup {
       if (this.inputPaddingRight !== 0) {
         this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
       } else {
-        this.inputElement.style.paddingRight = 'none';
+        this.inputElement.style.paddingRight = '0.5rem';
       }
 
       if (this.inputPaddingLeft !== 0) {
         this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
       } else {
-        this.inputElement.style.paddingLeft = 'none';
+        this.inputElement.style.paddingLeft = '0.5rem';
       }
     } else {
       console.warn(
@@ -82,11 +96,14 @@ export class InputGroup {
     const slot = this.hostElement.shadowRoot.querySelector(
       'slot[name="input-start"]'
     );
+
     setTimeout(() => {
       const startPadding = this.getChildrenWidth(slot);
 
       if (startPadding !== 0) {
         this.inputPaddingLeft = 15 + startPadding;
+      } else {
+        this.inputPaddingLeft = 0;
       }
 
       if (!this.inputElement) {
@@ -137,17 +154,11 @@ export class InputGroup {
     return (
       <Host>
         <div class="group group-start">
-          <slot
-            name="input-start"
-            onSlotchange={() => this.startSlotChanged()}
-          ></slot>
+          <slot name="input-start"></slot>
         </div>
         <slot></slot>
         <div class="group group-end">
-          <slot
-            name="input-end"
-            onSlotchange={() => this.endSlotChanged()}
-          ></slot>
+          <slot name="input-end"></slot>
         </div>
       </Host>
     );

diff --git a/packages/core/src/components/input-group/tests/input-group.ct.ts b/packages/core/src/components/input-group/tests/input-group.ct.ts
@@ -0,0 +1,101 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 thi  s source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '8px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+});
+
+test('initial padding start', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <span slot="input-start">
+        <ix-icon name="eye" size="16"></ix-icon>
+      </span>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '31px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+});
+
+test('initial padding end', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <span slot="input-start">
+          <ix-icon name="eye" size="16"></ix-icon>
+        </span>
+        <span slot="input-end">
+        <ix-icon name="eye" size="16"></ix-icon>
+      </span>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '31px');
+  await expect(input).toHaveCSS('padding-right', '31px');
+});
+
+test('update padding end', async ({ mount, page }) => {
+  await mount(`
+    <ix-input-group>
+      <input class="parameter-value" type="text" value="Some initial value" />
+    </ix-input-group>
+  `);
+
+  const group = page.locator('ix-input-group');
+  await expect(group).toHaveClass(/hydrated/);
+
+  const input = group.locator('input');
+  await expect(input).toHaveCSS('padding-left', '8px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+
+  await group.evaluate((group: HTMLElement) => {
+    const startElement = document.createElement('DIV');
+    startElement.style.height = '1px';
+    startElement.style.width = '40px';
+    startElement.slot = 'input-start';
+    group.appendChild(startElement);
+  });
+
+  await expect(input).toHaveCSS('padding-left', '55px');
+  await expect(input).toHaveCSS('padding-right', '15px');
+
+  await group.evaluate((group: HTMLElement) => {
+    const endElement = document.createElement('DIV');
+    endElement.style.height = '1px';
+    endElement.style.width = '50px';
+    endElement.slot = 'input-end';
+    group.appendChild(endElement);
+  });
+
+  await expect(input).toHaveCSS('padding-left', '55px');
+  await expect(input).toHaveCSS('padding-right', '65px');
+});