fix: Form item has default height align with form size (#21476)

* fix: Form item has default height align with form size * fix lint * update snapshot
ant-design · Feb 19, 2020 · 9f26e7a · 9f26e7a
1 parent c968184
commit 9f26e7a
Show file tree

Hide file tree

Showing 14 changed files with 4,891 additions and 4,288 deletions.
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -160,10 +160,14 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
                 <div
                   class="ant-form-item-control-input"
                 >
-                  <textarea
-                    class="ant-input"
-                    rows="4"
-                  />
+                  <div
+                    class="ant-form-item-control-input-content"
+                  >
+                    <textarea
+                      class="ant-input"
+                      rows="4"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
@@ -176,14 +180,18 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
                 <div
                   class="ant-form-item-control-input"
                 >
-                  <button
-                    class="ant-btn ant-btn-primary"
-                    type="submit"
+                  <div
+                    class="ant-form-item-control-input-content"
                   >
-                    <span>
-                      Add Comment
-                    </span>
-                  </button>
+                    <button
+                      class="ant-btn ant-btn-primary"
+                      type="submit"
+                    >
+                      <span>
+                        Add Comment
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -6979,11 +6979,15 @@ exports[`ConfigProvider components Form configProvider 1`] = `
       <div
         class="config-form-item-control-input"
       >
-        <input
-          class="config-input"
-          type="text"
-          value=""
-        />
+        <div
+          class="config-form-item-control-input-content"
+        >
+          <input
+            class="config-input"
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <div
         class="config-form-item-explain"
@@ -7010,11 +7014,15 @@ exports[`ConfigProvider components Form normal 1`] = `
       <div
         class="ant-form-item-control-input"
       >
-        <input
-          class="ant-input"
-          type="text"
-          value=""
-        />
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <div
         class="ant-form-item-explain"
@@ -7041,11 +7049,15 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
       <div
         class="prefix-Form-item-control-input"
       >
-        <input
-          class="prefix-Form"
-          type="text"
-          value=""
-        />
+        <div
+          class="prefix-Form-item-control-input-content"
+        >
+          <input
+            class="prefix-Form"
+            type="text"
+            value=""
+          />
+        </div>
       </div>
       <div
         class="prefix-Form-item-explain"

diff --git a/components/form/Form.tsx b/components/form/Form.tsx
@@ -8,7 +8,7 @@ import { ConfigContext, ConfigConsumerProps } from '../config-provider';
 import { FormContext } from './context';
 import { FormLabelAlign } from './interface';
 import { useForm, FormInstance } from './util';
-import { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
+import SizeContext, { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
 
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
@@ -26,6 +26,7 @@ export interface FormProps extends Omit<RcFormProps, 'form'> {
 }
 
 const InternalForm: React.FC<FormProps> = (props, ref) => {
+  const contextSize = React.useContext(SizeContext);
   const { getPrefixCls, direction }: ConfigConsumerProps = React.useContext(ConfigContext);
 
   const {
@@ -39,7 +40,7 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
     hideRequiredMark,
     className = '',
     layout = 'horizontal',
-    size,
+    size = contextSize,
   } = props;
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
@@ -49,6 +50,7 @@ const InternalForm: React.FC<FormProps> = (props, ref) => {
       [`${prefixCls}-${layout}`]: true,
       [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
       [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-${size}`]: size,
     },
     className,
   );

diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
@@ -92,7 +92,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
     <FormContext.Provider value={subFormContext}>
       <Col {...mergedWrapperCol} className={className}>
         <div className={`${baseClassName}-control-input`}>
-          {children}
+          <div className={`${baseClassName}-control-input-content`}>{children}</div>
           {icon}
         </div>
         <CSSMotion