fix(editor): Fix design system component props (#8923)

n8n-io · Mar 20, 2024 · 7176cd1 · 7176cd1
1 parent d7bfd45
commit 7176cd1
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git 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/...stem/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap b/...stem/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
@@ -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
@@ -23,7 +23,7 @@ const THEME = [
 interface BadgeProps {
 	theme?: (typeof THEME)[number];
 	size?: TextSize;
-	bold: boolean;
+	bold?: boolean;
 }
 
 defineOptions({ name: 'N8nBadge' });