feat(core/breadcrumb): migrate to shadow dom (#679)

Co-authored-by: Bergwein, Christopher (RC-AT DI PA SW) <christopher.bergwein@siemenes.com>
siemens · Aug 7, 2023 · f8dc56a · f8dc56a
1 parent a8c2187
commit f8dc56a
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 65 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -470,7 +470,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon",
@@ -576,7 +576,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},

diff --git a/packages/core/src/components/breadcrumb-item/breadcrumb-item.scss b/packages/core/src/components/breadcrumb-item/breadcrumb-item.scss
@@ -7,6 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@import 'mixins/shadow-dom/component';
+
 :host {
+  @include ix-component;
+
   display: block;
 }
diff --git a/packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx b/packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx
@@ -12,7 +12,7 @@ import { Component, h, Host, Prop } from '@stencil/core';
 @Component({
   tag: 'ix-breadcrumb-item',
   styleUrl: 'breadcrumb-item.scss',
-  scoped: true,
+  shadow: true,
 })
 export class BreadcrumbItem {
   /**

diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss
@@ -10,17 +10,18 @@
 @import 'common-variables';
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
 
 @mixin crumb-hover($variant) {
   @include hover {
     background-color: var(--theme-breadcrumb-#{$variant}--background--hover);
 
     .crumb-text,
-    .glyph {
+    ix-icon {
       color: var(--theme-breadcrumb-#{$variant}--color--hover);
     }
 
-    .crumb-text + .glyph-chevron-right-small {
+    .crumb-text + ix-icon {
       color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);
     }
   }
@@ -29,11 +30,11 @@
     background-color: var(--theme-breadcrumb-#{$variant}--background--active);
 
     .crumb-text,
-    .glyph {
+    ix-icon {
       color: var(--theme-breadcrumb-#{$variant}--color--active);
     }
 
-    .crumb-text + .glyph-chevron-right-small {
+    .crumb-text + ix-icon {
       color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);
     }
   }
@@ -46,11 +47,11 @@
     transition: $default-time;
 
     .crumb-text,
-    .glyph {
+    ix-icon {
       color: var(--theme-breadcrumb-#{$variant}--color);
     }
 
-    .crumb-text + .glyph-chevron-right-small {
+    .crumb-text + ix-icon {
       color: var(--theme-breadcrumb-#{$variant}-arrow--color);
     }
 
@@ -65,11 +66,11 @@
         );
 
         .crumb-text,
-        .glyph {
+        ix-icon {
           color: var(--theme-breadcrumb-#{$variant}--color--hover);
         }
 
-        .crumb-text + .glyph-chevron-right-small {
+        .crumb-text + ix-icon {
           color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);
         }
       }
@@ -80,11 +81,11 @@
         );
 
         .crumb-text,
-        .glyph {
+        ix-icon {
           color: var(--theme-breadcrumb-#{$variant}--color--active);
         }
 
-        .crumb-text + .glyph-chevron-right-small {
+        .crumb-text + ix-icon {
           color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);
         }
       }
@@ -93,6 +94,8 @@
 }
 
 :host {
+  @include ix-component;
+
   display: flex;
   height: $large-control-height;
   justify-content: flex-start;
@@ -129,9 +132,8 @@
       }
     }
 
-    .crumb-text + .glyph-chevron-right-small {
+    .crumb-text + ix-icon {
       margin-inline-start: $tiny-space;
-      margin-inline-end: 0; // Overwrite global selector: .btn .glyph
     }
 
     &.last {
@@ -154,10 +156,6 @@
 
   .crumb-dropdown {
     overflow: visible;
-
-    .glyph::after {
-      display: none;
-    }
   }
 
   .remove-anchor::after {
@@ -173,8 +171,10 @@
       font-weight: $font-weight-bold;
     }
 
-    .glyph {
-      line-height: unset;
+    ix-icon {
+      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon
+      // using padding-top to achieve same position as before
+      padding-top: 2px;
     }
   }
 

diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx
@@ -23,7 +23,7 @@ import { createMutationObserver } from '../utils/mutation-observer';
 @Component({
   tag: 'ix-breadcrumb',
   styleUrl: 'breadcrumb.scss',
-  scoped: true,
+  shadow: true,
 })
 export class Breadcrumb {
   /**
@@ -62,7 +62,9 @@ export class Breadcrumb {
   }
 
   get crumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
+    return Array.from(
+      this.hostElement.shadowRoot.querySelectorAll('.crumb-items .crumb')
+    );
   }
 
   @State() items: { label: string; icon?: string }[] = [];
@@ -88,13 +90,10 @@ export class Breadcrumb {
       }
     });
 
-    this.mutationObserver.observe(
-      this.hostElement.querySelector('.crumb-items'),
-      {
-        subtree: true,
-        childList: true,
-      }
-    );
+    this.mutationObserver.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+    });
   }
 
   componentWillLoad() {
@@ -190,7 +189,7 @@ export class Breadcrumb {
             </span>
           </span>
           {!isLastItem ? (
-            <span class="glyph glyph-18 glyph-chevron-right-small text-default-text"></span>
+            <ix-icon name="chevron-right-small" size="24"></ix-icon>
           ) : null}
         </div>
       );
@@ -223,7 +222,7 @@ export class Breadcrumb {
           >
             <span class="remove-anchor more-text">
               <span class="more-text-ellipsis">...</span>
-              <span class="glyph glyph-16 glyph-chevron-right"></span>
+              <ix-icon name="chevron-right" size="16"></ix-icon>
             </span>
           </div>
         ) : null}

diff --git a/packages/core/src/components/breadcrumb/test/__snapshots__/cw-breadcrumb.spec.tsx.snap b/packages/core/src/components/breadcrumb/test/__snapshots__/cw-breadcrumb.spec.tsx.snap
@@ -2,40 +2,42 @@
 
 exports[`ix-breadcrumb renders 1`] = `
 <ix-breadcrumb>
-  <!---->
-  <ix-dropdown></ix-dropdown>
-  <div class="crumb-items">
-    <div class="btn clickable crumb" data-breadcrumb="0" data-testid="item">
-      <span class="crumb-text remove-anchor">
-        <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
-      </span>
-      <span class="glyph glyph-18 glyph-chevron-right-small text-default-text"></span>
+  <mock:shadow-root>
+    <ix-dropdown></ix-dropdown>
+    <div class="crumb-items">
+      <div class="btn clickable crumb" data-breadcrumb="0" data-testid="item">
+        <span class="crumb-text remove-anchor">
+          <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
+        </span>
+        <ix-icon name="chevron-right-small" size="24"></ix-icon>
+      </div>
+      <div class="btn clickable crumb" data-breadcrumb="1" data-testid="item">
+        <span class="crumb-text remove-anchor">
+          <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
+        </span>
+        <ix-icon name="chevron-right-small" size="24"></ix-icon>
+      </div>
+      <div class="btn clickable crumb" data-breadcrumb="2" data-testid="item">
+        <span class="crumb-text remove-anchor">
+          <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
+        </span>
+        <ix-icon name="chevron-right-small" size="24"></ix-icon>
+      </div>
+      <div class="btn clickable crumb last remove-hover" data-breadcrumb="3" data-testid="item">
+        <span class="crumb-text remove-anchor">
+          <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
+        </span>
+      </div>
+      <slot></slot>
     </div>
-    <div class="btn clickable crumb" data-breadcrumb="1" data-testid="item">
-      <span class="crumb-text remove-anchor">
-        <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
-      </span>
-      <span class="glyph glyph-18 glyph-chevron-right-small text-default-text"></span>
-    </div>
-    <div class="btn clickable crumb" data-breadcrumb="2" data-testid="item">
-      <span class="crumb-text remove-anchor">
-        <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
-      </span>
-      <span class="glyph glyph-18 glyph-chevron-right-small text-default-text"></span>
-    </div>
-    <div class="btn clickable crumb last remove-hover" data-breadcrumb="3" data-testid="item">
-      <span class="crumb-text remove-anchor">
-        <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>
-      </span>
-    </div>
-    <ix-breadcrumb-item label="Test 1">
-      <ix-breadcrumb-item label="Test 2">
-        <ix-breadcrumb-item label="Test 3">
-          <ix-breadcrumb-item label="Test 4"></ix-breadcrumb-item>
-        </ix-breadcrumb-item>
+    <ix-dropdown></ix-dropdown>
+  </mock:shadow-root>
+  <ix-breadcrumb-item label="Test 1">
+    <ix-breadcrumb-item label="Test 2">
+      <ix-breadcrumb-item label="Test 3">
+        <ix-breadcrumb-item label="Test 4"></ix-breadcrumb-item>
       </ix-breadcrumb-item>
     </ix-breadcrumb-item>
-  </div>
-  <ix-dropdown></ix-dropdown>
+  </ix-breadcrumb-item>
 </ix-breadcrumb>
 `;
diff --git a/packages/core/src/components/breadcrumb/test/cw-breadcrumb.spec.tsx b/packages/core/src/components/breadcrumb/test/cw-breadcrumb.spec.tsx
@@ -51,7 +51,9 @@ describe('ix-breadcrumb', () => {
     let callbackSpy = jest.fn();
     page.win.addEventListener('itemClick', callbackSpy);
 
-    let item = page.doc.querySelector('[data-testid="item"]');
+    let item = page.doc
+      .querySelector('ix-breadcrumb')
+      .shadowRoot.querySelector('[data-testid="item"]');
     fireEvent.click(item);
     await page.waitForChanges();
 

diff --git a/...umb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-dark-linux.png b/...umb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...mb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-light-linux.png b/...mb.e2e.ts-snapshots/breadcrumb-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...2e.ts-snapshots/breadcrumb-lazyLoaded-1-chromium---theme-classic-dark-linux.png b/...2e.ts-snapshots/breadcrumb-lazyLoaded-1-chromium---theme-classic-dark-linux.png
diff --git a/...e.ts-snapshots/breadcrumb-lazyLoaded-1-chromium---theme-classic-light-linux.png b/...e.ts-snapshots/breadcrumb-lazyLoaded-1-chromium---theme-classic-light-linux.png