remove default margin from banner

shopware · Oct 2, 2024 · 28f5cb1 · 28f5cb1
1 parent cc754b9
commit 28f5cb1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/quiet-trains-impress.md b/.changeset/quiet-trains-impress.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+remove default margin of banner component, hidden by future flag
diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-banner" :class="classes" role="banner">
+  <div :class="classes" role="banner">
     <slot name="customIcon">
       <mt-icon
         v-if="!hideIcon"
@@ -36,6 +36,7 @@
 import { computed } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import { useFutureFlags } from "@/composables/useFutureFlags";
 
 const props = withDefaults(
   defineProps<{
@@ -68,9 +69,13 @@ const bannerIcon = computed(() => {
   return iconConfig[props.variant] || "solid-info-circle";
 });
 
+const future = useFutureFlags();
+
 const classes = computed(() => [
+  "mt-banner",
   `mt-banner--${props.variant}`,
   {
+    "mt-banner--future-remove-default-margin": future.removeDefaultMargin,
     "mt-banner--icon": !props.hideIcon,
     "mt-banner--closable": props.closable,
   },
@@ -97,6 +102,10 @@ const bodyClasses = computed(() => ({
   }
 }
 
+.mt-banner--future-remove-default-margin {
+  margin-block-end: 0;
+}
+
 .mt-banner__title {
   margin-block-end: 0;
 }