fix: Should also set className with customize `help` (#20489)

* add test case

* update snapshot

* update snapshot

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -6746,7 +6746,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
   class="config-form config-form-horizontal"
 >
   <div
-    class="config-row config-form-item config-form-item-has-error"
+    class="config-row config-form-item config-form-item-with-help config-form-item-has-error"
   >
     <div
       class="config-col config-form-item-control"
@@ -6775,7 +6775,7 @@ exports[`ConfigProvider components Form normal 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-control"
@@ -6804,7 +6804,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
   class="prefix-Form prefix-Form-horizontal"
 >
   <div
-    class="ant-row prefix-Form-item prefix-Form-item-has-error"
+    class="ant-row prefix-Form-item prefix-Form-item-with-help prefix-Form-item-has-error"
   >
     <div
       class="ant-col prefix-Form-item-control"

components/form/FormItem.tsx

@@ -135,7 +135,7 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
         // ====================== Class Name ======================
         const itemClassName = {
           [`${prefixCls}-item`]: true,
-          [`${prefixCls}-item-with-help`]: domErrorVisible, // TODO: handle this
+          [`${prefixCls}-item-with-help`]: domErrorVisible || help,
           [`${className}`]: !!className,
 
           // Status

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

@@ -4203,7 +4203,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4266,7 +4266,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
+    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4430,7 +4430,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
+    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-has-error"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4764,7 +4764,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
+    class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-feedback ant-form-item-is-validating"
   >
     <div
       class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@@ -4892,7 +4892,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-row ant-form-item ant-form-item-has-error"
+          class="ant-row ant-form-item ant-form-item-with-help ant-form-item-has-error"
           style="display:inline-block;width:calc(50% - 12px)"
         >
           <div
@@ -5367,7 +5367,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
 >
   <div
-    class="ant-row ant-form-item"
+    class="ant-row ant-form-item ant-form-item-with-help"
   >
     <div
       class="ant-col ant-col-7 ant-form-item-label"

components/form/__tests__/index.test.js

@@ -25,15 +25,12 @@ describe('Form', () => {
       .find(Input)
       .at(index)
       .simulate('change', { target: { value } });
-    await delay(20);
+    await delay(50);
     wrapper.update();
   }
 
-  beforeAll(() => {
-    jest.useRealTimers();
-  });
-
   beforeEach(() => {
+    jest.useRealTimers();
     scrollIntoView.mockReset();
   });
 
@@ -235,4 +232,16 @@ describe('Form', () => {
     wrapper.update();
     expect(wrapper.find('.ant-form-item-required')).toHaveLength(1);
   });
+
+  it('should show related className when customize help', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item help="good">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    expect(wrapper.find('.ant-form-item-with-help').length).toBeTruthy();
+  });
 });