feat(core/toast): enable shadow dom (#581)

siemens · Jun 15, 2023 · 8ac2a47 · 8ac2a47
1 parent 898ae23
commit 8ac2a47
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 76 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -90,6 +90,7 @@ import Tile from 'src/preview-examples/tile';
 import Timepicker from 'src/preview-examples/timepicker';
 import Toast from 'src/preview-examples/toast';
 import ToastCustom from 'src/preview-examples/toast-custom';
+import ToastPosition from 'src/preview-examples/toast-position';
 import Toggle from 'src/preview-examples/toggle';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
 import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
@@ -161,6 +162,10 @@ const routes: Routes = [
         path: 'toast-custom',
         component: ToastCustom,
       },
+      {
+        path: 'toast-position',
+        component: ToastPosition,
+      },
       {
         path: 'tree',
         component: Tree,

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -98,6 +98,7 @@ import Tile from 'src/preview-examples/tile';
 import Timepicker from 'src/preview-examples/timepicker';
 import Toast from 'src/preview-examples/toast';
 import ToastCustom from 'src/preview-examples/toast-custom';
+import ToastPosition from 'src/preview-examples/toast-position';
 import Toggle from 'src/preview-examples/toggle';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
 import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
@@ -123,6 +124,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Modal,
     Toast,
     ToastCustom,
+    ToastPosition,
     Tree,
     TreeCustom,
     AboutAndLegal,

diff --git a/packages/angular-test-app/src/preview-examples/toast-position.ts b/packages/angular-test-app/src/preview-examples/toast-position.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { ToastService } from '@siemens/ix-angular';
 
 @Component({
@@ -23,10 +23,7 @@ import { ToastService } from '@siemens/ix-angular';
     <ix-button (click)="showToastMessage()">Show Toast</ix-button>
   `,
 })
-export default class Toast {
-  @ViewChild('customToast', { read: TemplateRef })
-  customModalRef!: TemplateRef<any>;
-
+export default class ToastPosition {
   constructor(private readonly toastService: ToastService) {}
 
   async showToastMessage() {

diff --git a/packages/angular-test-app/src/preview-examples/toast.ts b/packages/angular-test-app/src/preview-examples/toast.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 import { ToastService } from '@siemens/ix-angular';
 
 @Component({
@@ -24,9 +24,6 @@ import { ToastService } from '@siemens/ix-angular';
   `,
 })
 export default class Toast {
-  @ViewChild('customToast', { read: TemplateRef })
-  customModalRef!: TemplateRef<any>;
-
   constructor(private readonly toastService: ToastService) {}
 
   async showToastMessage() {

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -9455,7 +9455,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-toast-container"
       ],
@@ -9617,7 +9617,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-toast"

diff --git a/packages/core/src/components/toast/styles/toast-container.scss b/packages/core/src/components/toast/styles/toast-container.scss
@@ -8,6 +8,11 @@
  */
 
 @import 'common-variables';
+@import 'mixins/shadow-dom/component';
+
+:host {
+  @include ix-component;
+}
 
 #toast-container {
   > :not(:last-child) {

diff --git a/packages/core/src/components/toast/test/cw-toast.spec.tsx b/packages/core/src/components/toast/test/cw-toast.spec.tsx
diff --git a/packages/core/src/components/toast/test/toast.spec.tsx b/packages/core/src/components/toast/test/toast.spec.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 this source tree.
+ */
+
+import { newSpecPage } from '@stencil/core/testing';
+import '@testing-library/jest-dom';
+import { Toast } from '../toast';
+
+describe('toast', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: '<ix-toast toast-title="Test title">Test message</ix-toast>',
+    });
+
+    await page.waitForChanges();
+
+    expect(page.root).toEqualHtml(`
+          <ix-toast class=\"animate__animated animate__fadeIn\" toast-title=\"Test title\">
+          <mock:shadow-root>
+            <div class=\"toast-body\">
+              <div class="toast-icon">
+                  <ix-icon color="color-std-text" name="info" size="24"></ix-icon>
+                </div>
+              <div class=\"toast-content\">
+                <div class=\"toast-title\">
+                  Test title
+                </div>
+                <div class=\"toast-message\">
+                  <slot></slot>
+                </div>
+              </div>
+              <div class=\"toast-close\">
+                <ix-icon-button icon=\"close\" ghost=\"\" size=\"24\"></ix-icon-button>
+              </div>
+            </div>
+            <div class=\"toast-progress-bar toast-progress-bar--animated\" style=\"animation-duration: 5000ms; animation-play-state: running;\"></div>
+          </mock:shadow-root>
+          Test message
+        </ix-toast>
+      `);
+  });
+});
diff --git a/packages/core/src/components/toast/toast-container.tsx b/packages/core/src/components/toast/toast-container.tsx
@@ -7,25 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  Component,
-  Element,
-  h,
-  Host,
-  Method,
-  Prop,
-  Watch,
-} from '@stencil/core';
+import { Component, h, Host, Method, Prop, Watch } from '@stencil/core';
 import { TypedEvent } from '../utils/typed-event';
 import { ToastConfig } from './toast-utils';
 
 @Component({
   tag: 'ix-toast-container',
-  scoped: true,
+  shadow: true,
 })
 export class ToastContainer {
-  @Element() host!: HTMLIxToastContainerElement;
-
   /**
    */
   @Prop() containerId = 'toast-container';

diff --git a/packages/core/src/components/toast/toast.scss b/packages/core/src/components/toast/toast.scss
@@ -10,8 +10,12 @@
 @import 'common-variables';
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
+@import 'mixins/fonts';
 
 :host {
+  @include ix-component;
+
   display: flex;
   flex-direction: column;
   position: relative;
@@ -52,8 +56,13 @@
       );
       margin-bottom: $medium-space;
 
+      .toast-title {
+        @include text-default-title-single;
+      }
       .toast-message {
         min-width: 0;
+
+        @include text-default;
       }
     }
   }

diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx
@@ -22,7 +22,7 @@ import { ToastType } from './toast-utils';
 @Component({
   tag: 'ix-toast',
   styleUrl: 'toast.scss',
-  scoped: true,
+  shadow: true,
 })
 export class Toast {
   /**
@@ -63,7 +63,7 @@ export class Toast {
   @State() progress = 0;
   @State() touched = false;
 
-  @Element() host!: HTMLIxToastElement;
+  @Element() hostElement!: HTMLIxToastElement;
 
   private getIcon() {
     if (this.icon) {
@@ -89,8 +89,8 @@ export class Toast {
   }
 
   private close() {
-    if (this.host) {
-      this.host.classList.add('animate__fadeOut');
+    if (this.hostElement) {
+      this.hostElement.classList.add('animate__fadeOut');
     }
     setTimeout(() => {
       this.closeToast.emit();
@@ -125,11 +125,9 @@ export class Toast {
           ) : null}
           <div class="toast-content">
             {this.toastTitle ? (
-              <div class="toast-title text-default-title-single">
-                {this.toastTitle}
-              </div>
+              <div class="toast-title">{this.toastTitle}</div>
             ) : null}
-            <div class="toast-message text-default">
+            <div class="toast-message">
               <slot></slot>
             </div>
           </div>