@douyinfe/semi-foundation 2.55.5 → 2.56.0-beta.0

package/form/form.scss

@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

package/lib/cjs/form/form.css

@@ -109,6 +109,12 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.semi-form-field[x-label-pos=top] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-vertical-card {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra {
   display: flex;
   align-items: center;
@@ -131,7 +137,9 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
-.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-vertical-card {
   padding-top: 0;
   padding-bottom: 0;
 }

package/lib/cjs/form/form.scss

@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

package/lib/cjs/radio/radio.css

@@ -242,6 +242,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  margin-top: 0;
   z-index: -1;
   opacity: 0;
 }

package/lib/cjs/radio/radio.scss

@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

package/lib/cjs/select/select.css

@@ -383,7 +383,13 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 100%;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper .semi-input-default {
+  height: 24px;
 }
 .semi-select-multiple.semi-select-filterable .semi-input-wrapper {
   height: 100%;
@@ -399,6 +405,22 @@
   padding-right: 0;
 }
 
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large .semi-input-large {
+  height: 24px;
+}
+
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper {
+  height: 20px;
+  line-height: 20px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper .semi-input-small {
+  height: 20px;
+}
+
 .semi-select-option-list-wrapper {
   padding-top: 4px;
   padding-bottom: 4px;

package/lib/cjs/select/select.scss

@@ -392,18 +392,23 @@ $overflowList: #{$prefix}-overflow-list;
         height: 100%;
         overflow: hidden;
         position: relative;
-
         &-empty {
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
                 left: 0;
                 height: 100%;
-                width: 100%;
+                // width: 100%; // no need to set width here, will calcuate inline style by js
+            }
+        }
+        .#{$prefix}-input-wrapper {
+            height: $height-select_multiple_input_default;
+            line-height: $height-select_multiple_input_default;
+            .#{$prefix}-input-default {
+                height: $height-select_multiple_input_default;
             }
         }
     }
-
     .#{$prefix}-input-wrapper {
         // position: absolute;
         // top: 0;
@@ -424,6 +429,26 @@ $overflowList: #{$prefix}-overflow-list;
     }
 }
 
+.#{$multiple}.#{$filterable}.#{$module}-large {
+    .#{$prefix}-input-wrapper-large {
+        height: $height-select_multiple_input_large;
+        line-height: $height-select_multiple_input_large;
+        .#{$prefix}-input-large {
+            height: $height-select_multiple_input_large
+        }
+    }
+}
+.#{$multiple}.#{$filterable}.#{$module}-small {
+    .#{$prefix}-input-wrapper {
+        height: $height-select_multiple_input_small;
+        line-height: $height-select_multiple_input_small;
+        .#{$prefix}-input-small {
+            height: $height-select_multiple_input_small;
+        }
+    }
+}
+
+
 .#{$module}-option-list-wrapper {
     padding-top: $spacing-select_option_list-paddingTop;
     padding-bottom: $spacing-select_option_list-paddingBottom;

package/lib/cjs/select/variables.scss

@@ -65,7 +65,12 @@ $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 - 2px; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小高度
+
+$height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
+$height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
+$height-select_multiple_input_large: 24px; // 大尺寸多项选择器输入框Input框高度
+
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中

package/lib/es/form/form.css

@@ -109,6 +109,12 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.semi-form-field[x-label-pos=top] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=top] .semi-radioGroup-vertical-card {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra {
   display: flex;
   align-items: center;
@@ -131,7 +137,9 @@
   padding-top: 6px;
   padding-bottom: 6px;
 }
-.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-horizontal-card,
+.semi-form-field[x-label-pos=left] .semi-radioGroup-vertical-card {
   padding-top: 0;
   padding-bottom: 0;
 }

package/lib/es/form/form.scss

@@ -9,6 +9,8 @@ $col: #{$form}-col;
 $checkboxGroup: #{$prefix}-checkboxGroup;
 $radioGroup: #{$prefix}-radioGroup;
 $buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
+$horizontalCardRadioGroup: #{$prefix}-radioGroup-horizontal-card;
+$verticalCardRadioGroup: #{$prefix}-radioGroup-vertical-card;
 
 $switch: #{$prefix}-switch;
 $rating: #{$prefix}-rating;
@@ -171,11 +173,17 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label_posTop-paddingTop;
             padding-bottom: $spacing-form_label_posTop-paddingBottom;
         }
+        // no need to adjust height for button radio & card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
         .#{$field}-label-with-extra {
             display: flex;
             align-items: center;
         }
-
     }
 
     &[x-label-pos="left"] {
@@ -197,8 +205,10 @@ $rating: #{$prefix}-rating;
             padding-top: $spacing-form_label-paddingTop;
             padding-bottom: $spacing-form_label-paddingTop;
         }
-        // no need to adjust height for button radio, already 32px
-        .#{$buttonRadioGroup} {
+        // no need to adjust height for button radio, already 32px, no need to consider height of card radio
+        .#{$buttonRadioGroup},
+        .#{$horizontalCardRadioGroup},
+        .#{$verticalCardRadioGroup} {
             padding-top: 0;
             padding-bottom: 0;
         }

package/lib/es/radio/radio.css

@@ -242,6 +242,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  margin-top: 0;
   z-index: -1;
   opacity: 0;
 }

package/lib/es/radio/radio.scss

@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

package/lib/es/select/select.css

@@ -383,7 +383,13 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 100%;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper .semi-input-wrapper .semi-input-default {
+  height: 24px;
 }
 .semi-select-multiple.semi-select-filterable .semi-input-wrapper {
   height: 100%;
@@ -399,6 +405,22 @@
   padding-right: 0;
 }
 
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-large .semi-input-wrapper-large .semi-input-large {
+  height: 24px;
+}
+
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper {
+  height: 20px;
+  line-height: 20px;
+}
+.semi-select-multiple.semi-select-filterable.semi-select-small .semi-input-wrapper .semi-input-small {
+  height: 20px;
+}
+
 .semi-select-option-list-wrapper {
   padding-top: 4px;
   padding-bottom: 4px;

package/lib/es/select/select.scss

@@ -392,18 +392,23 @@ $overflowList: #{$prefix}-overflow-list;
         height: 100%;
         overflow: hidden;
         position: relative;
-
         &-empty {
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
                 left: 0;
                 height: 100%;
-                width: 100%;
+                // width: 100%; // no need to set width here, will calcuate inline style by js
+            }
+        }
+        .#{$prefix}-input-wrapper {
+            height: $height-select_multiple_input_default;
+            line-height: $height-select_multiple_input_default;
+            .#{$prefix}-input-default {
+                height: $height-select_multiple_input_default;
             }
         }
     }
-
     .#{$prefix}-input-wrapper {
         // position: absolute;
         // top: 0;
@@ -424,6 +429,26 @@ $overflowList: #{$prefix}-overflow-list;
     }
 }
 
+.#{$multiple}.#{$filterable}.#{$module}-large {
+    .#{$prefix}-input-wrapper-large {
+        height: $height-select_multiple_input_large;
+        line-height: $height-select_multiple_input_large;
+        .#{$prefix}-input-large {
+            height: $height-select_multiple_input_large
+        }
+    }
+}
+.#{$multiple}.#{$filterable}.#{$module}-small {
+    .#{$prefix}-input-wrapper {
+        height: $height-select_multiple_input_small;
+        line-height: $height-select_multiple_input_small;
+        .#{$prefix}-input-small {
+            height: $height-select_multiple_input_small;
+        }
+    }
+}
+
+
 .#{$module}-option-list-wrapper {
     padding-top: $spacing-select_option_list-paddingTop;
     padding-bottom: $spacing-select_option_list-paddingBottom;

package/lib/es/select/variables.scss

@@ -65,7 +65,12 @@ $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 - 2px; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小高度
+
+$height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
+$height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
+$height-select_multiple_input_large: 24px; // 大尺寸多项选择器输入框Input框高度
+
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.55.5",
+    "version": "2.56.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.55.5",
+        "@douyinfe/semi-animation": "2.56.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "4b283dae2b36fe704607cd2a8c367a36950a759d",
+    "gitHead": "ae4502e3075a19370e9f4ed32fbfb1292acd06c2",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/radio/radio.scss

@@ -335,6 +335,7 @@ $inner-width: $width-icon-medium;
         left: 0;
         width: 100%;
         height: 100%;
+        margin-top: 0; // when type= button/card/pureCard, reset margin
         z-index: -1;
         opacity: 0;
     }

package/select/select.scss

@@ -392,18 +392,23 @@ $overflowList: #{$prefix}-overflow-list;
         height: 100%;
         overflow: hidden;
         position: relative;
-
         &-empty {
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
                 left: 0;
                 height: 100%;
-                width: 100%;
+                // width: 100%; // no need to set width here, will calcuate inline style by js
+            }
+        }
+        .#{$prefix}-input-wrapper {
+            height: $height-select_multiple_input_default;
+            line-height: $height-select_multiple_input_default;
+            .#{$prefix}-input-default {
+                height: $height-select_multiple_input_default;
             }
         }
     }
-
     .#{$prefix}-input-wrapper {
         // position: absolute;
         // top: 0;
@@ -424,6 +429,26 @@ $overflowList: #{$prefix}-overflow-list;
     }
 }
 
+.#{$multiple}.#{$filterable}.#{$module}-large {
+    .#{$prefix}-input-wrapper-large {
+        height: $height-select_multiple_input_large;
+        line-height: $height-select_multiple_input_large;
+        .#{$prefix}-input-large {
+            height: $height-select_multiple_input_large
+        }
+    }
+}
+.#{$multiple}.#{$filterable}.#{$module}-small {
+    .#{$prefix}-input-wrapper {
+        height: $height-select_multiple_input_small;
+        line-height: $height-select_multiple_input_small;
+        .#{$prefix}-input-small {
+            height: $height-select_multiple_input_small;
+        }
+    }
+}
+
+
 .#{$module}-option-list-wrapper {
     padding-top: $spacing-select_option_list-paddingTop;
     padding-bottom: $spacing-select_option_list-paddingBottom;

package/select/variables.scss

@@ -65,7 +65,12 @@ $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 - 2px; // 多项选择器标签组最小宽度
+$height-select_multiple_content_wrapper-minHeight: $height-select_default - 2px; // 多项选择器标签组最小高度
+
+$height-select_multiple_input_small: 20px; // 小尺寸多项选择器输入框Input框高度
+$height-select_multiple_input_default: 24px; // 默认多项选择器输入框Input框高度
+$height-select_multiple_input_large: 24px; // 大尺寸多项选择器输入框Input框高度
+
 $width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
 $width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
 $width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中