⚡ Removing unnecessary border using banner css instead of vue prop

n8n-io · Jun 6, 2024 · 22bae0f · 22bae0f
1 parent 811fcab
commit 22bae0f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -38,7 +38,6 @@ interface CalloutProps {
 	iconless?: boolean;
 	slim?: boolean;
 	roundCorners?: boolean;
-	onlyBottomBorder?: boolean;
 }
 
 defineOptions({ name: 'N8nCallout' });
@@ -54,7 +53,6 @@ const classes = computed(() => [
 	$style[props.theme],
 	props.slim ? $style.slim : '',
 	props.roundCorners ? $style.round : '',
-	props.onlyBottomBorder ? $style.onlyBottomBorder : '',
 ]);
 
 const getIcon = computed(
@@ -95,12 +93,6 @@ const getIconSize = computed<IconSize>(() => {
 	border-radius: var(--border-radius-base);
 }
 
-.onlyBottomBorder {
-	border-top: 0;
-	border-left: 0;
-	border-right: 0;
-}
-
 .messageSection {
 	display: flex;
 	align-items: center;

diff --git a/packages/editor-ui/src/components/banners/BaseBanner.vue b/packages/editor-ui/src/components/banners/BaseBanner.vue
@@ -36,7 +36,6 @@ async function onCloseClick() {
 		icon-size="medium"
 		:round-corners="false"
 		:data-test-id="`banners-${props.name}`"
-		:only-bottom-border="true"
 	>
 		<div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']">
 			<slot name="mainContent" />
@@ -72,4 +71,10 @@ async function onCloseClick() {
 	align-items: center;
 	gap: var(--spacing-l);
 }
+
+:global(.n8n-callout) {
+	border-top: 0;
+	border-left: 0;
+	border-right: 0;
+}
 </style>