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

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

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 {
+	&.square {
-		height: 32px;
+		height: 30px;
-		width: 32px;
+		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;

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', () => {

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`] = `"<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>"
 `;

packages/design-system/src/components/N8nIconButton/IconButton.stories.ts

@@ -67,11 +67,11 @@ Outline.args = {
 	outline: true,
 };
 
-export const Light = ManyTemplate.bind({});
+export const Tertiary = ManyTemplate.bind({});
-Light.args = {
+Tertiary.args = {
 	icon: 'plus',
 	title: 'my title',
-	type: 'light',
+	type: 'tertiary',
 };
 
 export const Text = ManyTemplate.bind({});

packages/design-system/src/components/N8nIconButton/IconButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<n8n-button
-		:class="`icon-button ${$style['icon-button']} ${$style[size]}`"
+		square
 		v-bind="$props"
 		v-on="$listeners"
 	/>
@@ -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>

packages/design-system/src/components/N8nSquareButton/SquareButton.stories.js

@@ -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: '<n8n-square-button v-bind="$props" @click="onClick"></n8n-square-button>',
-	methods,
-});
-
-export const SquareButton = Template.bind({});

packages/design-system/src/components/N8nSquareButton/SquareButton.vue

@@ -1,44 +0,0 @@
-<template>
-	<button :class="['n8n-square-button', $style.button]" v-on="$listeners">
-		<span :class="$style.text">{{label}}</span>
-	</button>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	name: 'n8n-square-button',
-	props: {
-		label: {
-			type: String,
-		},
-	},
-});
-</script>
-
-<style lang="scss" module>
-.button {
-	width: 28px;
-	height: 29px;
-	border-radius: var(--border-radius-base);
-	border: var(--color-background-xlight);
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	&:hover {
-		.text {
-			color: var(--color-primary) !important;
-		}
-	}
-}
-
-.text {
-	font-size: var(--font-size-s);
-	font-weight: var(--font-weight-bold);
-	line-height: var(--font-line-height-loose);
-	color: var(--color-background-dark);
-}
-</style>

packages/design-system/src/components/N8nSquareButton/index.ts

@@ -1,3 +0,0 @@
-import N8nSquareButton from './SquareButton.vue';
-
-export default N8nSquareButton;

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);

packages/editor-ui/src/components/ValueSurvey.vue

@@ -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>