feat(core/input-group): migrate to shadow dom (#673)

siemens · Aug 7, 2023 · 9c9cb0e · 9c9cb0e
1 parent 955180a
commit 9c9cb0e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 52 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -5276,7 +5276,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},

diff --git a/packages/core/src/components/input-group/input-group.scss b/packages/core/src/components/input-group/input-group.scss
@@ -6,8 +6,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+@import 'mixins/shadow-dom/component';
 
 :host {
+  @include ix-component;
+
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -24,11 +27,13 @@
   .group-start {
     left: 0px;
     height: 2rem;
+    margin-left: 0.375rem;
   }
 
   .group-end {
     right: 0px;
     height: 2rem;
+    margin-right: 0.375rem;
   }
 
   ::slotted(*) {

diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx
@@ -12,25 +12,27 @@ import { Component, Element, h, Host } from '@stencil/core';
 @Component({
   tag: 'ix-input-group',
   styleUrl: 'input-group.scss',
-  scoped: true,
+  shadow: true,
 })
 export class InputGroup {
-  @Element() host!: HTMLIxInputGroupElement;
+  @Element() hostElement!: HTMLIxInputGroupElement;
 
   componentDidRender() {
     let paddingRight = 15;
     let paddingLeft = 15;
-    this.host.querySelectorAll('[slot="input-end"]').forEach((item) => {
+    this.hostElement.querySelectorAll('[slot="input-end"]').forEach((item) => {
       item.classList.add('input-group-label');
       paddingRight += item.getBoundingClientRect().width;
     });
 
-    this.host.querySelectorAll('[slot="input-start"]').forEach((item) => {
-      item.classList.add('input-group-label');
-      paddingLeft += item.getBoundingClientRect().width;
-    });
+    this.hostElement
+      .querySelectorAll('[slot="input-start"]')
+      .forEach((item) => {
+        item.classList.add('input-group-label');
+        paddingLeft += item.getBoundingClientRect().width;
+      });
 
-    const inputElement = this.host.querySelector(
+    const inputElement = this.hostElement.querySelector(
       'input.form-control'
     ) as HTMLInputElement;
 

diff --git a/packages/core/src/components/input-group/test/input-group.spec.tsx b/packages/core/src/components/input-group/test/input-group.spec.tsx