From 62b7565706ed150df9014d25037b653349491386 Mon Sep 17 00:00:00 2001
From: matthiashader <144090716+matthiashader@users.noreply.github.com>
Date: Thu, 22 Feb 2024 09:19:58 +0100
Subject: [PATCH 1/7] fix(core/message-bar): fix styling (#1064)
unwanted margin will can now be overwritten and will get pruned in v3
---
.../src/preview-examples/message-bar.ts | 16 +++++++++-------
.../theme/classic-dark/_borderRadius.scss | 2 +-
.../scss/theme/classic-dark/_borderWidth.scss | 2 +-
.../theme/classic-light/_borderRadius.scss | 2 +-
.../theme/classic-light/_borderWidth.scss | 2 +-
.../components/message-bar/message-bar.scss | 4 ++--
.../src/tests/message-bar/basic/index.html | 8 +++++---
...-1-chromium---theme-classic-dark-linux.png | Bin 16417 -> 15118 bytes
...1-chromium---theme-classic-light-linux.png | Bin 16485 -> 15396 bytes
.../src/preview-examples/message-bar.html | 16 +++++++++-------
.../src/preview-examples/message-bar.tsx | 16 +++++++++-------
.../src/preview-examples/message-bar.vue | 17 ++++++++++-------
12 files changed, 48 insertions(+), 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
index aa5e848116b..e57babf6e0a 100644
--- 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: `
- Message text
- Message text
-
-
- Message text Action
-
-
+
+
Message text
+
Message text
+
+
+ Message text Action
+
+
+
`,
})
export default class MessageBar {}
diff --git a/packages/core/scss/theme/classic-dark/_borderRadius.scss b/packages/core/scss/theme/classic-dark/_borderRadius.scss
index d67b6274aee..747d8806bc5 100644
--- 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);
}
-}
\ No newline at end of file
+}
diff --git a/packages/core/scss/theme/classic-dark/_borderWidth.scss b/packages/core/scss/theme/classic-dark/_borderWidth.scss
index 941ffc2c802..4503ac05826 100644
--- 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;
}
-}
\ No newline at end of file
+}
diff --git a/packages/core/scss/theme/classic-light/_borderRadius.scss b/packages/core/scss/theme/classic-light/_borderRadius.scss
index 20d304a9832..2cf95e91abf 100644
--- 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);
}
-}
\ No newline at end of file
+}
diff --git a/packages/core/scss/theme/classic-light/_borderWidth.scss b/packages/core/scss/theme/classic-light/_borderWidth.scss
index d8464a365c8..098ac8addaf 100644
--- 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;
}
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/components/message-bar/message-bar.scss b/packages/core/src/components/message-bar/message-bar.scss
index a23ae24ee1f..befb6bd72d9 100644
--- 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
index c2b6a061712..92fc66492ac 100644
--- a/packages/core/src/tests/message-bar/basic/index.html
+++ b/packages/core/src/tests/message-bar/basic/index.html
@@ -14,13 +14,15 @@
Stencil Component Starter
- Message text
- Message text
-
+
+
Message text
+
Message text
+
Message text Action
+