From 44391bf32dc43d65fd6e31f1384f660a6331e3ce Mon Sep 17 00:00:00 2001
From: "Bergwein, Christopher (RC-AT DI PA SW)"
 <christopher.bergwein@siemenes.com>
Date: Wed, 24 May 2023 09:50:43 +0200
Subject: [PATCH 1/2] feat(core/message-bar): enable shadow dom

---
 packages/core/component-doc.json              |  2 +-
 .../components/message-bar/message-bar.scss   | 81 ++++++++++---------
 .../components/message-bar/message-bar.tsx    |  2 +-
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index a13167d2f3f..9acf15f0834 100644
--- 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
index 997ab2c7afd..a23ae24ee1f 100644
--- 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
index da62609292b..2719570b62b 100644
--- 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 {
   /**

From 8536bf521fb9bf4f352f91c08eadb2e71fde4fb6 Mon Sep 17 00:00:00 2001
From: "Bergwein, Christopher (RC-AT DI PA SW)"
 <christopher.bergwein@siemenes.com>
Date: Wed, 24 May 2023 10:56:45 +0200
Subject: [PATCH 2/2] test(core/message-bar): update jest snapshots

---
 .../test/__snapshots__/message-bar.spec.tsx.snap  | 15 +++++++++------
 .../message-bar/test/message-bar.spec.tsx         |  4 +++-
 2 files changed, 12 insertions(+), 7 deletions(-)

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
index 741830760c8..56b800c1183 100644
--- 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
index 380dd94120b..d6d992a80b3 100644
--- 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 () => {