From 9bc148abcc4dbe6d4f7474c34c4cafbf49b4f657 Mon Sep 17 00:00:00 2001
From: seaSuper <90687224+seaSuper@users.noreply.github.com>
Date: Thu, 11 Nov 2021 17:51:33 +0800
Subject: [PATCH] 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
---
 .../config-provider/__tests__/form.test.js    | 30 +++++++++++++++
 components/config-provider/context.tsx        |  1 +
 components/config-provider/index.tsx          |  1 +
 components/config-provider/index.zh-CN.md     |  2 +-
 components/form/Form.tsx                      |  6 ++-
 components/form/__tests__/index.test.js       | 38 +++++++++++++++++++
 6 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/components/config-provider/__tests__/form.test.js b/components/config-provider/__tests__/form.test.js
index f5617ce56d..76ba1b872b 100644
--- a/components/config-provider/__tests__/form.test.js
+++ b/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();
+    });
+  });
 });
diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx
index 71b0d6927e..8e9566d6bd 100644
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@@ -43,6 +43,7 @@ export interface ConfigConsumerProps {
   dropdownMatchSelectWidth?: boolean;
   form?: {
     requiredMark?: RequiredMark;
+    colon?: boolean;
   };
 }
 
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 7eb7d2e853..bb98b5164a 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -64,6 +64,7 @@ export interface ConfigProviderProps {
   form?: {
     validateMessages?: ValidateMessages;
     requiredMark?: RequiredMark;
+    colon?: boolean;
   };
   input?: {
     autoComplete?: string;
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 3d79fffa63..f5efcda6d7 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/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 |
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index c5b41847b0..af48e325cf 100644
--- a/components/form/Form.tsx
+++ b/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);
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index b741fbc473..11e9a63370 100644
--- a/components/form/__tests__/index.test.js
+++ b/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();
+    });
+  });
 });