From 4467312ed1798b6d3883e636f6232ad20bab7b01 Mon Sep 17 00:00:00 2001 From: telegine Date: Tue, 26 Mar 2024 01:08:13 +0300 Subject: [PATCH 1/5] feat(Button): refactor to flex and center icons --- src/components/Button/Button.scss | 51 ++++++------------------------- 1 file changed, 9 insertions(+), 42 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 340faf2080..0f88ac56d8 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -12,24 +12,9 @@ $block: '.#{variables.$ns}button'; --_--border-color: currentColor; --_--focus-outline-color: var(--g-color-line-focus); --_--focus-outline-offset: 0; - --_--icon-space: calc( - var(--g-button-padding, var(--_--padding)) + var(--g-button-icon-size, var(--_--icon-size)) + - var(--g-button-icon-offset, var(--_--icon-offset)) - ); - --_--icon-position: calc( - var(--g-button-padding, var(--_--padding)) - - ( - var(--g-button-height, var(--_--height)) - var( - --g-button-icon-size, - var(--_--icon-size) - ) - ) / 2 - ); --_--font-size: var(--g-text-body-1-font-size); @include mixins.button-reset(); - display: inline-block; - position: relative; overflow: visible; box-sizing: border-box; height: var(--g-button-height, var(--_--height)); @@ -47,6 +32,10 @@ $block: '.#{variables.$ns}button'; transform 0.1s ease-out, color 0.15s linear; transform: scale(1); + display: inline-flex; + justify-content: center; + padding: 0 var(--g-button-padding, var(--_--padding)); + gap: var(--g-button-icon-offset, var(--_--icon-offset)); &::before { content: ''; @@ -266,49 +255,27 @@ $block: '.#{variables.$ns}button'; &__text { display: inline-block; white-space: nowrap; - padding: 0 var(--g-button-padding, var(--_--padding)); } &__icon { - display: inline-block; - position: relative; - width: var(--g-button-height, var(--_--height)); + display: inline-flex; + justify-content: center; + width: var(--g-button-height, var(--_--icon-size)); height: var(--g-button-height, var(--_--height)); pointer-events: none; - &::after { - content: '\00a0'; - visibility: hidden; - } - &-inner { - position: absolute; - inset: 0; display: flex; align-items: center; justify-content: center; } - &_side_start, - &_side_end { - position: absolute; - inset-block-start: 0; - } - &_side_start { - inset-inline-start: var(--_--icon-position); - - & ~ #{$block}__text { - padding-inline-start: var(--_--icon-space); - } + order: 0; } &_side_end { - inset-inline-end: var(--_--icon-position); - - & ~ #{$block}__text { - padding-inline-end: var(--_--icon-space); - } + order: 2; } } From a2fb9a50e742f3720a7c0d04038c613f01fbe09e Mon Sep 17 00:00:00 2001 From: telegine Date: Tue, 26 Mar 2024 14:49:04 +0300 Subject: [PATCH 2/5] fix(Button): return back position relative --- src/components/Button/Button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 0f88ac56d8..216a84886e 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -15,6 +15,7 @@ $block: '.#{variables.$ns}button'; --_--font-size: var(--g-text-body-1-font-size); @include mixins.button-reset(); + position: relative; overflow: visible; box-sizing: border-box; height: var(--g-button-height, var(--_--height)); From b303f62b45e8923edaba615372d8916631787761 Mon Sep 17 00:00:00 2001 From: telegine Date: Tue, 26 Mar 2024 15:22:49 +0300 Subject: [PATCH 3/5] fix(Button): return back nbsp and fix positioning in text --- src/components/Button/Button.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 216a84886e..636c8a8c8c 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -259,13 +259,20 @@ $block: '.#{variables.$ns}button'; } &__icon { - display: inline-flex; - justify-content: center; + display: inline-block; + position: relative; width: var(--g-button-height, var(--_--icon-size)); height: var(--g-button-height, var(--_--height)); pointer-events: none; + &::after { + content: '\00a0'; + visibility: hidden; + } + &-inner { + position: absolute; + inset: 0; display: flex; align-items: center; justify-content: center; From b269fd5886173fdb1c40916559edcb9d09613e27 Mon Sep 17 00:00:00 2001 From: telegine Date: Tue, 26 Mar 2024 21:55:23 +0300 Subject: [PATCH 4/5] fix(Button): add negative margin to support bigger icon size --- src/components/Button/Button.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 636c8a8c8c..e045f33d19 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -261,7 +261,16 @@ $block: '.#{variables.$ns}button'; &__icon { display: inline-block; position: relative; - width: var(--g-button-height, var(--_--icon-size)); + margin: 0 + calc( + ( + var(--g-button-height, var(--_--height)) - var( + --g-button-icon-size, + var(--_--icon-size) + ) + ) / 2 * -1 + ); + width: var(--g-button-height, var(--_--height)); height: var(--g-button-height, var(--_--height)); pointer-events: none; From 4490b68a4c8192e11597fcf3a6044d164705149a Mon Sep 17 00:00:00 2001 From: telegine Date: Wed, 3 Apr 2024 17:29:35 +0300 Subject: [PATCH 5/5] fix(Button): use correct order attribute value --- src/components/Button/Button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index e045f33d19..fbc18536e8 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -288,11 +288,11 @@ $block: '.#{variables.$ns}button'; } &_side_start { - order: 0; + order: -1; } &_side_end { - order: 2; + order: 1; } }