feat(core/workflow): enable shadow dom (#551)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jun 6, 2023 · 0a58428 · 0a58428
1 parent 7723bb1
commit 0a58428
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 35 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -10656,7 +10656,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon"
@@ -10811,13 +10811,7 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": [
-        {
-          "event": "click",
-          "capture": false,
-          "passive": true
-        }
-      ]
+      "listeners": []
     },
     {
       "dirPath": "./src/components/workflow-steps",
@@ -10830,7 +10824,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
@@ -10925,7 +10919,13 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": []
+      "listeners": [
+        {
+          "event": "selectedChanged",
+          "capture": false,
+          "passive": false
+        }
+      ]
     },
     {
       "dirPath": "./src/components/my-component",

diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
@@ -6,7 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import { Component, h, Host } from '@stencil/core';
 
 @Component({

diff --git a/packages/core/src/components/workflow-step/workflow-step.scss b/packages/core/src/components/workflow-step/workflow-step.scss
@@ -8,8 +8,11 @@
  */
 
 @import 'common-variables';
+@import 'mixins/shadow-dom/component';
 
 :host {
+  @include ix-component;
+
   .step {
     display: flex;
     flex-direction: column;

diff --git a/packages/core/src/components/workflow-step/workflow-step.tsx b/packages/core/src/components/workflow-step/workflow-step.tsx
@@ -15,7 +15,6 @@ import {
   Fragment,
   h,
   Host,
-  Listen,
   Prop,
   State,
   Watch,
@@ -24,7 +23,7 @@ import {
 @Component({
   tag: 'ix-workflow-step',
   styleUrl: 'workflow-step.scss',
-  scoped: true,
+  shadow: true,
 })
 export class WorkflowStep {
   @Element() hostElement: HTMLIxWorkflowStepElement;
@@ -137,8 +136,7 @@ export class WorkflowStep {
     );
   }
 
-  @Listen('click', { passive: true })
-  clickFunction() {
+  onStepClick() {
     if (!this.disabled && this.clickable) {
       this.selectedChanged.emit(this.hostElement);
     }
@@ -167,7 +165,7 @@ export class WorkflowStep {
     );
 
     return (
-      <Host>
+      <Host onClick={() => this.onStepClick()}>
         <div
           tabIndex={0}
           onClick={() => this.select()}

diff --git a/packages/core/src/components/workflow-steps/workflow-steps.scss b/packages/core/src/components/workflow-steps/workflow-steps.scss
@@ -8,8 +8,11 @@
  */
 
 @import 'common-variables';
+@import 'mixins/shadow-dom/component';
 
 :host {
+  @include ix-component;
+
   .steps {
     display: flex;
 

diff --git a/packages/core/src/components/workflow-steps/workflow-steps.tsx b/packages/core/src/components/workflow-steps/workflow-steps.tsx
@@ -14,14 +14,15 @@ import {
   EventEmitter,
   h,
   Host,
+  Listen,
   Prop,
 } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
 
 @Component({
   tag: 'ix-workflow-steps',
   styleUrl: 'workflow-steps.scss',
-  scoped: true,
+  shadow: true,
 })
 export class WorkflowSteps {
   @Element() hostElement!: HTMLIxWorkflowStepsElement;
@@ -56,10 +57,6 @@ export class WorkflowSteps {
     return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
   }
 
-  get stepsContent() {
-    return this.hostElement.querySelector('.steps');
-  }
-
   updateSteps() {
     let steps = this.getSteps();
     steps.forEach((element, index) => {
@@ -84,21 +81,17 @@ export class WorkflowSteps {
 
   private observer: MutationObserver;
 
-  componentDidLoad() {
-    this.stepsContent.addEventListener(
-      'selectedChanged',
-      (event: CustomEvent<HTMLIxWorkflowStepElement>) => {
-        const steps = this.getSteps();
-        steps.forEach((element) => {
-          if (element !== event.target) {
-            element.selected = false;
-          }
-        });
+  @Listen('selectedChanged')
+  onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {
+    const steps = this.getSteps();
+    steps.forEach((element) => {
+      if (element !== event.target) {
+        element.selected = false;
       }
-    );
-
-    const slotDiv = this.hostElement.querySelector('.steps');
+    });
+  }
 
+  componentDidLoad() {
     this.observer = createMutationObserver((mutations) => {
       for (let mutation of mutations) {
         if (mutation.type === 'childList') {
@@ -107,7 +100,7 @@ export class WorkflowSteps {
       }
     });
 
-    this.observer.observe(slotDiv, { childList: true });
+    this.observer.observe(this.hostElement, { childList: true });
   }
 
   disconnectedCallback() {