fix(core/message-bar): fix styling (#1064)

unwanted margin will can now be overwritten and will get pruned in v3
siemens · Feb 22, 2024 · 62b7565 · 62b7565
1 parent 92cfe01
commit 62b7565
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 37 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/message-bar.ts b/packages/angular-test-app/src/preview-examples/message-bar.ts
@@ -12,13 +12,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <ix-message-bar>Message text</ix-message-bar>
-    <ix-message-bar type="warning">Message text</ix-message-bar>
-    <ix-message-bar type="danger">
-      <div class="d-flex align-items-center justify-content-between">
-        Message text <ix-button>Action</ix-button>
-      </div>
-    </ix-message-bar>
+    <div style='margin: 0.5rem'>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</ix-message-bar>
+      <ix-message-bar style="display: block" type="danger">
+        <div class="d-flex align-items-center justify-content-between">
+          Message text <ix-button>Action</ix-button>
+        </div>
+      </ix-message-bar>
+    </div>
   `,
 })
 export default class MessageBar {}
diff --git a/packages/core/scss/theme/classic-dark/_borderRadius.scss b/packages/core/scss/theme/classic-dark/_borderRadius.scss
@@ -21,4 +21,4 @@
       --theme-upload--border-radius: var(--theme-default-border-radius);
       --theme-workflow--border-radius: var(--theme-default-border-radius);
   }
-}
+}
diff --git a/packages/core/scss/theme/classic-dark/_borderWidth.scss b/packages/core/scss/theme/classic-dark/_borderWidth.scss
@@ -15,4 +15,4 @@
       --theme-modal--border-thickness: 0.0625rem;
       --theme-toast--border-thickness: 0rem;
   }
-}
+}
diff --git a/packages/core/scss/theme/classic-light/_borderRadius.scss b/packages/core/scss/theme/classic-light/_borderRadius.scss
@@ -21,4 +21,4 @@
       --theme-upload--border-radius: var(--theme-default-border-radius);
       --theme-workflow--border-radius: var(--theme-default-border-radius);
   }
-}
+}
diff --git a/packages/core/scss/theme/classic-light/_borderWidth.scss b/packages/core/scss/theme/classic-light/_borderWidth.scss
@@ -15,4 +15,4 @@
       --theme-modal--border-thickness: 0.0625rem;
       --theme-toast--border-thickness: 0rem;
   }
-}
+}
diff --git a/packages/core/src/components/message-bar/message-bar.scss b/packages/core/src/components/message-bar/message-bar.scss
@@ -13,6 +13,7 @@
 
 :host {
   @include ix-component;
+  margin: $small-space $small-space 0rem $small-space;
 
   .message-container {
     display: flex;
@@ -21,7 +22,6 @@
     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))
@@ -51,7 +51,7 @@
     align-self: center;
     min-height: 1.25rem;
     padding: 0 $default-space;
-    font-weight: bold;
+    font-weight: normal;
     white-space: normal;
   }
 

diff --git a/packages/core/src/tests/message-bar/basic/index.html b/packages/core/src/tests/message-bar/basic/index.html
@@ -14,13 +14,15 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <ix-message-bar>Message text</ix-message-bar>
-    <ix-message-bar type="warning">Message text</ix-message-bar>
-    <ix-message-bar type="danger">
+  <div style="margin: 0.5rem; display: block">
+    <ix-message-bar style="margin-bottom: 0.5rem; display: block">Message text</ix-message-bar>
+    <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</ix-message-bar>
+    <ix-message-bar style="display: block" type="danger">
       <div class="d-flex align-items-center justify-content-between">
         Message text <ix-button>Action</ix-button>
       </div>
     </ix-message-bar>
+    </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/...ar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-dark-linux.png b/...ar.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...r.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-light-linux.png b/...r.e2e.ts-snapshots/message-bar-basic-1-chromium---theme-classic-light-linux.png
diff --git a/packages/html-test-app/src/preview-examples/message-bar.html b/packages/html-test-app/src/preview-examples/message-bar.html
@@ -9,13 +9,15 @@
   <head> </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <ix-message-bar>Message text</ix-message-bar>
-    <ix-message-bar type="warning">Message text</ix-message-bar>
-    <ix-message-bar type="danger">
-      <div class="d-flex align-items-center justify-content-between">
-        Message text <ix-button>Action</ix-button>
-      </div>
-    </ix-message-bar>
+    <div style='padding: 0.5rem'>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</ix-message-bar>
+      <ix-message-bar style="display: block" type="danger">
+        <div class="d-flex align-items-center justify-content-between">
+          Message text <ix-button>Action</ix-button>
+        </div>
+      </ix-message-bar>
+    </div>
     <!-- Preview code -->
     <script type="module" src="./init.js"></script>
   </body>

diff --git a/packages/react-test-app/src/preview-examples/message-bar.tsx b/packages/react-test-app/src/preview-examples/message-bar.tsx
@@ -13,13 +13,15 @@ import React from 'react';
 export default () => {
   return (
     <>
-      <IxMessageBar>Message text</IxMessageBar>
-      <IxMessageBar type="warning">Message text</IxMessageBar>
-      <IxMessageBar type="danger">
-        <div className="d-flex align-items-center justify-content-between">
-          Message text <IxButton>Action</IxButton>
-        </div>
-      </IxMessageBar>
+      <div style={{ padding: '0.5rem' }}>
+        <IxMessageBar style={{marginBottom: '0.5rem', display: 'block'}}>Message text</IxMessageBar>
+        <IxMessageBar style={{marginBottom: '0.5rem', display: 'block'}}>Message text</IxMessageBar>
+        <IxMessageBar style={{display: 'block'}}type="danger">
+          <div className="d-flex align-items-center justify-content-between">
+            Message text <IxButton>Action</IxButton>
+          </div>
+        </IxMessageBar>
+      </div>
     </>
   );
 };
diff --git a/packages/vue-test-app/src/preview-examples/message-bar.vue b/packages/vue-test-app/src/preview-examples/message-bar.vue
@@ -12,11 +12,14 @@ import { IxButton, IxMessageBar } from '@siemens/ix-vue';
 </script>
 
 <template>
-  <IxMessageBar>Message text</IxMessageBar>
-  <IxMessageBar type="warning">Message text</IxMessageBar>
-  <IxMessageBar type="danger">
-    <div className="d-flex align-items-center justify-content-between">
-      Message text <IxButton>Action</IxButton>
-    </div>
-  </IxMessageBar>
+  <div style="padding: 0.5rem">
+    <IxMessageBar style="margin-bottom: 0.5rem; display: block">Message text</IxMessageBar>
+    <IxMessageBar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</IxMessageBar>
+    <IxMessageBar style="display: block" type="danger">
+      <div className="d-flex align-items-center justify-content-between">
+        Message text <IxButton>Action</IxButton>
+      </div>
+    </IxMessageBar>
+  </div>
+
 </template>