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 () => {
/>
@@ -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 () => {
/>
@@ -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%;
}
}