refactor(editor): Convert Tooltip to composition api (#10701)

n8n-io · Sep 10, 2024 · 6ecf84f · 6ecf84f
1 parent 56ebeed
commit 6ecf84f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 92 deletions.
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.ts b/packages/design-system/src/components/N8nInfoTip/InfoTip.stories.ts
@@ -17,9 +17,3 @@ const Template: StoryFn = (args, { argTypes }) => ({
 });
 
 export const Note = Template.bind({});
-
-export const Tooltip = Template.bind({});
-Tooltip.args = {
-	type: 'tooltip',
-	tooltipPlacement: 'right',
-};
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -2,22 +2,18 @@
 import { computed } from 'vue';
 import type { Placement } from 'element-plus';
 import N8nIcon from '../N8nIcon';
-import N8nTooltip from '../N8nTooltip';
 
 const THEME = ['info', 'info-light', 'warning', 'danger', 'success'] as const;
-const TYPE = ['note', 'tooltip'] as const;
 
 interface InfoTipProps {
 	theme?: (typeof THEME)[number];
-	type?: (typeof TYPE)[number];
 	bold?: boolean;
 	tooltipPlacement?: Placement;
 }
 
 defineOptions({ name: 'N8nInfoTip' });
 const props = withDefaults(defineProps<InfoTipProps>(), {
 	theme: 'info',
-	type: 'note',
 	bold: true,
 	tooltipPlacement: 'top',
 });
@@ -62,28 +58,13 @@ const iconData = computed((): { icon: string; color: string } => {
 	<div
 		:class="{
 			'n8n-info-tip': true,
+			[$style.note]: true,
 			[$style.infoTip]: true,
 			[$style[theme]]: true,
-			[$style[type]]: true,
 			[$style.bold]: bold,
 		}"
 	>
-		<N8nTooltip
-			v-if="type === 'tooltip'"
-			:placement="tooltipPlacement"
-			:popper-class="$style.tooltipPopper"
-			:disabled="type !== 'tooltip'"
-		>
-			<span :class="$style.iconText" :style="{ color: iconData.color }">
-				<N8nIcon :icon="iconData.icon" />
-			</span>
-			<template #content>
-				<span>
-					<slot />
-				</span>
-			</template>
-		</N8nTooltip>
-		<span v-else :class="$style.iconText">
+		<span :class="$style.iconText">
 			<N8nIcon :icon="iconData.icon" />
 			<span>
 				<slot />
@@ -121,11 +102,6 @@ const iconData = computed((): { icon: string; color: string } => {
 	}
 }
 
-.tooltipPopper {
-	composes: base;
-	display: inline-flex;
-}
-
 .iconText {
 	display: inline-flex;
 	align-items: flex-start;

diff --git a/packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts b/packages/design-system/src/components/N8nInfoTip/__tests__/InfoTip.spec.ts
@@ -16,17 +16,4 @@ describe('N8nInfoTip', () => {
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});
-
-	it('should render correctly as tooltip', () => {
-		const wrapper = render(N8nInfoTip, {
-			slots,
-			props: {
-				type: 'tooltip',
-			},
-			global: {
-				stubs,
-			},
-		});
-		expect(wrapper.html()).toMatchSnapshot();
-	});
 });
diff --git a/...ages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap b/...ages/design-system/src/components/N8nInfoTip/__tests__/__snapshots__/InfoTip.spec.ts.snap
@@ -1,9 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip infoTip info note bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
-
-exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
-"<div class="n8n-info-tip infoTip info tooltip bold">
-  <n8n-tooltip-stub popperclass="tooltipPopper" role="tooltip" showafter="0" hideafter="200" autoclose="0" boundariespadding="0" gpuacceleration="true" offset="12" placement="top" popperoptions="[object Object]" strategy="absolute" effect="dark" enterable="true" pure="false" focusonshow="false" trapping="false" stoppoppermouseevent="true" virtualtriggering="false" content="" rawcontent="false" persistent="false" teleported="true" disabled="false" open="false" trigger="hover" triggerkeys="Enter,Space" arrowoffset="5" showarrow="true" justifybuttons="flex-end" buttons="" class=""></n8n-tooltip-stub>
-</div>"
-`;
+exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip note infoTip info bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,62 +1,56 @@
-<script lang="ts">
+<script setup lang="ts">
 import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
 import { ElTooltip } from 'element-plus';
 import type { IN8nButton } from 'n8n-design-system/types';
 import N8nButton from '../N8nButton';
 
-export default defineComponent({
-	name: 'N8nTooltip',
-	components: {
-		ElTooltip,
-		N8nButton,
+export type Justify =
+	| 'flex-start'
+	| 'flex-end'
+	| 'start'
+	| 'end'
+	| 'left'
+	| 'right'
+	| 'center'
+	| 'space-between'
+	| 'space-around'
+	| 'space-evenly';
+
+const props = defineProps({
+	...ElTooltip.props,
+	content: {
+		type: String,
+		default: '',
 	},
-	inheritAttrs: false,
-	props: {
-		...ElTooltip.props,
-		content: {
-			type: String,
-			default: '',
-		},
-		justifyButtons: {
-			type: String,
-			default: 'flex-end',
-			validator: (value: string): boolean =>
-				[
-					'flex-start',
-					'flex-end',
-					'start',
-					'end',
-					'left',
-					'right',
-					'center',
-					'space-between',
-					'space-around',
-					'space-evenly',
-				].includes(value),
-		},
-		buttons: {
-			type: Array as PropType<IN8nButton[]>,
-			default: () => [],
-		},
+	justifyButtons: {
+		type: String as PropType<Justify>,
+		default: 'flex-end',
+	},
+	buttons: {
+		type: Array as PropType<IN8nButton[]>,
+		default: () => [],
 	},
 });
+
+defineOptions({
+	inheritAttrs: false,
+});
 </script>
 
 <template>
-	<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
+	<ElTooltip v-bind="{ ...props, ...$attrs }" :popper-class="props.popperClass ?? 'n8n-tooltip'">
 		<slot />
 		<template #content>
 			<slot name="content">
-				<div v-html="content"></div>
+				<div v-html="props.content"></div>
 			</slot>
 			<div
-				v-if="buttons.length"
+				v-if="props.buttons.length"
 				:class="$style.buttons"
-				:style="{ justifyContent: justifyButtons }"
+				:style="{ justifyContent: props.justifyButtons }"
 			>
 				<N8nButton
-					v-for="button in buttons"
+					v-for="button in props.buttons"
 					:key="button.attrs.label"
 					v-bind="{ ...button.attrs, ...button.listeners }"
 				/>