feat(core/message-bar): enable shadow dom (#547)

siemens · May 24, 2023 · 4552b2d · 4552b2d
1 parent 8f369d4
commit 4552b2d
Show file tree

Hide file tree

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

diff --git a/packages/core/src/components/message-bar/message-bar.scss b/packages/core/src/components/message-bar/message-bar.scss
@@ -9,48 +9,53 @@
 
 @import 'common-variables';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
 
-.message-container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  min-height: 3.375rem;
-  margin: $small-space $small-space 0rem $small-space;
-  padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))
-    $medium-space
-    calc(#{$medium-space} - var(--theme-message-bar--border-thickness))
-    $default-space;
-  border-radius: var(--theme-message-bar--border-radius);
-  background-color: var(--theme-messagebar--background);
-}
+:host {
+  @include ix-component;
 
-.danger {
-  border: solid var(--theme-message-bar--border-thickness)
-    var(--theme-color-alarm);
-}
+  .message-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    min-height: 3.375rem;
+    margin: $small-space $small-space 0rem $small-space;
+    padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))
+      $medium-space
+      calc(#{$medium-space} - var(--theme-message-bar--border-thickness))
+      $default-space;
+    border-radius: var(--theme-message-bar--border-radius);
+    background-color: var(--theme-messagebar--background);
+  }
 
-.warning {
-  border: solid var(--theme-message-bar--border-thickness)
-    var(--theme-color-warning);
-}
+  .danger {
+    border: solid var(--theme-message-bar--border-thickness)
+      var(--theme-color-alarm);
+  }
 
-.info {
-  border: solid var(--theme-message-bar--border-thickness)
-    var(--theme-color-info);
-}
+  .warning {
+    border: solid var(--theme-message-bar--border-thickness)
+      var(--theme-color-warning);
+  }
 
-.message-content {
-  @include ellipsis;
-  flex-grow: 1;
-  align-self: center;
-  min-height: 1.25rem;
-  padding: 0 $default-space;
-  font-weight: bold;
-  white-space: normal;
-}
+  .info {
+    border: solid var(--theme-message-bar--border-thickness)
+      var(--theme-color-info);
+  }
+
+  .message-content {
+    @include ellipsis;
+    flex-grow: 1;
+    align-self: center;
+    min-height: 1.25rem;
+    padding: 0 $default-space;
+    font-weight: bold;
+    white-space: normal;
+  }
 
-ix-icon {
-  margin-top: $tiny-space;
+  ix-icon {
+    margin-top: $tiny-space;
+  }
 }
diff --git a/packages/core/src/components/message-bar/message-bar.tsx b/packages/core/src/components/message-bar/message-bar.tsx
@@ -22,7 +22,7 @@ import { NotificationColor } from '../utils/notification-color';
 @Component({
   tag: 'ix-message-bar',
   styleUrl: 'message-bar.scss',
-  scoped: true,
+  shadow: true,
 })
 export class MessageBar {
   /**

diff --git a/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap b/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap
@@ -2,11 +2,14 @@
 
 exports[`ix-message-bar renders 1`] = `
 <ix-message-bar type="danger">
-  <!---->
-  <div class="danger message-container" role="alert">
-    <ix-icon color="color-alarm" name="error"></ix-icon>
-    <div class="message-content"></div>
-    <ix-icon-button data-testid="close-btn" ghost="" icon="close" size="24"></ix-icon-button>
-  </div>
+  <mock:shadow-root>
+    <div class="danger message-container" role="alert">
+      <ix-icon color="color-alarm" name="error"></ix-icon>
+      <div class="message-content">
+        <slot></slot>
+      </div>
+      <ix-icon-button data-testid="close-btn" ghost="" icon="close" size="24"></ix-icon-button>
+    </div>
+  </mock:shadow-root>
 </ix-message-bar>
 `;
diff --git a/packages/core/src/components/message-bar/test/message-bar.spec.tsx b/packages/core/src/components/message-bar/test/message-bar.spec.tsx
@@ -23,7 +23,9 @@ describe('ix-message-bar', () => {
     });
 
     messageBar = document.querySelector('ix-message-bar');
-    closeButton = document.querySelector('[data-testid="close-btn"]');
+    closeButton = messageBar.shadowRoot.querySelector(
+      '[data-testid="close-btn"]'
+    );
   });
 
   it('renders', async () => {