feat: support Form labelWrap (#33048)

* feat: form label can be wrap

* fix api doc

* fix ts

components/form/Form.tsx

@@ -21,6 +21,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
   name?: string;
   layout?: FormLayout;
   labelAlign?: FormLabelAlign;
+  labelWrap?: boolean;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
   form?: FormInstance<Values>;
@@ -42,6 +43,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
     form,
     colon,
     labelAlign,
+    labelWrap,
     labelCol,
     wrapperCol,
     hideRequiredMark,
@@ -93,6 +95,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
       name,
       labelAlign,
       labelCol,
+      labelWrap,
       wrapperCol,
       vertical: layout === 'vertical',
       colon: mergedColon,

components/form/FormItem.tsx

@@ -253,6 +253,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
           'initialValue',
           'isListField',
           'labelAlign',
+          'labelWrap',
           'labelCol',
           'normalize',
           'preserve',

components/form/FormItemLabel.tsx

@@ -60,6 +60,7 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
         vertical,
         labelAlign: contextLabelAlign,
         labelCol: contextLabelCol,
+        labelWrap,
         colon: contextColon,
       }: FormContextProps) => {
         const mergedLabelCol: ColProps = labelCol || contextLabelCol || {};
@@ -71,6 +72,9 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
           labelClsBasic,
           mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
           mergedLabelCol.className,
+          {
+            [`${labelClsBasic}-wrap`]: !!labelWrap,
+          },
         );
 
         let labelChildren = label;

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -2899,6 +2899,120 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
 </form>
 `;
 
+exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+  id="wrap"
+>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+      style="flex:0 0 110px"
+    >
+      <label
+        class="ant-form-item-required ant-form-item-no-colon"
+        for="wrap_username"
+        title="正常标签文案"
+      >
+        正常标签文案
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+      style="flex:1 1 auto"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            id="wrap_username"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+      style="flex:0 0 110px"
+    >
+      <label
+        class="ant-form-item-required ant-form-item-no-colon"
+        for="wrap_password"
+        title="超长标签文案超长标签文案"
+      >
+        超长标签文案超长标签文案
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+      style="flex:1 1 auto"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            id="wrap_password"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label ant-form-item-label-left ant-form-item-label-wrap"
+      style="flex:0 0 110px"
+    >
+      <label
+        class="ant-form-item-no-colon"
+        title=" "
+      >
+         
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+      style="flex:1 1 auto"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-primary"
+            type="submit"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

components/form/context.tsx

@@ -14,6 +14,7 @@ export interface FormContextProps {
   name?: string;
   colon?: boolean;
   labelAlign?: FormLabelAlign;
+  labelWrap?: boolean;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
   requiredMark?: RequiredMark;

components/form/demo/layout-can-wrap.md

@@ -0,0 +1,46 @@
+---
+order: 3.2
+title:
+  zh-CN: 表单标签可换行
+  en-US: label can wrap
+version: 4.18.0
+---
+
+## zh-CN
+
+使用 `labelWrap` 可以开启 `label` 换行。
+
+## en-US
+
+Turn on `labelWrap` to wrap label if text is long.
+
+```tsx
+import { Form, Input, Button } from 'antd';
+
+const Demo = () => (
+  <Form
+    name="wrap"
+    labelCol={{ flex: '110px' }}
+    labelAlign="left"
+    labelWrap
+    wrapperCol={{ flex: 1 }}
+    colon={false}
+  >
+    <Form.Item label="正常标签文案" name="username" rules={[{ required: true }]}>
+      <Input />
+    </Form.Item>
+
+    <Form.Item label="超长标签文案超长标签文案" name="password" rules={[{ required: true }]}>
+      <Input />
+    </Form.Item>
+
+    <Form.Item label=" ">
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
+ReactDOM.render(<Demo />, mountNode);
+```

components/form/index.en-US.md

@@ -25,6 +25,7 @@ High performance Form component with data scope management. Including data colle
 | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - |  |
 | initialValues | Set value by Form initialization or reset | object | - |  |
 | labelAlign | The text align of label of all items | `left` \| `right` | `right` |  |
+| labelWrap | whether label can be wrap | boolean | false | 4.18.0 |
 | labelCol | Label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - |  |
 | layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` |  |
 | name | Form name. Will be the prefix of Field `id` | string | - |  |

components/form/index.zh-CN.md

@@ -26,6 +26,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#FormInstance) | - |  |
 | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  |
 | labelAlign | label 标签的文本对齐方式 | `left` \| `right` | `right` |  |
+| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
 | labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - |  |
 | layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` |  |
 | name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - |  |

components/form/style/index.less

@@ -91,6 +91,12 @@
       text-align: left;
     }
 
+    &-wrap {
+      overflow: unset;
+      line-height: (@line-height-base - 0.25em);
+      white-space: unset;
+    }
+
     > label {
       position: relative;
       display: inline-flex;