mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-23 10:32:17 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse source 
* fix(editor): Fix ElButton overrides

* fix(editor): Fix ElButton overrides
This commit is contained in:
Csaba Tuncsik 2023-03-03 11:48:45 +01:00 committed by GitHub
parent 523fa71705
commit 2eba050461
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
View file

@ -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();
});
});
});
});

8
packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
View file

@ -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>"`;

18
packages/design-system/src/components/N8nButton/overrides/ElButton.vue
View file

@ -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,
};
},
},