fix(editor): Fix ElButton overrides (#5605)

* fix(editor): Fix ElButton overrides * fix(editor): Fix ElButton overrides
n8n-io · Mar 3, 2023 · 2eba050 · 2eba050
1 parent 523fa71
commit 2eba050
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 4 deletions.
diff --git a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
@@ -59,7 +59,19 @@ describe('components', () => {
 		});
 
 		describe('overrides', () => {
-			it('should render correctly', () => {
+			it('should use default (`primary`) type when no type is given', () => {
+				const wrapper = render(ElButton, {
+					props: {
+						icon: 'plus-circle',
+					},
+					slots,
+					stubs,
+				});
+
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+
+			it('should use given (`secondary`) type', () => {
 				const wrapper = render(ElButton, {
 					props: {
 						icon: 'plus-circle',
@@ -71,6 +83,32 @@ describe('components', () => {
 
 				expect(wrapper.html()).toMatchSnapshot();
 			});
+
+			it('should render as `secondary` when `text` is given as type', () => {
+				const wrapper = render(ElButton, {
+					props: {
+						icon: 'plus-circle',
+						type: 'text',
+					},
+					slots,
+					stubs,
+				});
+
+				expect(wrapper.html()).toMatchSnapshot();
+			});
+
+			it('should render as `tertiary` when `info` is given as type', () => {
+				const wrapper = render(ElButton, {
+					props: {
+						icon: 'plus-circle',
+						type: 'info',
+					},
+					slots,
+					stubs,
+				});
+
+				expect(wrapper.html()).toMatchSnapshot();
+			});
 		});
 	});
 });
diff --git a/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap b/packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
@@ -1,6 +1,12 @@
 // Vitest Snapshot v1
 
-exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button secondary medium icon\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button secondary medium icon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+
+exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button tertiary medium icon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+
+exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium icon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
+
+exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button secondary medium icon\\" icon=\\"plus-circle\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 
 exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium icon\\"><span class=\\"icon\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
 

diff --git a/packages/design-system/src/components/N8nButton/overrides/ElButton.vue b/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
@@ -10,6 +10,7 @@ import N8nButton from '../Button.vue';
 
 const classToTypeMap = {
 	'btn--cancel': 'secondary',
+	'el-picker-panel__link-btn': 'secondary',
 };
 
 export default Vue.extend({
@@ -18,16 +19,29 @@ export default Vue.extend({
 	},
 	computed: {
 		attrs() {
-			let type = 'primary';
+			let type = this.$attrs.type || 'primary';
+
+			/* Element UI Button can have 'text' or 'info' type which is not supported by n8n-button
+			 so render it as 'secondary' or 'tertiary' */
+			if (type === 'text') {
+				type = 'secondary';
+			}
+
+			if (type === 'info') {
+				type = 'tertiary';
+			}
+
 			Object.entries(classToTypeMap).forEach(([className, mappedType]) => {
 				if (this.$refs.button && (this.$refs.button as Vue).$el.classList.contains(className)) {
 					type = mappedType;
 				}
 			});
 
+			delete this.$attrs.type;
+
 			return {
-				type,
 				...this.$attrs,
+				type,
 			};
 		},
 	},