fix(antd): fix multiple select small/large styles

alibaba · Apr 7, 2021 · 7b628ce · 7b628ce
1 parent 0e3cc60
commit 7b628ce
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 3 deletions.
diff --git a/packages/antd/docs/components/FormItem.md b/packages/antd/docs/components/FormItem.md
@@ -971,14 +971,28 @@ export default () => {
             required
           />
           <SchemaField.String
-            name="Select"
-            title="Select"
+            name="select1"
+            title="Multiple Select"
             x-decorator="FormItem"
             x-component="Select"
+            enum={[
+              {
+                label: '选项1',
+                value: 1,
+              },
+              {
+                label: '选项2',
+                value: 2,
+              },
+            ]}
+            x-component-props={{
+              mode: 'multiple',
+              placeholder: '请选择',
+            }}
             required
           />
           <SchemaField.String
-            name="Select"
+            name="select2"
             title="Select"
             x-decorator="FormItem"
             x-component="Select"
@@ -992,6 +1006,9 @@ export default () => {
                 value: 2,
               },
             ]}
+            x-component-props={{
+              placeholder: '请选择',
+            }}
             required
           />
           <SchemaField.String

diff --git a/packages/antd/src/form-item/style.less b/packages/antd/src/form-item/style.less
@@ -280,6 +280,43 @@
         }
     }
 
+    .@{ant-prefix}-select-multiple:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector {
+        padding: 0px 2px;
+        height: @height-sm - 2;
+        font-size: @font-size-sm;
+        line-height: @height-sm;
+
+        &::after {
+            height: @height-sm - 8;
+            line-height: @height-sm - 8;
+        }
+
+        .@{ant-prefix}-select-selection-search {
+            height: @height-sm - 8;
+            line-height: @height-sm - 8;
+            margin-inline-start: 0;
+            &-input {
+                height: @height-sm - 12;
+                line-height: @height-sm - 12;
+            }
+        }
+
+        .@{ant-prefix}-select-selection-placeholder {
+            line-height: @height-sm - 8;
+            height: @height-sm - 8;
+            left: 4px;
+        }
+
+        .@{ant-prefix}-select-selection-overflow-item {
+            align-self: flex-start;
+        }
+
+        .@{ant-prefix}-select-selection-item {
+            line-height: @height-sm - 10;
+            height: @height-sm - 8;
+        }
+    }
+
     &.@{form-item-cls}-feedback-layout-terse {
         margin-bottom: 8px;
 
@@ -384,6 +421,41 @@
         }
     }
 
+    .@{ant-prefix}-select-multiple:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector {
+        padding: 0px 2px;
+        height: @height-lg - 2;
+        font-size: @font-size-lg;
+        line-height: @height-lg;
+
+        &::after {
+            height: @height-lg - 8;
+            line-height: @height-lg - 8;
+        }
+
+        .@{ant-prefix}-select-selection-search {
+            height: @height-lg - 8;
+            line-height: @height-lg - 8;
+            &-input {
+                height: @height-lg - 12;
+                line-height: @height-lg - 12;
+            }
+        }
+
+        .@{ant-prefix}-select-selection-placeholder {
+            line-height: @height-lg - 8;
+            height: @height-lg - 8;
+        }
+
+        .@{ant-prefix}-select-selection-overflow-item {
+            align-self: flex-start;
+        }
+
+        .@{ant-prefix}-select-selection-item {
+            line-height: @height-lg - 10;
+            height: @height-lg - 8;
+        }
+    }
+
     &.@{form-item-cls}-feedback-layout-terse {
         margin-bottom: 8px;