Merge branch 'main' of github.com:DouyinFE/semi-design

packages/semi-foundation/tagInput/tagInput.scss

@@ -106,6 +106,18 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
+        &-small {
+            min-height: $height-tagInput-small;
+        }
+
+        &-default {
+            min-height: $height-tagInput-default;
+        }
+
+        &-large {
+            min-height: $height-tagInput-large;
+        }
+
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -170,6 +182,42 @@ $module: #{$prefix}-tagInput;
             &:not(:first-child) > input {
                 padding-left: 0;
             }
+
+            &-small {
+                height: $height-tagInput_input_small;
+                margin-top: $spacing-tagInput_small-Y;
+                margin-bottom: $spacing-tagInput_small-Y;
+                line-height: $height-tagInput_input_small;
+
+                & .#{$prefix}-input-small {
+                    height: $height-tagInput_input_small;
+                    line-height: $height-tagInput_input_small;
+                }
+            }
+
+            &-default {
+                height: $height-tagInput_input_default;
+                margin-top: $spacing-tagInput_default-Y;
+                margin-bottom: $spacing-tagInput_default-Y;
+                line-height: $height-tagInput_input_default;
+
+                & .#{$prefix}-input-default {
+                    height: $height-tagInput_input_default;
+                    line-height: $height-tagInput_input_default;
+                }
+            }
+
+            &-large {
+                height: $height-tagInput_input_large;
+                margin-top: $spacing-tagInput_large-Y;
+                margin-bottom: $spacing-tagInput_large-Y;
+                line-height: $height-tagInput_input_large;
+
+                & .#{$prefix}-input-large {
+                    height: $height-tagInput_input_large;
+                    line-height: $height-tagInput_input_large;
+                }
+            }
         }
     }
 

packages/semi-foundation/tagInput/variables.scss

@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
+$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
+$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
+$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认

packages/semi-ui/tagInput/index.tsx

@@ -555,9 +555,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
             [`${prefixCls}-warning`]: validateStatus === 'warning'
         });
 
-        const inputCls = cls(`${prefixCls}-wrapper-input`);
+        const inputCls = cls(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
 
-        const wrapperCls = cls(`${prefixCls}-wrapper`);
+        const wrapperCls = cls(`${prefixCls}-wrapper`, `${prefixCls}-wrapper-${size}`);
 
         return (
             // eslint-disable-next-line