From ec2c55211c61d9bc4e68c876417b071c6a6b8535 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Thu, 15 Sep 2022 11:41:12 +0200 Subject: [PATCH] refactor(design-system): merge n8n square button into n8n button (#4075) * feat(design-system): button as square shape * refactor(editor-ui): drop n8n-square-button in favor of n8n-button * refactor(design-system): remove obsolete n8n-square-button * fix(design-system): icon only square button icon position * fix(design-system): icon only square button icon position * chore(design-system): update button test snapshot * fix(design-system): overriding default square button styles * fix(editor-ui): using tertiary button variant in survey without local style overrides * refactor(design-system): simplifying and partially merging icon-button and button * fix(design-system): remove unused prop from icon-button * fix(design-system): square button should have the old dimensions * fix(design-system): square button update test snapshots --- .../components/N8nButton/Button.stories.ts | 6 +++ .../src/components/N8nButton/Button.vue | 22 ++++++---- .../N8nButton/__tests__/Button.spec.ts | 13 ++++++ .../__snapshots__/Button.spec.ts.snap | 13 ++++-- .../N8nIconButton/IconButton.stories.ts | 6 +-- .../components/N8nIconButton/IconButton.vue | 40 +---------------- .../N8nSquareButton/SquareButton.stories.js | 27 ------------ .../N8nSquareButton/SquareButton.vue | 44 ------------------- .../src/components/N8nSquareButton/index.ts | 3 -- .../src/plugins/n8nComponents.ts | 2 - .../editor-ui/src/components/ValueSurvey.vue | 4 +- 11 files changed, 49 insertions(+), 131 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/N8nButton/Button.stories.ts b/packages/design-system/src/components/N8nButton/Button.stories.ts index aec891007c..c56532d98a 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 = { + 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 05033ba02a..593389d5f7 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,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; } @@ -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; } @@ -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; } @@ -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; } @@ -427,6 +432,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0); .icon { display: inline-flex; + 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 e86cc1f3ed..050609656e 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: '48', + }, + 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 33ec8d07ad..a89fa3219a 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`] = ` -"" `; diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts b/packages/design-system/src/components/N8nIconButton/IconButton.stories.ts index a61c06bcc6..cf442a5c38 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 a5ffc96256..9e62b1259b 100644 --- a/packages/design-system/src/components/N8nIconButton/IconButton.vue +++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue @@ -1,6 +1,6 @@