From fcf1370d621a2e89bffe016e18a0b9a17511d068 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Fri, 9 Sep 2022 17:23:30 +0200 Subject: [PATCH 01/12] feat(design-system): button as square shape --- .../components/N8nButton/Button.stories.ts | 6 +++++ .../src/components/N8nButton/Button.vue | 27 ++++++++++++++----- .../N8nButton/__tests__/Button.spec.ts | 13 +++++++++ .../__snapshots__/Button.spec.ts.snap | 13 ++++++--- 4 files changed, 49 insertions(+), 10 deletions(-) diff --git a/packages/design-system/src/components/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts index aec891007cc21..29ef13410b964 100644 --- a/packages/design-system/src/components/N8nButton/Button.stories.ts +++ b/packages/design-system/src/components/N8nButton/Button.stories.ts @@ -165,3 +165,9 @@ WithIcon.args = { icon: 'plus-circle', }; +export const Square = AllColorsAndSizesTemplate.bind({}); +Square.args = { + icon: 'plus-circle', + square: true, +}; + diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue index 05033ba02a788..d6e53c87adc14 100644 --- a/packages/design-system/src/components/N8nButton/Button.vue +++ b/packages/design-system/src/components/N8nButton/Button.vue @@ -75,6 +75,10 @@ export default Vue.extend({ validator: (value: string): boolean => ['left', 'right'].includes(value), }, + square: { + type: Boolean, + default: false, + }, }, components: { N8nSpinner, @@ -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']}` : ''}`; }, }, }); @@ -258,7 +263,8 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); --button-padding-horizontal: var(--spacing-2xs); --button-font-size: var(--font-size-2xs); - &.icon-button { + &.icon-button, + &.square { height: 22px; width: 22px; } @@ -269,7 +275,8 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); --button-padding-horizontal: var(--spacing-xs); --button-font-size: var(--font-size-2xs); - &.icon-button { + &.icon-button, + &.square { height: 26px; width: 26px; } @@ -280,14 +287,16 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); --button-padding-horizontal: var(--spacing-xs); --button-font-size: var(--font-size-2xs); - &.icon-button { + &.icon-button, + &.square { height: 32px; width: 32px; } } .large { - &.icon-button { + &.icon-button, + &.square { height: 42px; width: 42px; } @@ -298,7 +307,8 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); --button-padding-horizontal: var(--spacing-s); --button-font-size: var(--font-size-m); - &.icon-button { + &.icon-button, + &.square { height: 46px; width: 46px; } @@ -444,4 +454,9 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); .float-right { float: right; } + +.square { + justify-content: center; + align-items: center; +} 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 e86cc1f3edbaa..fa593615487b1 100644 --- a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts +++ b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts @@ -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: '1', + }, + stubs, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); + }); }); describe('overrides', () => { 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 33ec8d07ad964..dc4b220c4e189 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,12 +1,17 @@ // Vitest Snapshot v1 -exports[`components > N8nButton > overrides > should render correctly 1`] = `""`; +exports[`components > N8nButton > overrides > should render correctly 1`] = `""`; -exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; +exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; -exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; +exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; + +exports[`components > N8nButton > props > square > should render square button 1`] = ` +"" +`; exports[`components > N8nButton > should render correctly 1`] = ` -"" `; From 386964c148c4b9881c098f0ee267220c31702d72 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Fri, 9 Sep 2022 17:28:26 +0200 Subject: [PATCH 02/12] refactor(editor-ui): drop n8n-square-button in favor of n8n-button --- packages/editor-ui/src/components/ValueSurvey.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue index 4d909db4eb3d1..df9dc2d895f11 100644 --- a/packages/editor-ui/src/components/ValueSurvey.vue +++ b/packages/editor-ui/src/components/ValueSurvey.vue @@ -19,9 +19,10 @@
-
From 9d5ac1ec67f9a899d25e1757cce9b8a4755ba2e1 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Fri, 9 Sep 2022 17:31:27 +0200 Subject: [PATCH 03/12] refactor(design-system): remove obsolete n8n-square-button --- .../N8nSquareButton/SquareButton.stories.js | 27 ------------ .../N8nSquareButton/SquareButton.vue | 44 ------------------- .../src/components/N8nSquareButton/index.ts | 3 -- .../src/plugins/n8nComponents.ts | 2 - 4 files changed, 76 deletions(-) delete mode 100644 packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js delete mode 100644 packages/design-system/src/components/N8nSquareButton/SquareButton.vue delete mode 100644 packages/design-system/src/components/N8nSquareButton/index.ts diff --git a/packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js b/packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js deleted file mode 100644 index 0adf7824c8b04..0000000000000 --- a/packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import N8nSquareButton from './SquareButton.vue'; -import { action } from '@storybook/addon-actions'; - -export default { - title: 'Atoms/SquareButton', - component: N8nSquareButton, - argTypes: { - label: { - control: 'text', - }, - }, -}; - -const methods = { - onClick: action('click'), -}; - -const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { - N8nSquareButton, - }, - template: '', - methods, -}); - -export const SquareButton = Template.bind({}); diff --git a/packages/design-system/src/components/N8nSquareButton/SquareButton.vue b/packages/design-system/src/components/N8nSquareButton/SquareButton.vue deleted file mode 100644 index 0cd591edb14d5..0000000000000 --- a/packages/design-system/src/components/N8nSquareButton/SquareButton.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/packages/design-system/src/components/N8nSquareButton/index.ts b/packages/design-system/src/components/N8nSquareButton/index.ts deleted file mode 100644 index cf1617cefe702..0000000000000 --- a/packages/design-system/src/components/N8nSquareButton/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import N8nSquareButton from './SquareButton.vue'; - -export default N8nSquareButton; diff --git a/packages/design-system/src/plugins/n8nComponents.ts b/packages/design-system/src/plugins/n8nComponents.ts index a5684d13b7adb..1f18a04114c6b 100644 --- a/packages/design-system/src/plugins/n8nComponents.ts +++ b/packages/design-system/src/plugins/n8nComponents.ts @@ -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'; @@ -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); From 9660a980ed32411f0bda56ea4ec08968d67bf1b2 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Mon, 12 Sep 2022 22:10:44 +0200 Subject: [PATCH 04/12] fix(design-system): icon only square button icon position --- .../design-system/src/components/N8nButton/Button.vue | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue index d6e53c87adc14..81be5079be8f8 100644 --- a/packages/design-system/src/components/N8nButton/Button.vue +++ b/packages/design-system/src/components/N8nButton/Button.vue @@ -438,6 +438,10 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); .icon { display: inline-flex; + &.square { + justify-content: center; + } + svg { display: block; } @@ -454,9 +458,4 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); .float-right { float: right; } - -.square { - justify-content: center; - align-items: center; -} From 786f6dedaf4958a1765fe8ed1d89941ac465092f Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Mon, 12 Sep 2022 22:16:27 +0200 Subject: [PATCH 05/12] fix(design-system): icon only square button icon position --- packages/design-system/src/components/N8nButton/Button.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue index 81be5079be8f8..61a1dfea3df0b 100644 --- a/packages/design-system/src/components/N8nButton/Button.vue +++ b/packages/design-system/src/components/N8nButton/Button.vue @@ -438,7 +438,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); .icon { display: inline-flex; - &.square { + &:not(.text) { justify-content: center; } From 892b08f7b2c87d0b47316e687827add9e21ddf10 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Mon, 12 Sep 2022 22:30:35 +0200 Subject: [PATCH 06/12] chore(design-system): update button test snapshot --- .../__tests__/__snapshots__/Button.spec.ts.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 dc4b220c4e189..1598a13806e69 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,17 +1,17 @@ // Vitest Snapshot v1 -exports[`components > N8nButton > overrides > should render correctly 1`] = `""`; +exports[`components > N8nButton > overrides > should render correctly 1`] = `""`; -exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; +exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; -exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; +exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; exports[`components > N8nButton > props > square > should render square button 1`] = ` -"" `; exports[`components > N8nButton > should render correctly 1`] = ` -"" `; From b9d6f0f427e0685449fd39b03e8c5b770cec928c Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Mon, 12 Sep 2022 22:57:47 +0200 Subject: [PATCH 07/12] fix(design-system): overriding default square button styles --- .../editor-ui/src/components/ValueSurvey.vue | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue index df9dc2d895f11..9aa8b2d62a923 100644 --- a/packages/editor-ui/src/components/ValueSurvey.vue +++ b/packages/editor-ui/src/components/ValueSurvey.vue @@ -20,6 +20,7 @@
span { + color: var(--color-primary); + } + } + + > span { + font-size: var(--font-size-s); + font-weight: var(--font-weight-bold); + line-height: var(--font-line-height-loose); + color: var(--color-background-dark); + } +} + .container { margin: 0 8px; From 17550539555429a1952947cb10a9ca063372e461 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Tue, 13 Sep 2022 11:40:33 +0200 Subject: [PATCH 08/12] fix(editor-ui): using tertiary button variant in survey without local style overrides --- .../editor-ui/src/components/ValueSurvey.vue | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue index 9aa8b2d62a923..084ba0479e08a 100644 --- a/packages/editor-ui/src/components/ValueSurvey.vue +++ b/packages/editor-ui/src/components/ValueSurvey.vue @@ -20,7 +20,7 @@
span { - color: var(--color-primary); - } - } - - > span { - font-size: var(--font-size-s); - font-weight: var(--font-weight-bold); - line-height: var(--font-line-height-loose); - color: var(--color-background-dark); - } -} - .container { margin: 0 8px; From 3fb68fbad82fc7ee00fe26d02786a43c25a2a97b Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Tue, 13 Sep 2022 18:47:07 +0200 Subject: [PATCH 09/12] refactor(design-system): simplifying and partially merging icon-button and button --- .../components/N8nButton/Button.stories.ts | 2 +- .../src/components/N8nButton/Button.vue | 10 +----- .../N8nButton/__tests__/Button.spec.ts | 2 +- .../__snapshots__/Button.spec.ts.snap | 12 +++---- .../N8nIconButton/IconButton.stories.ts | 6 ++-- .../components/N8nIconButton/IconButton.vue | 36 +------------------ 6 files changed, 13 insertions(+), 55 deletions(-) diff --git a/packages/design-system/src/components/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts index 29ef13410b964..c56532d98a92c 100644 --- a/packages/design-system/src/components/N8nButton/Button.stories.ts +++ b/packages/design-system/src/components/N8nButton/Button.stories.ts @@ -167,7 +167,7 @@ WithIcon.args = { export const Square = AllColorsAndSizesTemplate.bind({}); Square.args = { - icon: 'plus-circle', + label: '48', square: true, }; diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue index 61a1dfea3df0b..0ce466077909a 100644 --- a/packages/design-system/src/components/N8nButton/Button.vue +++ b/packages/design-system/src/components/N8nButton/Button.vue @@ -263,7 +263,6 @@ $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; @@ -275,7 +274,6 @@ $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; @@ -287,7 +285,6 @@ $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: 32px; width: 32px; @@ -295,7 +292,6 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); } .large { - &.icon-button, &.square { height: 42px; width: 42px; @@ -307,7 +303,6 @@ $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; @@ -437,10 +432,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); .icon { display: inline-flex; - - &:not(.text) { - justify-content: center; - } + justify-content: center; svg { display: block; 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 fa593615487b1..050609656e83b 100644 --- a/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts +++ b/packages/design-system/src/components/N8nButton/__tests__/Button.spec.ts @@ -49,7 +49,7 @@ describe('components', () => { const wrapper = render(N8nButton, { props: { square: true, - label: '1', + label: '48', }, stubs, }); 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 1598a13806e69..c3671709d0572 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,17 +1,17 @@ // Vitest Snapshot v1 -exports[`components > N8nButton > overrides > should render correctly 1`] = `""`; +exports[`components > N8nButton > overrides > should render correctly 1`] = `""`; -exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; +exports[`components > N8nButton > props > icon > should render icon button 1`] = `""`; -exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; +exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `""`; exports[`components > N8nButton > props > square > should render square button 1`] = ` -"" +"" `; exports[`components > N8nButton > should render correctly 1`] = ` -"" `; diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts index a61c06bcc65e9..cf442a5c388c1 100644 --- a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts +++ b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts @@ -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({}); diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue index a5ffc9625638f..22421dcb071a0 100644 --- a/packages/design-system/src/components/N8nIconButton/IconButton.vue +++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue @@ -1,6 +1,6 @@