fix(Button): excluding icon-only

livechat · Dec 18, 2023 · fe534d9 · fe534d9
1 parent 0f5f126
commit fe534d9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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),