feat: ConfigProvider add form colon (#32818)

* feat: ConfigProvider add form colon

* add: test for ant-design#32799

* fix: Modify FormItemLabel get ConfigColon from From

* refactor: Simplify the code

components/config-provider/__tests__/form.test.js

@@ -91,4 +91,34 @@ describe('ConfigProvider.Form', () => {
       expect(wrapper).toMatchRenderedSnapshot();
     });
   });
+
+  describe('form colon', () => {
+    it('set colon false', async () => {
+      const wrapper = mount(
+        <ConfigProvider form={{ colon: false }}>
+          <Form>
+            <Form.Item label="没有冒号">
+              <input />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+
+      expect(wrapper.exists('.ant-form-item-no-colon')).toBeTruthy();
+    });
+
+    it('set colon default', async () => {
+      const wrapper = mount(
+        <ConfigProvider>
+          <Form>
+            <Form.Item label="姓名">
+              <input />
+            </Form.Item>
+          </Form>
+        </ConfigProvider>,
+      );
+
+      expect(wrapper.exists('.ant-form-item-no-colon')).toBeFalsy();
+    });
+  });
 });

components/config-provider/context.tsx

@@ -43,6 +43,7 @@ export interface ConfigConsumerProps {
   dropdownMatchSelectWidth?: boolean;
   form?: {
     requiredMark?: RequiredMark;
+    colon?: boolean;
   };
 }
 

components/config-provider/index.tsx

@@ -64,6 +64,7 @@ export interface ConfigProviderProps {
   form?: {
     validateMessages?: ValidateMessages;
     requiredMark?: RequiredMark;
+    colon?: boolean;
   };
   input?: {
     autoComplete?: string;

components/config-provider/index.zh-CN.md

@@ -44,7 +44,7 @@ export default () => (
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
-| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | requiredMark: 4.8.0 |
+| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | requiredMark: 4.8.0; colon: 4.18.0 |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
 | iconPrefixCls | 设置图标统一样式前缀。注意：需要配合 `less` 变量 [@iconfont-css-prefix](https://github.com/ant-design/ant-design/blob/d943b85a523bdf181dabc12c928226f3b4b893de/components/style/themes/default.less#L106) 使用 | string | `anticon` | 4.11.0 |

components/form/Form.tsx

@@ -69,6 +69,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
     return true;
   }, [hideRequiredMark, requiredMark, contextForm]);
 
+  const mergedColon = colon ?? contextForm?.colon;
+
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   const formClassName = classNames(
@@ -93,11 +95,11 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
       labelCol,
       wrapperCol,
       vertical: layout === 'vertical',
-      colon,
+      colon: mergedColon,
       requiredMark: mergedRequiredMark,
       itemRef: __INTERNAL__.itemRef,
     }),
-    [name, labelAlign, labelCol, wrapperCol, layout, colon, mergedRequiredMark],
+    [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark],
   );
 
   React.useImperativeHandle(ref, () => wrapForm);

components/form/__tests__/index.test.js

@@ -930,4 +930,42 @@ describe('Form', () => {
 
     jest.useRealTimers();
   });
+
+  describe('form colon', () => {
+    it('default colon', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item label="姓名">
+            <input />
+          </Form.Item>
+        </Form>,
+      );
+
+      expect(wrapper.exists('.ant-form-item-no-colon')).toBeFalsy();
+    });
+
+    it('set Form.Item colon false', () => {
+      const wrapper = mount(
+        <Form colon>
+          <Form.Item colon={false} label="姓名">
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+
+      expect(wrapper.find('.ant-form-item-no-colon')).toBeTruthy();
+    });
+
+    it('set Form colon false', () => {
+      const wrapper = mount(
+        <Form colon={false}>
+          <Form.Item label="姓名">
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+
+      expect(wrapper.find('.ant-form-item-no-colon')).toBeTruthy();
+    });
+  });
 });