From fe534d9a03d7772a94d6a47aa4403ebf09321254 Mon Sep 17 00:00:00 2001
From: Vadym <v.bezpalko@livechat.com>
Date: Mon, 18 Dec 2023 14:04:51 +0100
Subject: [PATCH] fix(Button): excluding icon-only

---
 .../src/components/Button/Button.module.scss  | 10 ++++-----
 .../src/components/Button/styles/size.scss    | 22 +++++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss
index 6687bea6e..3a4049532 100644
--- a/packages/react-components/src/components/Button/Button.module.scss
+++ b/packages/react-components/src/components/Button/Button.module.scss
@@ -8,7 +8,7 @@ $base-class: 'btn';
 
 .#{$base-class} {
   @include base.default();
-  @include size.button-size-group($base-class, false);
+  @include size.default-button-size($base-class);
 
   &--disabled {
     cursor: not-allowed;
@@ -64,23 +64,23 @@ $base-class: 'btn';
   }
 
   &--plain {
-    @include size.button-size-group($base-class, true);
     @include kind.plain();
+    @include size.button-size-group($base-class, true);
   }
 
   &--float {
-    @include size.button-size-group($base-class, true);
     @include kind.float();
+    @include size.button-size-group($base-class, true);
   }
 
   &--dotted {
-    @include size.button-size-group($base-class, true);
     @include kind.dotted();
+    @include size.button-size-group($base-class, true);
   }
 
   &--high-contrast {
-    @include size.button-size-group($base-class, true);
     @include kind.high-contrast();
+    @include size.button-size-group($base-class, true);
   }
 
   &--loading {
diff --git a/packages/react-components/src/components/Button/styles/size.scss b/packages/react-components/src/components/Button/styles/size.scss
index c58d2ef1b..cb4935c09 100644
--- a/packages/react-components/src/components/Button/styles/size.scss
+++ b/packages/react-components/src/components/Button/styles/size.scss
@@ -21,20 +21,28 @@ $large-size: 44px;
  @else {
     @include _element-size($padding-vertical, 16px, $size);
   }
+}
+
+@mixin default-button-size($base-class) {
+  &--compact:not(&--icon-only) {
+    @include _button-size($base-class, 6px, $compact-size, false);
+  }
+
+  &--medium:not(&--icon-only) {
+    @include _button-size($base-class, var(--spacing-2), $medium-size, false);
+  }
 
-  &.#{$base-class}--icon-only {
-    padding: 6px;
-    width: $size;
-    height: $size;
+  &--large:not(&--icon-only) {
+    @include _button-size($base-class, var(--spacing-3), $large-size, false);
   }
 }
 
 @mixin button-size-group($base-class, $with-border: false) {
-  &.#{$base-class}--compact {
+  &.#{$base-class}--compact:not(&.#{$base-class}--icon-only) {
     @include _button-size($base-class, 6px, $compact-size, $with-border);
   }
 
-  &.#{$base-class}--medium {
+  &.#{$base-class}--medium:not(&.#{$base-class}--icon-only) {
     @include _button-size(
       $base-class,
       var(--spacing-2),
@@ -43,7 +51,7 @@ $large-size: 44px;
     );
   }
 
-  &.#{$base-class}--large {
+  &.#{$base-class}--large:not(&.#{$base-class}--icon-only) {
     @include _button-size(
       $base-class,
       var(--spacing-3),