mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
* 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
This commit is contained in:
Csaba Tuncsik 2022-09-15 11:41:12 +02:00 committed by GitHub
parent 98ed207607
commit ec2c55211c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 49 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/design-system/src/components/N8nButton/Button.stories.ts
View file

@ -165,3 +165,9 @@ WithIcon.args = {
icon: 'plus-circle',
};
export const Square = AllColorsAndSizesTemplate.bind({});
Square.args = {
label: '48',
square: true,
};

22
packages/design-system/src/components/N8nButton/Button.vue
View file

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

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

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

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

@ -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
packages/design-system/src/components/N8nIconButton/IconButton.stories.ts
View file

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

40
packages/design-system/src/components/N8nIconButton/IconButton.vue
View file

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

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

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

44
packages/design-system/src/components/N8nSquareButton/SquareButton.vue
View file

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

3
packages/design-system/src/components/N8nSquareButton/index.ts
View file

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

2
packages/design-system/src/plugins/n8nComponents.ts
View file

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

4
packages/editor-ui/src/components/ValueSurvey.vue
View file

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