admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues 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
11 changed files with 49 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;