From 7176cd1407e028ba8c543179b128c7e2ac9c0369 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 20 Mar 2024 05:10:39 +0100
Subject: [PATCH] fix(editor): Fix design system component props (#8923)

---
 .../components/N8nActionDropdown/ActionDropdown.vue    | 10 +++++++---
 .../__snapshots__/ActionDropdown.spec.ts.snap          |  4 ++--
 .../design-system/src/components/N8nAvatar/Avatar.vue  |  4 ++--
 .../design-system/src/components/N8nBadge/Badge.vue    |  2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index e39d980c9c..063b228a35 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -4,7 +4,7 @@
 			ref="elementDropdown"
 			:placement="placement"
 			:trigger="trigger"
-			:popper-class="{ [$style.shadow]: true, [$style.hideArrow]: hideArrow }"
+			:popper-class="popperClass"
 			@command="onSelect"
 			@visible-change="onVisibleChange"
 		>
@@ -57,7 +57,7 @@
 // by Element UI dropdown component).
 // It can be used in different parts of editor UI while ActionToggle
 // is designed to be used in card components.
-import { ref, useCssModule, useAttrs } from 'vue';
+import { ref, useCssModule, useAttrs, computed } from 'vue';
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import N8nIcon from '../N8nIcon';
 import { N8nKeyboardShortcut } from '../N8nKeyboardShortcut';
@@ -86,7 +86,7 @@ interface ActionDropdownProps {
 	hideArrow?: boolean;
 }
 
-withDefaults(defineProps<ActionDropdownProps>(), {
+const props = withDefaults(defineProps<ActionDropdownProps>(), {
 	placement: 'bottom',
 	activatorIcon: 'ellipsis-h',
 	activatorSize: 'medium',
@@ -111,6 +111,10 @@ const getItemClasses = (item: IActionDropdownItem): Record<string, boolean> => {
 const $emit = defineEmits(['select', 'visibleChange']);
 const elementDropdown = ref<InstanceType<typeof ElDropdown>>();
 
+const popperClass = computed(
+	() => `${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''}`,
+);
+
 const onSelect = (action: string) => $emit('select', action);
 const onVisibleChange = (open: boolean) => $emit('visibleChange', open);
 
diff --git a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
index e7f1352c52..162c172de4 100644
--- a/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
+++ b/packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
 "<div class="action-dropdown-container actionDropdownContainer">
-  <el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="[object Object]" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
+  <el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
 </div>"
 `;
 
 exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
 "<div class="action-dropdown-container actionDropdownContainer" teleported="false">
-  <el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="[object Object]" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
+  <el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
 </div>"
 `;
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index c2252c6994..933b55343e 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -19,8 +19,8 @@ import Avatar from 'vue-boring-avatars';
 interface AvatarProps {
 	firstName: string;
 	lastName: string;
-	size: string;
-	colors: string[];
+	size?: string;
+	colors?: string[];
 }
 
 defineOptions({ name: 'N8nAvatar' });
diff --git a/packages/design-system/src/components/N8nBadge/Badge.vue b/packages/design-system/src/components/N8nBadge/Badge.vue
index d402d29589..c2d2c68c48 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.vue
+++ b/packages/design-system/src/components/N8nBadge/Badge.vue
@@ -23,7 +23,7 @@ const THEME = [
 interface BadgeProps {
 	theme?: (typeof THEME)[number];
 	size?: TextSize;
-	bold: boolean;
+	bold?: boolean;
 }
 
 defineOptions({ name: 'N8nBadge' });