feat(Button): refactor to flex and center icons (#1452)

gravity-ui · Apr 11, 2024 · 31c22e8 · 31c22e8
1 parent 7d9797a
commit 31c22e8
Showing 1 changed file with 15 additions and 31 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -12,23 +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;
@@ -47,6 +33,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,12 +256,20 @@ $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;
+        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;
@@ -289,26 +287,12 @@ $block: '.#{variables.$ns}button';
             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: -1;
         }
 
         &_side_end {
-            inset-inline-end: var(--_--icon-position);
-
-            & ~ #{$block}__text {
-                padding-inline-end: var(--_--icon-space);
-            }
+            order: 1;
         }
     }