From c0e2c126fd4b4620b183de4526ac7729fbee7839 Mon Sep 17 00:00:00 2001
From: Lyca <qmzmxfy@vip.qq.com>
Date: Fri, 30 Jul 2021 11:36:44 +0800
Subject: [PATCH] fix(next): fix size style in FormItem/main.scss && set
 default fullness true (#1908)

---
 packages/next/docs/components/FormItem.md     |  8 +--
 .../next/docs/components/FormItem.zh-CN.md    |  8 +--
 packages/next/src/form-item/index.tsx         |  4 ++
 packages/next/src/form-item/main.scss         | 51 ++++++++++---------
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/packages/next/docs/components/FormItem.md b/packages/next/docs/components/FormItem.md
index bc9c2352049..4cc61879f9c 100644
--- a/packages/next/docs/components/FormItem.md
+++ b/packages/next/docs/components/FormItem.md
@@ -296,16 +296,16 @@ export default () => {
         />
 
         <SchemaField.String
-          title="The default is not full (fullness=false)"
+          title="The default is fullness(fullness=true)"
           x-decorator="FormItem"
           x-component="Select"
         />
         <SchemaField.String
-          title="Fullness(fullness=true)"
+          title="Not fullness(fullness=false)"
           x-decorator="FormItem"
           x-component="Select"
           x-decorator-props={{
-            fullness: true,
+            fullness: false,
           }}
         />
 
@@ -1059,7 +1059,7 @@ export default () => {
 | wrapperCol     | number                                                 | The number of columns occupied by the content grid, and the number of label columns add up to 24 | -             |
 | wrapperAlign   | `"left"` \| `"right"`                                  | Content text alignment ⻬                                                                        | `"left"`      |
 | wrapperWrap    | boolean                                                | Change the content, otherwise an ellipsis appears, and hover has tooltip                         | false         |
-| fullness       | boolean                                                | fullness                                                                                         | false         |
+| fullness       | boolean                                                | fullness                                                                                         | true          |
 | addonBefore    | ReactNode                                              | Prefix content                                                                                   | -             |
 | addonAfter     | ReactNode                                              | Suffix content                                                                                   | -             |
 | size           | `"small"` \| `"default"` \| `"large"`                  | 尺⼨                                                                                             | -             |
diff --git a/packages/next/docs/components/FormItem.zh-CN.md b/packages/next/docs/components/FormItem.zh-CN.md
index d4dee0689e6..d9aa1072b5a 100644
--- a/packages/next/docs/components/FormItem.zh-CN.md
+++ b/packages/next/docs/components/FormItem.zh-CN.md
@@ -296,16 +296,16 @@ export default () => {
         />
 
         <SchemaField.String
-          title="默认不撑满(fullness=false)"
+          title="默认撑满(fullness=true)"
           x-decorator="FormItem"
           x-component="Select"
         />
         <SchemaField.String
-          title="撑满(fullness=true)"
+          title="不撑满(fullness=false)"
           x-decorator="FormItem"
           x-component="Select"
           x-decorator-props={{
-            fullness: true,
+            fullness: false,
           }}
         />
 
@@ -1059,7 +1059,7 @@ export default () => {
 | wrapperCol     | number                                                 | 内容⽹格所占列数，和标签列数加起来总和为 24 | -         |
 | wrapperAlign   | `"left"` \| `"right"`                                  | 内容文本对齐方式⻬                          | `"left"`  |
 | wrapperWrap    | boolean                                                | 内容换⾏，否则出现省略号，hover 有 tooltip  | false     |
-| fullness       | boolean                                                | 内容撑满                                    | false     |
+| fullness       | boolean                                                | 内容撑满                                    | true      |
 | addonBefore    | ReactNode                                              | 前缀内容                                    | -         |
 | addonAfter     | ReactNode                                              | 后缀内容                                    | -         |
 | size           | `"small"` \| `"default"` \| `"large"`                  | 尺⼨                                        | -         |
diff --git a/packages/next/src/form-item/index.tsx b/packages/next/src/form-item/index.tsx
index 780bf1cd9f2..fd2977cf0ab 100644
--- a/packages/next/src/form-item/index.tsx
+++ b/packages/next/src/form-item/index.tsx
@@ -419,6 +419,10 @@ export const FormItem: ComposeFormItem = connect(
   )
 )
 
+FormItem.defaultProps = {
+  fullness: true,
+}
+
 FormItem.BaseItem = BaseItem
 
 export default FormItem
diff --git a/packages/next/src/form-item/main.scss b/packages/next/src/form-item/main.scss
index f0584147bd4..0af3c2be9d2 100644
--- a/packages/next/src/form-item/main.scss
+++ b/packages/next/src/form-item/main.scss
@@ -16,18 +16,11 @@
 
   &-control-content-component {
     line-height: $form-element-medium-height;
-
-    & > .#{$css-prefix}input,
-    .#{$css-prefix}select,
-    .#{$css-prefix}date-picker,
-    .#{$css-prefix}number-picker {
-      width: 100% !important;
-    }
   }
 
   &-inset {
     padding: 0 8px;
-    border-radius: $form-element-large-corner;
+    border-radius: $form-element-medium-corner;
     width: 100%;
 
     .#{$css-prefix}input {
@@ -172,6 +165,7 @@
 
 .#{$form-item-cls}-size-small {
   font-size: $form-element-small-font-size;
+  line-height: $form-element-small-height;
 
   .#{$form-item-cls}-label-content {
     min-height: $form-element-small-height;
@@ -182,6 +176,18 @@
       line-height: $form-element-small-height;
       min-height: $form-element-small-height;
     }
+
+    .#{$form-item-cls}-addon-before {
+      min-height: $form-element-small-height;
+    }
+
+    .#{$form-item-cls}-addon-after {
+      min-height: $form-element-small-height;
+    }
+  }
+
+  &-inset {
+    border-radius: $form-element-small-corner;
   }
 
   &.#{$form-item-cls}-feedback-layout-terse {
@@ -216,6 +222,7 @@
 
 .#{$form-item-cls}-size-large {
   font-size: $form-element-large-font-size;
+  line-height: $form-element-large-height;
 
   .#{$form-item-cls}-label-content {
     min-height: $form-element-large-height;
@@ -226,6 +233,18 @@
       line-height: $form-element-large-height;
       min-height: $form-element-large-height;
     }
+
+    .#{$form-item-cls}-addon-before {
+      min-height: $form-element-large-height;
+    }
+
+    .#{$form-item-cls}-addon-after {
+      min-height: $form-element-large-height;
+    }
+  }
+
+  &-inset {
+    border-radius: $form-element-large-corner;
   }
 
   .#{$form-item-cls}-help,
@@ -233,10 +252,6 @@
     min-height: $form-element-large-font-size + 2;
   }
 
-  .#{$form-item-cls}-control-content {
-    min-height: $form-element-large-height;
-  }
-
   &.#{$form-item-cls}-feedback-layout-loose {
     margin-bottom: $form-item-l-margin-b;
 
@@ -254,16 +269,6 @@
   }
 }
 
-.#{$form-item-cls} {
-  &-layout-vertical {
-    display: block;
-
-    .#{$form-item-cls}-label-content {
-      min-height: $form-element-medium-height - 10 !important;
-    }
-  }
-}
-
 .#{$form-item-cls}-feedback-layout-popover {
   margin-bottom: 8px;
 }
@@ -319,7 +324,7 @@
   > .#{$form-item-cls}-control {
     > .#{$form-item-cls}-control-content {
       > .#{$form-item-cls}-control-content-component {
-        > *:first-child {
+        > *:first-child:not(.#{$css-prefix}switch) {
           width: 100%;
         }
       }