From 9a7e7f61c7d047fa798342b49910a9164cf48b34 Mon Sep 17 00:00:00 2001 From: Stefan Popov <17688105+stefashkaa@users.noreply.github.com> Date: Tue, 26 Sep 2023 16:29:19 +0200 Subject: [PATCH 1/3] Improve group button --- src/components/Button/SButton/SButton.vue | 15 +++-- .../Button/SButtonGroup/SButtonGroup.vue | 25 ++++++- src/stories/SButton.stories.ts | 67 +++++++++++++++++-- src/styles/common.scss | 5 ++ src/styles/neumorphism/button.scss | 12 +++- 5 files changed, 109 insertions(+), 15 deletions(-) diff --git a/src/components/Button/SButton/SButton.vue b/src/components/Button/SButton/SButton.vue index baee08f9d..fbd53673d 100644 --- a/src/components/Button/SButton/SButton.vue +++ b/src/components/Button/SButton/SButton.vue @@ -111,8 +111,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design */ @Prop({ default: TooltipPlacement.TOP, type: String }) readonly tooltipPlacement!: PopoverPlacement - @Inject({ default: '', from: 'elForm' }) elForm!: ElForm - @Inject({ default: '', from: 'elFormItem' }) elFormItem!: ElFormItem + @Inject({ default: '', from: 'elForm' }) private elForm!: ElForm + @Inject({ default: '', from: 'elFormItem' }) private elFormItem!: ElFormItem + @Inject({ default: '', from: 'sButtonGroup' }) private sButtonGroup!: any private iconLeftOffset = 0 elementIcon = '' @@ -130,12 +131,16 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, Design if (this.designSystemClass) { cssClasses.push(this.designSystemClass) } - if ((this.elForm || this.elFormItem || {}).size) { - cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`) + const externalSize = (this.elForm || this.elFormItem || this.sButtonGroup || {}).size + if (externalSize) { + cssClasses.push(`s-${externalSize}`) } else if (this.isStandardSize) { cssClasses.push(`s-${this.size}`) } - if (this.isStandardBorderRadius) { + const externalRadius = (this.sButtonGroup || {}).borderRadius + if (externalRadius) { + cssClasses.push(`s-border-radius-${externalRadius}`) + } else if (this.isStandardBorderRadius) { cssClasses.push(`s-border-radius-${this.borderRadius}`) } if ((Object.values(ButtonTypes) as Array).includes(this.type)) { diff --git a/src/components/Button/SButtonGroup/SButtonGroup.vue b/src/components/Button/SButtonGroup/SButtonGroup.vue index 8216ab292..216282f5d 100644 --- a/src/components/Button/SButtonGroup/SButtonGroup.vue +++ b/src/components/Button/SButtonGroup/SButtonGroup.vue @@ -1,17 +1,36 @@ diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index f558c1b9d..1375acff9 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -282,11 +282,66 @@ export const withIcon16: Story = () => withIcon('refresh-16') export const withIcon24: Story = () => withIcon('arrows-swap-24') export const buttonGroup: Story = () => ({ - components: { SButton, SButtonGroup, SRow }, - template: ` - - Append - Remove - + components: { SButton, SButtonGroup, SRow, SCol }, + template: ` + + + Primary #1 + Primary #2 + Primary #3 + + + + + Primary Alt #1 + Primary Alt #2 + Primary Alt #3 + + + + + Secondary #1 + Secondary #2 + Secondary #3 + + + + + Secondary Alt #1 + Secondary Alt #2 + Secondary Alt #3 + + + + + Tertiary #1 + Tertiary #2 + Tertiary #3 + + + + + Primary #1 + Secondary #2 + Tertiary #3 + + + + + + + + + + + + + + + + + + + ` }) diff --git a/src/styles/common.scss b/src/styles/common.scss index a26936641..162d89c58 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -156,6 +156,11 @@ h6, display: flex; } +.s-flex-column { + display: flex; + flex-direction: column; +} + .s-bold { @include font-weight(700); } diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss index 3476f8c18..d929b9522 100644 --- a/src/styles/neumorphism/button.scss +++ b/src/styles/neumorphism/button.scss @@ -184,7 +184,7 @@ $neu-button-padding-mini: 3px 6px !default; } } -.el-button.neumorphic { +button.el-button.neumorphic { transition: $neu-button-transition; text-transform: uppercase; @@ -359,3 +359,13 @@ $neu-button-padding-mini: 3px 6px !default; } } } + +.neumorphic.el-button-group { + box-shadow: var(--s-shadow-element-pressed); + > button.el-button { + box-shadow: none; // :not(.s-action) :not(.s-tertiary) + } + > .el-button:not(:last-child) { + margin-right: 2px; + } +} From bd89cf4ebeb6b0fe8bc2237717dfcc2440f43acc Mon Sep 17 00:00:00 2001 From: Stefan Popov <17688105+stefashkaa@users.noreply.github.com> Date: Tue, 26 Sep 2023 16:29:39 +0200 Subject: [PATCH 2/3] Improve group button --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 281725375..b9feb38e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.47", + "version": "1.1.0", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" From 8d16e02a7c4a3b1a81974d2a77f1563566187911 Mon Sep 17 00:00:00 2001 From: Stefan Popov <17688105+stefashkaa@users.noreply.github.com> Date: Tue, 26 Sep 2023 20:44:25 +0200 Subject: [PATCH 3/3] Update button.scss --- src/styles/neumorphism/button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss index d929b9522..e00fda7fa 100644 --- a/src/styles/neumorphism/button.scss +++ b/src/styles/neumorphism/button.scss @@ -363,7 +363,7 @@ button.el-button.neumorphic { .neumorphic.el-button-group { box-shadow: var(--s-shadow-element-pressed); > button.el-button { - box-shadow: none; // :not(.s-action) :not(.s-tertiary) + box-shadow: none; } > .el-button:not(:last-child) { margin-right: 2px;