diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue index 9d866715c1..6a796ba32a 100644 --- a/packages/design-system/src/components/N8nCallout/Callout.vue +++ b/packages/design-system/src/components/N8nCallout/Callout.vue @@ -23,6 +23,7 @@ interface CalloutProps { iconless?: boolean; slim?: boolean; roundCorners?: boolean; + onlyBottomBorder?: boolean; } defineOptions({ name: 'N8nCallout' }); @@ -38,6 +39,7 @@ const classes = computed(() => [ $style[props.theme], props.slim ? $style.slim : '', props.roundCorners ? $style.round : '', + props.onlyBottomBorder ? $style.onlyBottomBorder : '', ]); const getIcon = computed( @@ -95,6 +97,12 @@ const getIconSize = computed(() => { 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 index 32af54cec0..bac58e74db 100644 --- a/packages/editor-ui/src/components/banners/BaseBanner.vue +++ b/packages/editor-ui/src/components/banners/BaseBanner.vue @@ -39,6 +39,7 @@ async function onCloseClick() { icon-size="medium" :round-corners="false" :data-test-id="`banners-${props.name}`" + :only-bottom-border="true" >
@@ -78,10 +79,4 @@ async function onCloseClick() { align-items: center; gap: var(--spacing-l); } - -:global(.n8n-callout) { - border-top: 0; - border-left: 0; - border-right: 0; -} diff --git a/packages/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap b/packages/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap index 41daf10517..29665752de 100644 --- a/packages/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap +++ b/packages/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap @@ -3,7 +3,7 @@ exports[`V1 Banner > should render banner 1`] = `