diff --git a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
index 98f3212caf5bf..184307c24e5b2 100644
--- 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
index e4d683655fbff..8b8307fae003d 100644
--- 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`] = `""`;
+exports[`components > N8nButton > overrides > should render as \`secondary\` when \`text\` is given as type 1`] = `""`;
+
+exports[`components > N8nButton > overrides > should render as \`tertiary\` when \`info\` is given as type 1`] = `""`;
+
+exports[`components > N8nButton > overrides > should use default (\`primary\`) type when no type is given 1`] = `""`;
+
+exports[`components > N8nButton > overrides > should use given (\`secondary\`) type 1`] = `""`;
exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`;
diff --git a/packages/design-system/src/components/N8nButton/overrides/ElButton.vue b/packages/design-system/src/components/N8nButton/overrides/ElButton.vue
index b8c592606eb4c..57213098d86e3 100644
--- 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,
};
},
},