@douyinfe/semi-foundation 2.15.2-alpha.0 → 2.16.1

package/lib/cjs/treeSelect/treeSelect.scss

@@ -239,6 +239,7 @@ $module: #{$prefix}-tree-select;
         // right: 0;
         display: inline-flex;
         align-items: center;
+        flex-shrink: 0;
         height: 100%;
         justify-content: center;
         width: $width-treeSelect_arrow;
@@ -265,6 +266,7 @@ $module: #{$prefix}-tree-select;
         display: inline-flex;
         align-items: center;
         height: 100%;
+        flex-shrink: 0;
         justify-content: center;
         width: $width-treeSelect_arrow;
         color: $color-treeSelect_default-icon-default;

package/lib/es/dropdown/menuFoundation.js

@@ -58,7 +58,10 @@ export default class DropdownMenuFoundation extends BaseFoundation {
       _forEachInstanceProperty(_context3 = this.menuItemNodes).call(_context3, item => {
         var _context4;
 
-        this.firstChars.push(_trimInstanceProperty(_context4 = item.textContent).call(_context4)[0].toLowerCase());
+        var _a; // the menuItemNodes can be an component and not exit textContent
+
+
+        this.firstChars.push((_a = _trimInstanceProperty(_context4 = item.textContent).call(_context4)[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
       });
     } // get the currently focused menu item
 
@@ -88,8 +91,8 @@ export default class DropdownMenuFoundation extends BaseFoundation {
 
       default:
         if (isPrintableCharacter(event.key)) {
-          this.setFocusByFirstCharacter(curItem, event.key);
-          handlePrevent(event);
+          this.setFocusByFirstCharacter(curItem, event.key); // it can be an input on Dropdown, handlePrevent may affect the input of the component
+          // handlePrevent(event); 
         }
 
         break;

package/lib/es/input/input.css

@@ -68,7 +68,7 @@
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper-focus:active {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-2);
   border-color: var(--semi-color-focus-border);
 }
 .semi-input-wrapper.semi-input-readonly {
@@ -86,6 +86,10 @@
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper-error:active {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -98,6 +102,10 @@
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper-warning:active {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper__with-prefix {
   display: inline-flex;
   align-items: center;
@@ -218,6 +226,12 @@
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
   border-radius: 0;
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
+  background-color: var(--semi-color-fill-2);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
   background-color: var(--semi-color-fill-0);
 }
@@ -246,6 +260,13 @@
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
+  background-color: var(--semi-color-danger-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
   background-color: var(--semi-color-danger-light-default);
 }
@@ -274,6 +295,13 @@
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning);
 }
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
+  background-color: var(--semi-color-warning-light-active);
+}
+.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
+  background-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
+}
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
   background-color: var(--semi-color-warning-light-default);
 }
@@ -307,6 +335,9 @@
   background-color: transparent;
   box-sizing: border-box;
 }
+.semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
+  display: none;
+}
 .semi-input::placeholder {
   color: var(--semi-color-text-2);
 }

package/lib/es/input/input.scss

@@ -77,7 +77,7 @@ $module: #{$prefix}-input;
         }
 
         &:active {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-active;
             border-color: $color-input_default-border-focus;
         }
     }
@@ -100,10 +100,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_danger-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_danger-bg-active;
-        //     border-color: $color-input_danger-border-active;
-        // }
+        &:active {
+            background-color: $color-input_danger-bg-active;
+            border-color: $color-input_danger-border-focus;
+        }
     }
 
     &-warning {
@@ -120,10 +120,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_warning-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_warning-bg-active;
-        //     border-color: $color-input_warning-border-active;
-        // }
+        &:active {
+            background-color: $color-input_warning-bg-active;
+            border-color: $color-input_warning-border-focus;
+        }
     }
 
     &__with-prefix {
@@ -288,6 +288,16 @@ $module: #{$prefix}-input;
                 }
             }
 
+            // when have prepend and append, only make the input have active bg color
+            &:active {
+                background-color: $color-input_default-bg-active;
+
+                & + .#{$module}-clearbtn,
+                & ~ .#{$module}-modebtn {
+                    background-color: $color-input_default-bg-active;
+                }
+            }
+
             &-clearbtn,
             &-modebtn,
             &-clearbtn:hover,
@@ -328,6 +338,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_danger-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_danger-bg-active;
+                        border-color: $color-input_danger-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,
@@ -369,6 +389,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_warning-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_warning-bg-active;
+                        border-color: $color-input_warning-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,
@@ -415,6 +445,11 @@ $module: #{$prefix}-input;
     background-color: transparent;
     box-sizing: border-box;
 
+    &[type="password"]::-ms-reveal, 
+    &[type="password"]::-ms-clear {
+        display: none;
+    }
+
     &::placeholder {
         color: $color-input_placeholder-text-default;
     }

package/lib/es/input/textarea.css

@@ -72,7 +72,7 @@
 }
 .semi-input-textarea-wrapper-error:active {
   background-color: var(--semi-color-danger-light-active);
-  border-color: var(--semi-color-danger-light-active);
+  border-color: var(--semi-color-danger);
 }
 .semi-input-textarea-wrapper-warning {
   background-color: var(--semi-color-warning-light-default);
@@ -88,7 +88,7 @@
 }
 .semi-input-textarea-wrapper-warning:active {
   background-color: var(--semi-color-warning-light-active);
-  border-color: var(--semi-color-warning-light-active);
+  border-color: var(--semi-color-warning);
 }
 
 .semi-input-textarea {

package/lib/es/input/textarea.scss

@@ -90,7 +90,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_danger-bg-active;
-            border-color: $color-input_danger-border-active;
+            border-color: $color-input_danger-border-focus;
         }
     }
 
@@ -110,7 +110,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_warning-bg-active;
-            border-color: $color-input_warning-border-active;
+            border-color: $color-input_warning-border-focus;
         }
     }
 

package/lib/es/radio/radio.css

@@ -6,8 +6,9 @@
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: relative;
   display: inline-flex;
-  column-gap: 8px;
+  flex-wrap: wrap;
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -55,7 +56,6 @@
   border-radius: var(--semi-border-radius-small);
 }
 .semi-radio-buttonRadioGroup {
-  position: relative;
   padding: 4px;
   border-radius: var(--semi-border-radius-small);
   line-height: 16px;
@@ -79,6 +79,7 @@
   border: 1px solid transparent;
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
+  position: relative;
   margin-right: 8px;
   flex-shrink: 0;
 }
@@ -148,18 +149,19 @@
   border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
-  display: inline-flex;
-  margin-top: 2px;
-  position: relative;
+  position: absolute;
+  display: inline-block;
+  top: 2px;
+  left: 0;
   width: 16px;
   height: 16px;
   vertical-align: sub;
   user-select: none;
 }
 .semi-radio-inner-display {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
@@ -168,14 +170,11 @@
   background: transparent;
 }
 .semi-radio-inner-display .semi-icon {
+  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 14px;
 }
-.semi-radio-content {
-  display: flex;
-  flex-direction: column;
-}
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
 }
@@ -184,6 +183,8 @@
 }
 .semi-radio-addon {
   user-select: none;
+  padding-left: 8px;
+  margin-left: 16px;
   color: var(--semi-color-text-0);
   display: inline-flex;
   align-items: center;
@@ -272,7 +273,11 @@
   color: var(--semi-color-disabled-text);
 }
 .semi-radio-extra {
+  flex-grow: 1;
+  flex-basis: 100%;
+  flex-shrink: 0;
   color: var(--semi-color-text-2);
+  padding-left: 24px;
   box-sizing: border-box;
 }
 .semi-radio-focus {
@@ -287,20 +292,25 @@
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.semi-radioGroup-vertical {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
+.semi-radioGroup-vertical .semi-radio:last-of-type {
+  margin-bottom: 0;
 }
 .semi-radioGroup-vertical-default .semi-radio {
-  display: flex;
+  display: block;
+  margin-bottom: 12px;
 }
 .semi-radioGroup-vertical-card .semi-radio {
   display: flex;
+  margin-bottom: 16px;
 }
-.semi-radioGroup-horizontal {
-  display: inline-flex;
-  column-gap: 16px;
+.semi-radioGroup-horizontal .semi-radio {
+  margin-right: 16px;
+}
+.semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-right: 0;
+}
+.semi-radioGroup-horizontal-default {
+  display: inline-block;
 }
 .semi-radioGroup-buttonRadio {
   display: inline-block;
@@ -324,11 +334,56 @@
 .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
   padding-left: 0;
 }
+.semi-rtl .semi-radio-inner,
+.semi-portal-rtl .semi-radio-inner {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-inner-display,
+.semi-portal-rtl .semi-radio-inner-display {
+  left: auto;
+  right: 0;
+}
+.semi-rtl .semi-radio-addon,
+.semi-portal-rtl .semi-radio-addon {
+  padding-left: 0;
+  margin-left: 0;
+  padding-right: 8px;
+  margin-right: 16px;
+}
 .semi-rtl .semi-radio-addon-buttonRadio,
 .semi-portal-rtl .semi-radio-addon-buttonRadio {
   margin-right: 0;
 }
+.semi-rtl .semi-radio-extra,
+.semi-portal-rtl .semi-radio-extra {
+  padding-left: 0;
+  padding-right: 24px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-inner,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-addon,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
+  margin-right: 0;
+  padding-right: 0;
+}
+.semi-rtl-isCardRadioGroup .semi-radio-extra,
+.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
+  padding-right: 0;
+}
 .semi-rtl .semi-radioGroup,
 .semi-portal-rtl .semi-radioGroup {
   direction: rtl;
+}
+.semi-rtl .semi-radioGroup-horizontal .semi-radio,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
+  margin-right: 0;
+  margin-left: 16px;
+}
+.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
+.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
+  margin-left: 0;
 }

package/lib/es/radio/radio.scss

@@ -6,8 +6,9 @@ $inner-width: $width-icon-medium;
 .#{$module} {
     @include box-sizing;
     @include font-size-regular;
+    position: relative;
     display: inline-flex;
-    column-gap: $spacing-radio_addon-paddingLeft;
+    flex-wrap: wrap;
 
     &.#{$module}-vertical {
         display: block;
@@ -77,8 +78,6 @@ $inner-width: $width-icon-medium;
     }
 
     &-buttonRadioGroup {
-        // Button needs to be positioned relative to parent
-        position: relative;
         padding: $spacing-radio_buttonRadioGroup_middle-padding;
         border-radius: $radius-radio_buttonRadio;
         line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
@@ -107,6 +106,7 @@ $inner-width: $width-icon-medium;
         border: $width-radio_cardRadioGroup_checked-border solid transparent;
 
         .#{$module}-inner {
+            position: relative;
             &-display {
                 background: $color-radio_card-bg-default;
             }
@@ -205,19 +205,19 @@ $inner-width: $width-icon-medium;
     }
 
     &-inner {
-        display: inline-flex;
-        margin-top: 2px;
-        // WARN: The absolute positioning used by the input does not occupy space, and relative cannot be removed here.
-        position: relative;
+        position: absolute;
+        display: inline-block;
+        top: 2px;
+        left: 0;
         width: $width-radio_inner;
         height: $width-radio_inner;
         vertical-align: sub;
         user-select: none; // prevent text under it will be selected when double click
 
         &-display {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
+            position: absolute;
+            left: 0;
+            top: 0;
             @include box-sizing;
             width: $width-radio_inner;
             height: $width-radio_inner;
@@ -226,6 +226,7 @@ $inner-width: $width-icon-medium;
             background: $color-radio_default-bg-default;
 
             .#{$prefix}-icon {
+                position: absolute;
                 width: 100%;
                 height: 100%;
                 font-size: 14px;
@@ -233,11 +234,6 @@ $inner-width: $width-icon-medium;
         }
     }
 
-    &-content {
-        display: flex;
-        flex-direction: column;
-    }
-
     &:hover {
         .#{$module}-inner-display {
             background: $color-radio_default-bg-hover;
@@ -252,6 +248,8 @@ $inner-width: $width-icon-medium;
 
     &-addon {
         user-select: none;
+        padding-left: $spacing-radio_addon-paddingLeft;
+        margin-left: $spacing-radio_addon-marginLeft;
         color: $color-radio_default-text-default;
         display: inline-flex;
         align-items: center;
@@ -374,7 +372,11 @@ $inner-width: $width-icon-medium;
     }
 
     &-extra {
+        flex-grow: 1;
+        flex-basis: 100%;
+        flex-shrink: 0;
         color: $color-radio_extra-text-default;
+        padding-left: $spacing-radio_extra-paddingLeft;
         box-sizing: border-box;
     }
 
@@ -391,25 +393,37 @@ $inner-width: $width-icon-medium;
     @include font-size-regular;
 
     &-vertical {
-        display: flex;
-        flex-direction: column;
-        row-gap: $spacing-radio_group_vertical-marginBottom;
-
+        .#{$module} {
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
         &-default {
             .#{$module} {
-                display: flex;
+                display: block;
+                margin-bottom: $spacing-radio_group_vertical-marginBottom;
+
             }
         }
         &-card {
             .#{$module} {
                 display: flex;
+                margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
             }
         }
     }
 
     &-horizontal {
-        display: inline-flex;
-        column-gap: $spacing-radio_group_horizontal-marginRight;
+        .#{$module} {
+            margin-right: $spacing-radio_group_horizontal-marginRight;
+
+            &:last-of-type {
+                margin-right: 0;
+            }
+        }
+        &-default {
+            display: inline-block;
+        }
     }
 
     &-buttonRadio {

package/lib/es/radio/rtl.scss

@@ -18,14 +18,61 @@ $inner-width: $width-icon-medium;
             }
         }
 
+        &-inner {
+            left: auto;
+            right: 0;
+
+            &-display {
+                left: auto;
+                right: 0;
+            }
+        }
+
         &-addon {
+            padding-left: 0;
+            margin-left: 0;
+            padding-right: $spacing-radio_addon-paddingLeft;
+            margin-right: $spacing-radio_addon-marginLeft;
+            
             &-buttonRadio {
                 margin-right: $spacing-none;
             }
         }
+
+        &-extra {
+            padding-left: 0;
+            padding-right: $spacing-radio_extra-paddingLeft;
+        }
+    }
+
+    &-isCardRadioGroup {
+        .#{$module}-inner {
+            margin-right: 0;
+            margin-left: $spacing-radio_cardRadioGroup_inner-marginRight;
+        }
+
+        .#{$module}-addon {
+            margin-right: 0;
+            padding-right: 0;
+        }
+
+        .#{$module}-extra {
+            padding-right: 0;
+        }
     }
 
     .#{$module}Group {
         direction: rtl;
+
+        &-horizontal {
+            .#{$module} {
+                margin-right: 0;
+                margin-left: $spacing-radio_group_horizontal-marginRight;
+
+                &:last-of-type {
+                    margin-left: 0;
+                }
+            }
+        }
     }
 }

package/lib/es/select/select.css

@@ -283,11 +283,11 @@
   align-items: center;
 }
 .semi-select-prefix-text, .semi-select-suffix-text {
-  margin: 0 12px;
+  margin: 0px 12px;
 }
 .semi-select-prefix-icon, .semi-select-suffix-icon {
   color: var(--semi-color-text-2);
-  margin: 0 8px;
+  margin: 0px 8px;
 }
 .semi-select-suffix {
   display: flex;

package/lib/es/select/variables.scss

@@ -58,16 +58,16 @@ $width-select_arrow: 32px; // 选择器输入框下拉箭头宽度
 $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（有suffix icon）宽度
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
-$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小宽度
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
-$spacing-select_prefix_suffix_text-marginY: 0; // 选择器输入框前后缀文本垂直内边距
+$spacing-select_prefix_suffix_text-marginY: 0px; // 选择器输入框前后缀文本垂直内边距
 $spacing-select_prefix_suffix_icon-marginX: $spacing-tight; // 选择器输入框前后缀图标水平内边距
-$spacing-select_prefix_suffix_icon-marginY: 0; // 选择器输入框前后缀图标垂直内边距
+$spacing-select_prefix_suffix_icon-marginY: 0px; // 选择器输入框前后缀图标垂直内边距
 $spacing-select_create_tips-marginRight: $spacing-extra-tight; // 创建新选项右侧外边距
 $spacing-select_group-marginTop: $spacing-extra-tight; // 选择器菜单分组标题顶部外边距
 $spacing-select_group-paddingTop: $spacing-base-tight; // 选择器菜单分组标题顶部内边距
@@ -106,5 +106,5 @@ $font-select_inset_label-fontWeight: 600; // 选择器内嵌标签文本字重
 $font-select_keyword-fontWeight: 600; // 选择器搜索结果命关键词中文本字重
 
 // Other
-$opacity-select_selection_text_inactive: .4;
+$opacity-select_selection_text_inactive: 0.4;