refactor(editor): Migrate header WorkflowDetails to composition api (no-changelog) (#9186)

packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -61,23 +61,13 @@ import { ref, useCssModule, useAttrs, computed } from 'vue';
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import N8nIcon from '../N8nIcon';
 import { N8nKeyboardShortcut } from '../N8nKeyboardShortcut';
-import type { KeyboardShortcut } from '../../types';
+import type { ActionDropdownItem } from '../../types';
 import type { IconSize } from '@/types/icon';
 
-interface IActionDropdownItem {
-	id: string;
-	label: string;
-	icon?: string;
-	divided?: boolean;
-	disabled?: boolean;
-	shortcut?: KeyboardShortcut;
-	customClass?: string;
-}
-
 const TRIGGER = ['click', 'hover'] as const;
 
 interface ActionDropdownProps {
-	items: IActionDropdownItem[];
+	items: ActionDropdownItem[];
 	placement?: Placement;
 	activatorIcon?: string;
 	activatorSize?: IconSize;
@@ -99,7 +89,7 @@ const $attrs = useAttrs();
 const testIdPrefix = $attrs['data-test-id'];
 
 const $style = useCssModule();
-const getItemClasses = (item: IActionDropdownItem): Record<string, boolean> => {
+const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
 	return {
 		[$style.itemContainer]: true,
 		[$style.disabled]: !!item.disabled,

packages/design-system/src/css/tag.scss

@@ -127,6 +127,7 @@
 	border-radius: var.$tag-border-radius;
 	box-sizing: border-box;
 	white-space: nowrap;
+	line-height: 1;
 
 	.el-icon.el-tag__close {
 		border-radius: 50%;
@@ -137,9 +138,8 @@
 		height: 16px;
 		width: 16px;
 		line-height: 16px;
-		vertical-align: middle;
-		top: -1px;
-		right: -5px;
+		margin-top: 0;
+		margin-right: 0;
 
 		&::before {
 			display: block;

packages/design-system/src/types/action-dropdown.ts

@@ -0,0 +1,11 @@
+import type { KeyboardShortcut } from '@/types/keyboardshortcut';
+
+export interface ActionDropdownItem {
+	id: string;
+	label: string;
+	icon?: string;
+	divided?: boolean;
+	disabled?: boolean;
+	shortcut?: KeyboardShortcut;
+	customClass?: string;
+}

packages/design-system/src/types/index.ts

@@ -1,3 +1,4 @@
+export * from './action-dropdown';
 export * from './button';
 export * from './datatable';
 export * from './form';