feat(core/bind): enable shadowDOM (#533)

siemens · May 15, 2023 · 2f94f3b · 2f94f3b
1 parent efc3f7c
commit 2f94f3b
Show file tree

Hide file tree

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

diff --git a/packages/core/src/components/blind/blind.scss b/packages/core/src/components/blind/blind.scss
@@ -41,7 +41,7 @@
     color: var(--theme-blind-header-closed--color);
     background-color: var(--theme-blind-header-closed--background);
 
-    .glyph {
+    .collapse-icon {
       color: var(--theme-blind-header-icon-closed--color);
       padding: $tiny-space $small-space;
     }
@@ -69,15 +69,15 @@
     @include hover {
       background-color: var(--theme-blind-header-open--background--hover);
 
-      .glyph {
+      .collapse-icon {
         color: var(--theme-blind-header-icon-open--color--hover);
       }
     }
 
     @include active {
       background-color: var(--theme-blind-header-open--background--active);
 
-      .glyph {
+      .collapse-icon {
         color: var(--theme-blind-header-icon-open--color--active);
       }
     }
@@ -93,15 +93,15 @@
       @include hover {
         background-color: var(--theme-blind-header-open--background--hover);
 
-        .glyph {
+        .collapse-icon {
           color: var(--theme-blind-header-icon-closed--color--hover);
         }
       }
 
       @include active {
         background-color: var(--theme-blind-header-open--background--active);
 
-        .glyph {
+        .collapse-icon {
           color: var(--theme-blind-header-icon-closed--color--active);
         }
       }

diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx
@@ -24,7 +24,7 @@ let sequentialInstanceId = 0;
 @Component({
   tag: 'ix-blind',
   styleUrl: 'blind.scss',
-  scoped: true,
+  shadow: true,
 })
 export class Blind {
   /**
@@ -72,7 +72,7 @@ export class Blind {
   }
 
   get content() {
-    return this.hostElement.querySelector('.blind-content');
+    return this.hostElement.shadowRoot.querySelector('.blind-content');
   }
 
   @Watch('collapsed')
@@ -132,13 +132,11 @@ export class Blind {
           aria-expanded={a11yBoolean(!this.collapsed)}
           onClick={(e) => this.onHeaderClick(e)}
         >
-          <span
-            class={{
-              glyph: true,
-              'glyph-chevron-right-small': true,
-            }}
+          <ix-icon
+            class={'collapse-icon'}
+            name="chevron-right-small"
             ref={(ref) => (this.chevronRef = ref)}
-          ></span>
+          ></ix-icon>
           <div
             class="blind-header-title"
             id={`ix-blind-header-title-${this.id}`}
@@ -151,7 +149,10 @@ export class Blind {
                   ''
                 )}
                 <span class="blind-header-title-default">{this.label}</span>
-                <span class="header-actions">
+                <span
+                  class="header-actions"
+                  onClick={(e) => e.stopImmediatePropagation()}
+                >
                   <slot name="header-actions"></slot>
                 </span>
               </span>

diff --git a/packages/core/src/tests/blind/blind.e2e.ts b/packages/core/src/tests/blind/blind.e2e.ts
@@ -29,6 +29,7 @@ regressionTest.describe('blind', () => {
   regressionTest('header-actions', async ({ page }) => {
     await page.goto('blind/header-actions');
     await page.locator('#context-menu').click();
+    await page.waitForTimeout(800);
     await page.waitForSelector('ix-dropdown.show');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });