Browse Source

style: fix tagInput insetLabel not align with other component (#2216)

pointhalo 1 year ago
parent
commit
a154de7e7d

+ 15 - 0
packages/semi-foundation/tagInput/tagInput.scss

@@ -255,6 +255,15 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-inset-label {
+        margin-right: $spacing-tagInput_insetLabel-marginRight;
+        font-weight: $font-tagInput_insetLabel-fontWeight;
+        @include font-size-regular;
+        color: $color-tagInput_prefix-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
     &-prefix,
     &-suffix {
         @include all-center;
@@ -281,6 +290,12 @@ $module: #{$prefix}-tagInput;
         }
     }
 
+    &-with-prefix {
+        .#{$prefix}-input {
+            padding-left: 0;
+        }
+    }
+
     &-tag-content-wrapper {
         display: flex;
         align-items: center;

+ 4 - 1
packages/semi-foundation/tagInput/variables.scss

@@ -28,7 +28,7 @@ $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); // 
 $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
 $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
 $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
-
+$color-tagInput_prefix-text-default: var(--semi-color-text-2); // 标签输入框 prefix 文字颜色
 $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
 
 $spacing-tagInput_small-Y: 1px; // 小尺寸标签输入框标签顶部外边距
@@ -37,6 +37,7 @@ $spacing-tagInput_large-Y: 3px; // 大尺寸标签输入框标签顶部外边距
 $spacing-tagInput_wrapper_n_paddingX: $spacing-tight; //标签输入框标签容器水平内边距
 $spacing-tagInput_drag_handler-marginRight: 4px; // 拖拽handler icon的右外边距 
 $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的左内边距
+$spacing-tagInput_insetLabel-marginRight: $spacing-base-tight; // Form容器中标签输入框内嵌Label的右边距
 
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
@@ -54,3 +55,5 @@ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
 
 $z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index
+
+$font-tagInput_insetLabel-fontWeight: 600; // prefix 文字字重

+ 1 - 0
packages/semi-ui/tagInput/_story/tagInput.stories.jsx

@@ -457,6 +457,7 @@ export const PrefixSuffix = () => (
     <br />
     <br />
     <TagInput style={style} prefix="Prefix" showClear />
+    <TagInput style={style} insetLabel="insetLabel" showClear />
     <br />
     <br />
     <TagInput style={style} suffix={<IconGift />} />

+ 5 - 0
packages/semi-ui/tagInput/index.tsx

@@ -565,6 +565,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             disabled,
             placeholder,
             validateStatus,
+            prefix,
+            insetLabel,
+            suffix,
             ...rest
         } = this.props;
 
@@ -584,6 +587,8 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             [`${prefixCls}-warning`]: validateStatus === 'warning',
             [`${prefixCls}-small`]: size === 'small',
             [`${prefixCls}-large`]: size === 'large',
+            [`${prefixCls}-with-prefix`]: !!prefix || !!insetLabel,
+            [`${prefixCls}-with-suffix`]: !!suffix,
         });
 
         const inputCls = cls(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);