fix(editor): Fixing tag style on canvas (#21957)

packages/frontend/editor-ui/src/features/shared/tags/components/TagsContainer.vue

@@ -7,21 +7,20 @@ import IntersectionObserved from '@/app/components/IntersectionObserved.vue';
 import { createEventBus } from '@n8n/utils/event-bus';
 import debounce from 'lodash/debounce';
 
-import { ElTag } from 'element-plus';
+import { N8nTag } from '@n8n/design-system';
+
 interface TagsContainerProps {
 	tagIds: string[];
 	tagsById: { [id: string]: ITag };
 	limit?: number;
 	clickable?: boolean;
 	responsive?: boolean;
-	hoverable?: boolean;
 }
 
 const props = withDefaults(defineProps<TagsContainerProps>(), {
 	limit: 20,
 	clickable: false,
 	responsive: false,
-	hoverable: false,
 });
 
 const emit = defineEmits<{
@@ -80,8 +79,8 @@ const tags = computed(() => {
 
 // Methods
 const setMaxWidth = () => {
-	const container = tagsContainer.value?.$el as HTMLElement;
-	const parent = container?.parentNode as HTMLElement;
+	const container = (tagsContainer.value as { $el?: HTMLElement })?.$el;
+	const parent = container?.parentNode as HTMLElement | null;
 
 	if (parent) {
 		maxWidth.value = 0;
@@ -137,16 +136,13 @@ onBeforeUnmount(() => {
 				:class="{ clickable: !tag.hidden }"
 				@click="(e) => onClick(e, tag)"
 			>
-				<ElTag
+				<N8nTag
 					v-if="tag.isCount"
 					:title="tag.title"
-					type="info"
-					size="small"
+					:text="tag.name"
+					:clickable="false"
 					class="count-container"
-					:disable-transitions="true"
-				>
-					{{ tag.name }}
-				</ElTag>
+				/>
 				<IntersectionObserved
 					v-else
 					:class="{ hideTag: tag.hidden }"
@@ -154,15 +150,7 @@ onBeforeUnmount(() => {
 					:enabled="responsive"
 					:event-bus="intersectionEventBus"
 				>
-					<ElTag
-						:title="tag.name"
-						type="info"
-						size="small"
-						:class="{ hoverable }"
-						:disable-transitions="true"
-					>
-						{{ tag.name }}
-					</ElTag>
+					<N8nTag :title="tag.name" :text="tag.name" :clickable="clickable" />
 				</IntersectionObserved>
 			</span>
 		</span>
@@ -175,23 +163,13 @@ onBeforeUnmount(() => {
 	max-width: 300px;
 }
 
-.tags {
-	display: block;
-	white-space: nowrap;
-	overflow: hidden;
-	max-width: 100%;
-
-	> span {
-		padding-right: 4px; // why not margin? for space between tags to be clickable
-	}
-}
-
 .hideTag {
 	visibility: hidden;
 }
 
-.el-tag.hoverable:hover {
-	border-color: $color-primary;
+.tags {
+	display: flex;
+	gap: var(--spacing--4xs);
 }
 
 .count-container {

packages/frontend/editor-ui/src/features/shared/tags/components/TagsDropdown.vue

@@ -9,6 +9,7 @@ import { v4 as uuid } from 'uuid';
 import { useToast } from '@/app/composables/useToast';
 
 import { N8nIcon, N8nOption, N8nSelect } from '@n8n/design-system';
+
 interface TagsDropdownProps {
 	placeholder: string;
 	modelValue: string[];
@@ -286,17 +287,24 @@ onClickOutside(
 
 	.el-tag,
 	.el-tag.el-tag--info {
-		padding: var(--spacing--5xs) var(--spacing--4xs);
-		color: var(--color--text);
-		background-color: var(--color--background);
-		border-radius: var(--radius);
-		font-size: var(--font-size--2xs);
-		border: 0;
+		height: var(--tag--height);
+		padding: var(--tag--padding);
+		line-height: var(--tag--line-height);
+		color: var(--tag--color--text);
+		background-color: var(--tag--color--background);
+		border: 1px solid var(--tag--border-color);
+		border-radius: var(--tag--radius);
+		font-size: var(--tag--font-size);
 
 		.el-tag__close {
 			max-height: 14px;
 			max-width: 14px;
 			line-height: 14px;
+
+			&:hover {
+				background-color: transparent !important;
+				color: var(--color--primary--shade-1);
+			}
 		}
 	}
 }

packages/frontend/editor-ui/src/features/shared/tags/components/WorkflowTagsContainer.vue

@@ -9,7 +9,6 @@ interface Props {
 	limit?: number;
 	clickable?: boolean;
 	responsive?: boolean;
-	hoverable?: boolean;
 }
 
 defineProps<Props>();
@@ -34,7 +33,6 @@ function onClick(tagId: string) {
 		:limit="limit"
 		:clickable="clickable"
 		:responsive="responsive"
-		:hoverable="hoverable"
 		@click="onClick"
 	/>
 </template>