Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(design-system): merge n8n square button into n8n button #4075

Merged
merged 12 commits into from
Sep 15, 2022
Merged

refactor(design-system): merge n8n square button into n8n button #4075

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
fcf1370
feat(design-system): button as square shape
cstuncsik Sep 9, 2022
386964c
refactor(editor-ui): drop n8n-square-button in favor of n8n-button
cstuncsik Sep 9, 2022
9d5ac1e
refactor(design-system): remove obsolete n8n-square-button
cstuncsik Sep 9, 2022
9660a98
fix(design-system): icon only square button icon position
cstuncsik Sep 12, 2022
786f6de
fix(design-system): icon only square button icon position
cstuncsik Sep 12, 2022
892b08f
chore(design-system): update button test snapshot
cstuncsik Sep 12, 2022
b9d6f0f
fix(design-system): overriding default square button styles
cstuncsik Sep 12, 2022
1755053
fix(editor-ui): using tertiary button variant in survey without local…
cstuncsik Sep 13, 2022
3fb68fb
refactor(design-system): simplifying and partially merging icon-butto…
cstuncsik Sep 13, 2022
80b4d0a
fix(design-system): remove unused prop from icon-button
cstuncsik Sep 13, 2022
8beb514
fix(design-system): square button should have the old dimensions
cstuncsik Sep 15, 2022
c42f1ba
fix(design-system): square button update test snapshots
cstuncsik Sep 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/design-system/src/components/N8nButton/Button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,3 +165,9 @@ WithIcon.args = {
icon: 'plus-circle',
};

export const Square = AllColorsAndSizesTemplate.bind({});
Square.args = {
label: '48',
square: true,
};

22 changes: 14 additions & 8 deletions packages/design-system/src/components/N8nButton/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ export default Vue.extend({
validator: (value: string): boolean =>
['left', 'right'].includes(value),
},
square: {
type: Boolean,
default: false,
},
mutdmour marked this conversation as resolved.
Show resolved Hide resolved
},
components: {
N8nSpinner,
Expand All @@ -96,7 +100,8 @@ export default Vue.extend({
`${this.text ? ` ${this.$style['text']}` : ''}` +
`${this.disabled ? ` ${this.$style['disabled']}` : ''}` +
`${this.block ? ` ${this.$style['block']}` : ''}` +
`${this.icon || this.loading ? ` ${this.$style['icon']}` : ''}`;
`${this.icon || this.loading ? ` ${this.$style['icon']}` : ''}` +
`${this.square ? ` ${this.$style['square']}` : ''}`;
},
},
});
Expand Down Expand Up @@ -258,7 +263,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
--button-padding-horizontal: var(--spacing-2xs);
--button-font-size: var(--font-size-2xs);
&.icon-button {
&.square {
height: 22px;
width: 22px;
}
Expand All @@ -269,7 +274,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
--button-padding-horizontal: var(--spacing-xs);
--button-font-size: var(--font-size-2xs);
&.icon-button {
&.square {
height: 26px;
width: 26px;
}
Expand All @@ -280,14 +285,14 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
--button-padding-horizontal: var(--spacing-xs);
--button-font-size: var(--font-size-2xs);
&.icon-button {
height: 32px;
width: 32px;
&.square {
height: 30px;
width: 30px;
}
}
.large {
&.icon-button {
&.square {
height: 42px;
width: 42px;
}
Expand All @@ -298,7 +303,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
--button-padding-horizontal: var(--spacing-s);
--button-font-size: var(--font-size-m);
&.icon-button {
&.square {
height: 46px;
width: 46px;
}
Expand Down Expand Up @@ -427,6 +432,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
.icon {
display: inline-flex;
justify-content: center;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick - spacing

svg {
display: block;
Expand Down
13 changes: 13 additions & 0 deletions packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,19 @@ describe('components', () => {
expect(wrapper.html()).toMatchSnapshot();
});
});

describe('square', () => {
it('should render square button', () => {
const wrapper = render(N8nButton, {
props: {
square: true,
label: '48',
},
stubs,
});
expect(wrapper.html()).toMatchSnapshot();
});
});
});

describe('overrides', () => {
Expand Down
13 changes: 9 additions & 4 deletions packages/design-system/src/components/N8nButton/__tests__/__snapshots__/Button.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
// Vitest Snapshot v1

exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _secondary_cccce_170 _medium_cccce_254 _icon_cccce_239\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_cccce_239\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > overrides > should render correctly 1`] = `"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1r6l3_115 _secondary_1r6l3_170 _medium_1r6l3_254 _icon_1r6l3_383\\" icon=\\"plus-circle\\" type=\\"secondary\\"><span class=\\"_icon_1r6l3_383\\"><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_cccce_115 _primary_cccce_288 _medium_cccce_254 _icon_cccce_239\\"><span class=\\"_icon_cccce_239\\"><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_1r6l3_115 _primary_1r6l3_288 _medium_1r6l3_254 _icon_1r6l3_383\\"><span class=\\"_icon_1r6l3_383\\"><n8n-icon-stub icon=\\"plus-circle\\" size=\\"medium\\"></n8n-icon-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254 _loading_cccce_352 _icon_cccce_239\\"><span class=\\"_icon_cccce_239\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button disabled=\\"disabled\\" aria-disabled=\\"false\\" aria-busy=\\"true\\" aria-live=\\"polite\\" class=\\"button _button_1r6l3_115 _primary_1r6l3_288 _medium_1r6l3_254 _loading_1r6l3_352 _icon_1r6l3_383\\"><span class=\\"_icon_1r6l3_383\\"><n8n-spinner-stub size=\\"medium\\" type=\\"dots\\"></n8n-spinner-stub></span><span>Button</span></button>"`;
exports[`components > N8nButton > props > square > should render square button 1`] = `
"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1r6l3_115 _primary_1r6l3_288 _medium_1r6l3_254 _square_1r6l3_239\\">
<!----><span>48</span></button>"
`;
exports[`components > N8nButton > should render correctly 1`] = `
"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_cccce_115 _primary_cccce_288 _medium_cccce_254\\">
"<button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button _button_1r6l3_115 _primary_1r6l3_288 _medium_1r6l3_254\\">
<!----><span>Button</span></button>"
`;
6 changes: 3 additions & 3 deletions packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,11 @@ Outline.args = {
outline: true,
};

export const Light = ManyTemplate.bind({});
Light.args = {
export const Tertiary = ManyTemplate.bind({});
Tertiary.args = {
icon: 'plus',
title: 'my title',
type: 'light',
type: 'tertiary',
};

export const Text = ManyTemplate.bind({});
Expand Down
40 changes: 1 addition & 39 deletions packages/design-system/src/components/N8nIconButton/IconButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<n8n-button
:class="`icon-button ${$style['icon-button']} ${$style[size]}`"
square
v-bind="$props"
v-on="$listeners"
/>
Expand Down Expand Up @@ -54,44 +54,6 @@ export default Vue.extend({
validator: (value: string): boolean =>
['left', 'right'].includes(value),
},
circle: {
type: Boolean,
default: true,
},
},
});
</script>

<style lang="scss" module>
.icon-button {
padding: 0;
display: inline-flex;
justify-content: center;
align-items: center;
}
.mini {
height: 22px;
width: 22px;
}
.small {
height: 26px;
width: 26px;
}
.medium {
height: 30px;
width: 30px;
}
.large {
height: 42px;
width: 42px;
}
.xlarge {
height: 46px;
width: 46px;
}
</style>
27 changes: 0 additions & 27 deletions packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js
View file
Open in desktop

This file was deleted.

44 changes: 0 additions & 44 deletions packages/design-system/src/components/N8nSquareButton/SquareButton.vue
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/design-system/src/components/N8nSquareButton/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions packages/design-system/src/plugins/n8nComponents.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import N8nSelect from '../components/N8nSelect';
import N8nSpinner from '../components/N8nSpinner';
import N8nSticky from '../components/N8nSticky';
import N8nRadioButtons from '../components/N8nRadioButtons';
import N8nSquareButton from '../components/N8nSquareButton';
import N8nTags from '../components/N8nTags';
import N8nTabs from '../components/N8nTabs';
import N8nTag from '../components/N8nTag';
Expand Down Expand Up @@ -71,7 +70,6 @@ export default {
app.component('n8n-spinner', N8nSpinner);
app.component('n8n-sticky', N8nSticky);
app.component('n8n-radio-buttons', N8nRadioButtons);
app.component('n8n-square-button', N8nSquareButton);
app.component('n8n-tags', N8nTags);
app.component('n8n-tabs', N8nTabs);
app.component('n8n-tag', N8nTag);
Expand Down
4 changes: 3 additions & 1 deletion packages/editor-ui/src/components/ValueSurvey.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@
<div v-if="showButtons" :class="$style.wrapper">
<div :class="$style.buttons">
<div v-for="value in 11" :key="value - 1" :class="$style.container">
<n8n-square-button
<n8n-button
type="tertiary"
:label="(value - 1).toString()"
@click="selectSurveyValue((value - 1).toString())"
square
/>
</div>
</div>
Expand Down