feat(Button): update button text wrapping

livechat · Jan 29, 2025 · 26d43c6 · 26d43c6
1 parent ca526ca
commit 26d43c6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 16 deletions.
diff --git a/packages/react-components/src/components/Button/Button.module.scss b/packages/react-components/src/components/Button/Button.module.scss
@@ -19,19 +19,19 @@ $base-class: 'btn';
   }
 
   &--xcompact {
-    @include size.button-size($base-class, 2px, 12px, 24px, 24px);
+    @include size.button-size($base-class, 2px, 12px, 24px);
   }
 
   &--compact {
-    @include size.button-size($base-class, 6px, 16px, 32px, 32px);
+    @include size.button-size($base-class, 6px, 16px, 32px);
   }
 
   &--medium {
-    @include size.button-size($base-class, 8px, 16px, 36px, 36px);
+    @include size.button-size($base-class, 8px, 16px, 36px);
   }
 
   &--large {
-    @include size.button-size($base-class, 11px, 16px, 44px, 44px);
+    @include size.button-size($base-class, 11px, 16px, 44px);
   }
 
   &--basic {

diff --git a/packages/react-components/src/components/Button/styles/base.scss b/packages/react-components/src/components/Button/styles/base.scss
@@ -14,6 +14,7 @@
   text-align: center;
   text-decoration: none;
   line-height: 20px;
+  white-space: nowrap;
   font-size: 14px;
   font-weight: 600;
   user-select: none;

diff --git a/packages/react-components/src/components/Button/styles/icon.scss b/packages/react-components/src/components/Button/styles/icon.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @mixin icon-styles() {
   width: 20px;
   height: 20px;
@@ -20,17 +22,68 @@
 }
 
 @mixin icon-only($base-class) {
-  padding: 4px;
-
   &.#{$base-class} {
-    &--xcompact {
-      padding: 4px;
-      width: 24px;
-      height: 24px;
-
-      .#{$base-class}__icon {
-        width: 16px;
-        height: 16px;
+    $sizes: (
+      'xcompact': (
+        'padding': 4px,
+        'size': 24px,
+        'icon-size': 16px,
+      ),
+      'compact': (
+        'padding': 6px,
+        'size': 32px,
+        'icon-size': 20px,
+      ),
+      'medium': (
+        'padding': var(--spacing-2),
+        'size': 36px,
+        'icon-size': 20px,
+      ),
+      'large': (
+        'padding': var(--spacing-3),
+        'size': 44px,
+        'icon-size': 20px,
+      ),
+    );
+
+    @each $size-name, $values in $sizes {
+      &--#{$size-name} {
+        padding: map.get($values, 'padding');
+        width: map.get($values, 'size');
+        height: map.get($values, 'size');
+
+        .#{$base-class}__icon {
+          width: map.get($values, 'icon-size');
+          height: map.get($values, 'icon-size');
+        }
+      }
+    }
+
+    &--text-lock-black {
+      @each $size-name, $values in $sizes {
+        &.#{$base-class}--#{$size-name} {
+          padding: 0;
+          height: 24px;
+        }
+      }
+    }
+
+    &--link-light,
+    &--link-inverted {
+      @each $size-name, $values in $sizes {
+        &.#{$base-class}--#{$size-name} {
+          padding: 0;
+
+          @if $size-name == 'xcompact' {
+            width: 24px;
+            height: 24px;
+          }
+
+ @else {
+            width: 28px;
+            height: 28px;
+          }
+        }
       }
     }
   }

diff --git a/packages/react-components/src/components/Button/styles/size.scss b/packages/react-components/src/components/Button/styles/size.scss
@@ -1,6 +1,5 @@
-@mixin button-size($base-class, $padding-v, $padding-h, $min-width, $height) {
+@mixin button-size($base-class, $padding-v, $padding-h, $height) {
   padding: $padding-v $padding-h;
-  min-width: $min-width;
   height: $height;
 
   &.#{$base-class} {