feat(Form): the error help does not affect the item margin, close #3994…

… (#4546)

* feat(Form): the error does not affect the style close #3994

* feat(Form): modify the margin value close #3994

* feat(Form): test cases with error reporting styles close #3994

* feat(Form): test cases close #3994

* fix(Form): adjust test spec

---------

Co-authored-by: 珵之 <chengzhi.zpc@alibaba-inc.com>

src/form/error.jsx

@@ -45,7 +45,12 @@ class Error extends React.Component {
         const { children, name, prefix, style, className, field: _field, ...others } = this.props;
 
         if (children && typeof children !== 'function') {
-            return <div className={`${prefix}form-item-help`}>{children}</div>;
+            return (
+                <div className={`${prefix}form-item-help`}>
+                    {children}
+                    <div className={`${prefix}form-item-help-margin-offset`} />
+                </div>
+            );
         }
 
         const field = this.context._formField || _field;
@@ -87,6 +92,7 @@ class Error extends React.Component {
         return (
             <div {...others} className={cls} style={style}>
                 {result}
+                <div className={`${prefix}form-item-help-margin-offset`} />
             </div>
         );
     }

src/form/main.scss

@@ -242,6 +242,9 @@
         color: $form-help-color;
     }
 
+    .#{$css-prefix}form-item-help-margin-offset {
+        margin-top: -$form-item-m-margin-b;
+    }
     &.#{$css-prefix}inline {
         #{$form-prefix}-item {
             display: inline-block;

test/form/validate-spec.js

@@ -1,14 +1,17 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactTestUtils from 'react-dom/test-utils';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import assert from 'power-assert';
 import Input from '../../src/input';
 import Form from '../../src/form/index';
 import Field from '../../src/field';
-
+import { dom } from '../../src/util';
 const FormItem = Form.Item;
 const Submit = Form.Submit;
 const Reset = Form.Reset;
+const { getStyle } = dom;
 Enzyme.configure({ adapter: new Adapter() });
 
 describe('Submit', () => {
@@ -440,3 +443,48 @@ describe('Reset', () => {
         assert(warnFlag);
     });
 });
+
+describe('Error', () => {
+    let mountNode;
+
+    const getVerDistance = (node1, node2) => {
+        const rect1 = node1.getBoundingClientRect();
+        const rect2 = node2.getBoundingClientRect();
+        return rect2.top - rect1.top - rect1.height;
+    };
+
+    beforeEach(() => {
+        mountNode = document.createElement('div');
+        document.body.appendChild(mountNode);
+    });
+
+    afterEach(() => {
+        ReactDOM.unmountComponentAtNode(mountNode);
+        document.body.removeChild(mountNode);
+    });
+
+    it('the error does not affect the style', () => {
+        ReactDOM.render(
+            <Form>
+                <FormItem label="item1" required>
+                    <Input />
+                </FormItem>
+                <FormItem label="item2">
+                    <Input />
+                </FormItem>
+                <FormItem>
+                    <Form.Submit>submit</Form.Submit>
+                </FormItem>
+            </Form>,
+            mountNode
+        );
+
+        const items = mountNode.querySelectorAll('.next-form-item');
+        assert(items.length === 3);
+
+        const oldDistance = getVerDistance(items[0], items[1]);
+        ReactTestUtils.Simulate.click(mountNode.querySelector('.next-btn'));
+        const newDistance = getVerDistance(items[0], items[1]);
+        assert(oldDistance === newDistance);
+    });
+});