fix: RangeInput & Input style fixes (#1793)

* fix(range-input): make prefix text nowrap & keep horizontal padding consistent * fix(range-input): use flex-shrink: 0 instead for fix label wrap * fix(input): remove font-size overrides in prefix/suffix style mixin resolve Tencent/tdesign-vue#3171
Tencent · May 13, 2024 · ae308e9 · ae308e9
1 parent 32e1b6c
commit ae308e9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/style/web/components/input/_mixin.less b/style/web/components/input/_mixin.less
@@ -98,7 +98,6 @@
       text-align: center;
       display: flex;
       align-items: center;
-      font-size: @font-size-base;
     }
 
     & > .@{prefix}-input__@{position}-icon {

diff --git a/style/web/components/range-input/_index.less b/style/web/components/range-input/_index.less
@@ -60,6 +60,11 @@
       border-radius: @border-radius-small;
     }
 
+    // 避免 label 文字被容器内其他元素挤压导致过早换行
+    & > .@{prefix}-input__prefix {
+      flex-shrink: 0;
+    }
+
     .@{prefix}-input {
       padding: @range-input-inner-padding;
       height: 100%;

diff --git a/style/web/components/range-input/_var.less b/style/web/components/range-input/_var.less
@@ -34,7 +34,7 @@
 @range-input-extra-color-error: @error-color;
 
 // 间距
-@range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-xs;
+@range-input-padding-default: @comp-paddingTB-xs @comp-paddingLR-s @comp-paddingTB-xs @comp-paddingLR-s;
 @range-input-status-position-right: calc(0px - @comp-margin-xxxl);
 @range-input-inner-gap: @comp-margin-s;
 @range-input-inner-padding: 0 @comp-paddingLR-xs;