chore(editor): Support new props in TabOptions (#17822)

Author: autologie

packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts

@@ -2,6 +2,7 @@ import { action } from '@storybook/addon-actions';
 import type { StoryFn } from '@storybook/vue3';
 
 import N8nTabs from './Tabs.vue';
+import type { TabOptions } from '../../types/tabs';
 
 export default {
 	title: 'Atoms/Tabs',
@@ -56,3 +57,71 @@ Example.args = {
 		},
 	],
 };
+
+const options: Array<TabOptions<string>> = [
+	{
+		label: 'First',
+		value: 'first',
+	},
+	{
+		label: 'Second',
+		value: 'second',
+	},
+	{
+		label: 'External Link',
+		value: 'external',
+		href: 'https://github.com/',
+	},
+	{
+		label: 'Danger',
+		value: 'danger',
+		variant: 'danger',
+		icon: 'triangle-alert',
+	},
+	{
+		label: 'Right Icon',
+		value: 'rightIcon',
+		icon: 'circle',
+		iconPosition: 'right',
+	},
+	{
+		value: 'iconOnly',
+		tooltip: 'Icon only tab',
+		icon: 'circle',
+	},
+	{
+		label: 'Notification',
+		value: 'notification',
+		notification: true,
+	},
+	{
+		label: 'Settings',
+		value: 'settings',
+		icon: 'cog',
+		align: 'right',
+	},
+];
+
+export const TabVariants = Template.bind({});
+TabVariants.args = {
+	options,
+};
+
+export const WithSmallSize = Template.bind({});
+WithSmallSize.args = {
+	options,
+	size: 'small',
+};
+
+export const WithModernVariant = Template.bind({});
+WithModernVariant.args = {
+	variant: 'modern',
+	options,
+};
+
+export const WithSmallAndModern = Template.bind({});
+WithSmallAndModern.args = {
+	variant: 'modern',
+	options,
+	size: 'small',
+};

packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue

@@ -92,43 +92,65 @@ const scrollRight = () => scroll(50);
 				:key="option.value"
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>
-				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
+				<N8nTooltip :disabled="!option.tooltip" placement="bottom" :show-after="100">
 					<template #content>
 						<div v-n8n-html="option.tooltip" @click="handleTooltipClick(option.value, $event)" />
 					</template>
 					<a
 						v-if="option.href"
 						target="_blank"
 						:href="option.href"
-						:class="[$style.link, $style.tab]"
+						rel="noopener noreferrer"
+						:class="[$style.link, $style.tab, option.label ? '' : $style.noText]"
 						@click="() => handleTabClick(option.value)"
 					>
 						<div>
 							{{ option.label }}
-							<span :class="$style.external">
-								<N8nIcon icon="external-link" size="small" />
-							</span>
+							<N8nIcon
+								:class="$style.external"
+								:icon="option.icon ?? 'external-link'"
+								size="small"
+							/>
 						</div>
 					</a>
 					<RouterLink
 						v-else-if="option.to"
 						:to="option.to"
-						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
+						:class="[
+							$style.tab,
+							{ [$style.activeTab]: modelValue === option.value, [$style.noText]: !option.label },
+						]"
 					>
 						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
 						<span v-if="option.label">{{ option.label }}</span>
 					</RouterLink>
 					<div
 						v-else
-						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
+						:class="{
+							[$style.tab]: true,
+							[$style.activeTab]: modelValue === option.value,
+							[$style.noText]: !option.label,
+							[$style.dangerTab]: option.variant === 'danger',
+						}"
 						:data-test-id="`tab-${option.value}`"
 						@click="() => handleTabClick(option.value)"
 					>
-						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
-						<span v-if="option.label" :class="$style.notificationContainer"
-							>{{ option.label }}
-							<div v-if="option.notification" :class="$style.notification"><div></div></div
-						></span>
+						<N8nIcon
+							v-if="option.icon && option.iconPosition !== 'right'"
+							:icon="option.icon"
+							:class="$style.icon"
+							size="small"
+						/>
+						<span v-if="option.label" :class="$style.notificationContainer">
+							{{ option.label }}
+							<div v-if="option.notification" :class="$style.notification" />
+						</span>
+						<N8nIcon
+							v-if="option.icon && option.iconPosition === 'right'"
+							:icon="option.icon"
+							:class="$style.icon"
+							size="small"
+						/>
 					</div>
 				</N8nTooltip>
 			</div>
@@ -170,7 +192,9 @@ const scrollRight = () => scroll(50);
 
 .tab {
 	--active-tab-border-width: 2px;
-	display: block;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4xs);
 	padding: 0 var(--spacing-s);
 	padding-bottom: calc(var(--spacing-2xs) + var(--active-tab-border-width));
 	font-size: var(--font-size-s);
@@ -223,6 +247,23 @@ const scrollRight = () => scroll(50);
 .external {
 	display: inline-block;
 	margin-left: var(--spacing-5xs);
+
+	.noText & {
+		display: block;
+		margin-left: 0;
+	}
+}
+
+.noText .icon {
+	display: block;
+}
+
+.dangerTab {
+	color: var(--color-danger);
+
+	&:hover {
+		color: var(--color-danger);
+	}
 }
 
 .button {
@@ -248,7 +289,9 @@ const scrollRight = () => scroll(50);
 	align-items: center;
 	justify-content: center;
 
-	div {
+	&:after {
+		content: '';
+		display: block;
 		height: 0.3em;
 		width: 0.3em;
 		background-color: var(--color-primary);

packages/frontend/@n8n/design-system/src/types/tabs.ts

@@ -6,6 +6,8 @@ export interface TabOptions<Value extends string | number> {
 	value: Value;
 	label?: string;
 	icon?: IconName;
+	iconPosition?: 'left' | 'right';
+	variant?: 'default' | 'danger';
 	href?: string;
 	tooltip?: string;
 	align?: 'left' | 'right';