mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-31 15:37:26 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Fix callout component border issue (no-changelog) (#11705)

Browse source 
Co-authored-by: Elias Meire <elias@meire.dev>
This commit is contained in:
Giulio Andreini 2024-11-14 14:25:17 +01:00 committed by GitHub
parent 1a783606b4
commit 61fac4f93f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/design-system/src/components/N8nCallout/Callout.vue
View file

@ -23,6 +23,7 @@ interface CalloutProps {
iconless?: boolean; iconless?: boolean;
slim?: boolean; slim?: boolean;
roundCorners?: boolean; roundCorners?: boolean;
onlyBottomBorder?: boolean;
} }
defineOptions({ name: 'N8nCallout' }); defineOptions({ name: 'N8nCallout' });
@ -38,6 +39,7 @@ const classes = computed(() => [
$style[props.theme], $style[props.theme],
props.slim ? $style.slim : '', props.slim ? $style.slim : '',
props.roundCorners ? $style.round : '', props.roundCorners ? $style.round : '',
props.onlyBottomBorder ? $style.onlyBottomBorder : '',
]); ]);
const getIcon = computed( const getIcon = computed(
@ -95,6 +97,12 @@ const getIconSize = computed<IconSize>(() => {
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
} }
.onlyBottomBorder {
border-top: 0;
border-left: 0;
border-right: 0;
}
.messageSection { .messageSection {
display: flex; display: flex;
align-items: center; align-items: center;

7
packages/editor-ui/src/components/banners/BaseBanner.vue
View file

@ -39,6 +39,7 @@ async function onCloseClick() {
icon-size="medium" icon-size="medium"
:round-corners="false" :round-corners="false"
:data-test-id="`banners-${props.name}`" :data-test-id="`banners-${props.name}`"
:only-bottom-border="true"
> >
<div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']"> <div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']">
<slot name="mainContent" /> <slot name="mainContent" />
@ -78,10 +79,4 @@ async function onCloseClick() {
align-items: center; align-items: center;
gap: var(--spacing-l); gap: var(--spacing-l);
} }
:global(.n8n-callout) {
border-top: 0;
border-left: 0;
border-right: 0;
}
</style> </style>

4
packages/editor-ui/src/components/banners/__snapshots__/V1Banner.test.ts.snap
View file

@ -3,7 +3,7 @@
exports[`V1 Banner > should render banner 1`] = ` exports[`V1 Banner > should render banner 1`] = `
<div> <div>
<div <div
class="n8n-callout callout warning callout v1container" class="n8n-callout callout warning onlyBottomBorder callout v1container"
data-test-id="banners-V1" data-test-id="banners-V1"
role="alert" role="alert"
> >
@ -104,7 +104,7 @@ exports[`V1 Banner > should render banner 1`] = `
exports[`V1 Banner > should render banner with dismiss call if user is owner 1`] = ` exports[`V1 Banner > should render banner with dismiss call if user is owner 1`] = `
<div> <div>
<div <div
class="n8n-callout callout warning callout v1container" class="n8n-callout callout warning onlyBottomBorder callout v1container"
data-test-id="banners-V1" data-test-id="banners-V1"
role="alert" role="alert"
> >