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

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -180,6 +180,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <div
             class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
@@ -210,6 +213,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -228,6 +232,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <div
             class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
@@ -287,6 +294,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -305,6 +313,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <span
             class="ant-input-group ant-input-group-compact"
@@ -395,6 +406,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -413,6 +425,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <div
             class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
@@ -472,6 +487,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -490,6 +506,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <span
             class="ant-input-group ant-input-group-compact"
@@ -609,6 +628,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -627,6 +647,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <span
             class="ant-input-group ant-input-group-compact"
@@ -747,6 +770,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -765,6 +789,9 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <span
             class="ant-input-group ant-input-group-compact"
@@ -913,6 +940,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 

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

@@ -159,6 +159,9 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
               >
                 <div
                   class="ant-form-item-control-input"
+                >
+                  <div
+                    class="ant-form-item-control-input-content"
                   >
                     <textarea
                       class="ant-input"
@@ -167,6 +170,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
                   </div>
                 </div>
               </div>
+            </div>
             <div
               class="ant-row ant-form-item"
             >
@@ -175,6 +179,9 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
               >
                 <div
                   class="ant-form-item-control-input"
+                >
+                  <div
+                    class="ant-form-item-control-input-content"
                   >
                     <button
                       class="ant-btn ant-btn-primary"
@@ -193,6 +200,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;
 
 exports[`renders ./components/comment/demo/list.md correctly 1`] = `

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

@@ -6978,6 +6978,9 @@ exports[`ConfigProvider components Form configProvider 1`] = `
     >
       <div
         class="config-form-item-control-input"
+      >
+        <div
+          class="config-form-item-control-input-content"
         >
           <input
             class="config-input"
@@ -6985,6 +6988,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
             value=""
           />
         </div>
+      </div>
       <div
         class="config-form-item-explain"
       >
@@ -7009,6 +7013,9 @@ exports[`ConfigProvider components Form normal 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <input
             class="ant-input"
@@ -7016,6 +7023,7 @@ exports[`ConfigProvider components Form normal 1`] = `
             value=""
           />
         </div>
+      </div>
       <div
         class="ant-form-item-explain"
       >
@@ -7040,6 +7048,9 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
     >
       <div
         class="prefix-Form-item-control-input"
+      >
+        <div
+          class="prefix-Form-item-control-input-content"
         >
           <input
             class="prefix-Form"
@@ -7047,6 +7058,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
             value=""
           />
         </div>
+      </div>
       <div
         class="prefix-Form-item-explain"
       >

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,
   );

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

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

@@ -15,11 +15,15 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           text
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 
@@ -38,7 +42,11 @@ exports[`Form rtl render component should be rendered correctly in RTL direction
   >
     <div
       class="ant-form-item-control-input"
+    >
+      <div
+        class="ant-form-item-control-input-content"
       />
     </div>
   </div>
+</div>
 `;

components/form/style/index.less

@@ -25,6 +25,26 @@
   &-rtl {
     direction: rtl;
   }
+
+  // ================================================================
+  // =                             Size                             =
+  // ================================================================
+  .formSize(@input-height) {
+    .@{form-item-prefix-cls}-label > label {
+      height: @input-height;
+    }
+
+    .@{form-item-prefix-cls}-control-input {
+      min-height: @input-height;
+    }
+  }
+
+  &-small {
+    .formSize(@input-height-sm);
+  }
+  &-large {
+    .formSize(@input-height-lg);
+  }
 }
 
 .explainAndExtraDistance(@num) when (@num>=0) {
@@ -67,7 +87,7 @@
       display: inline-flex;
       align-items: center;
       height: 100%;
-      max-height: @input-height-base;
+      height: @input-height-base;
       color: @label-color;
       font-size: @form-item-label-font-size;
 
@@ -123,7 +143,13 @@
 
   &-control-input {
     position: relative;
-    .clearfix;
+    display: flex;
+    align-items: center;
+    min-height: @input-height-base;
+
+    &-content {
+      flex: auto;
+    }
   }
 
   &-explain,
@@ -136,293 +162,6 @@
     line-height: @line-height-base;
     transition: color 0.3s @ease-out; // sync input color transition
   }
-
-  // ================================================================
-  // =                            Status                            =
-  // ================================================================
-  /* Some non-status related component style is in `components.less` */
-
-  &-has-feedback {
-    // ========================= Input =========================
-    .@{ant-prefix}-input {
-      padding-right: 24px;
-    }
-    // https://github.com/ant-design/ant-design/issues/19884
-    .@{ant-prefix}-input-affix-wrapper {
-      .@{ant-prefix}-input-suffix {
-        padding-right: 18px;
-      }
-    }
-
-    // Fix issue: https://github.com/ant-design/ant-design/issues/7854
-    .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
-      .@{ant-prefix}-input-suffix {
-        right: 28px;
-
-        .@{form-prefix-cls}-rtl & {
-          right: auto;
-          left: 28px;
-        }
-      }
-    }
-
-    .@{ant-prefix}-input-password-icon {
-      .@{form-prefix-cls}-rtl & {
-        margin-right: 0;
-        margin-left: 18px;
-      }
-    }
-
-    // ======================== Switch =========================
-    .@{ant-prefix}-switch {
-      margin: 2px 0 4px;
-    }
-
-    // ======================== Select =========================
-    // Fix overlapping between feedback icon and <Select>'s arrow.
-    // https://github.com/ant-design/ant-design/issues/4431
-    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
-    > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
-    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
-    :not(.@{ant-prefix}-input-group-addon)
-      > .@{ant-prefix}-select
-      .@{ant-prefix}-select-selection__clear {
-      right: 28px;
-
-      .@{form-prefix-cls}-rtl & {
-        right: auto;
-        left: 28px;
-      }
-    }
-    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
-    :not(.@{ant-prefix}-input-group-addon)
-      > .@{ant-prefix}-select
-      .@{ant-prefix}-select-selection-selected-value {
-      padding-right: 42px;
-
-      .@{form-prefix-cls}-rtl & {
-        padding-right: 0;
-        padding-left: 42px;
-      }
-    }
-
-    // ======================= Cascader ========================
-    .@{ant-prefix}-cascader-picker {
-      &-arrow {
-        margin-right: 17px;
-
-        .@{form-prefix-cls}-rtl & {
-          margin-right: 0;
-          margin-left: 17px;
-        }
-      }
-      &-clear {
-        right: 28px;
-
-        .@{form-prefix-cls}-rtl & {
-          right: auto;
-          left: 28px;
-        }
-      }
-    }
-
-    // ======================== Picker =========================
-    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
-    .@{ant-prefix}-picker {
-      padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;
-
-      &-large {
-        padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
-      }
-
-      &-small {
-        padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
-      }
-    }
-
-    // ===================== Status Group ======================
-    &.@{form-item-prefix-cls} {
-      &-has-success,
-      &-has-warning,
-      &-has-error,
-      &-is-validating {
-        // ====================== Icon ======================
-        .@{form-item-prefix-cls}-children-icon {
-          position: absolute;
-          top: 50%;
-          right: 0;
-          z-index: 1;
-          width: @input-height-base;
-          height: 20px;
-          margin-top: -10px;
-          font-size: @font-size-base;
-          line-height: 20px;
-          text-align: center;
-          visibility: visible;
-          animation: zoomIn 0.3s @ease-out-back;
-          pointer-events: none;
-
-          .@{form-prefix-cls}-rtl & {
-            right: auto;
-            left: 0;
-          }
-
-          & svg {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            margin: auto;
-          }
-        }
-      }
-    }
-  }
-
-  // ======================== Success ========================
-  &-has-success {
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      color: @success-color;
-      animation-name: diffZoomIn1 !important;
-    }
-  }
-
-  // ======================== Warning ========================
-  &-has-warning {
-    .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg);
-
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      color: @warning-color;
-      animation-name: diffZoomIn3 !important;
-    }
-
-    //select
-    .@{ant-prefix}-select {
-      .@{ant-prefix}-select-selector {
-        border-color: @warning-color !important;
-      }
-      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
-      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
-        .active(@warning-color);
-      }
-    }
-
-    //input-number, timepicker
-    .@{ant-prefix}-input-number,
-    .@{ant-prefix}-picker {
-      border-color: @warning-color;
-      &-focused,
-      &:focus {
-        .active(@warning-color);
-      }
-      &:not([disabled]):hover {
-        border-color: @warning-color;
-      }
-    }
-
-    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
-      .active(@warning-color);
-    }
-  }
-
-  // ========================= Error =========================
-  &-has-error {
-    .form-control-validation(@error-color; @error-color; @form-error-input-bg);
-
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      color: @error-color;
-      animation-name: diffZoomIn2 !important;
-    }
-
-    //select
-    .@{ant-prefix}-select {
-      .@{ant-prefix}-select-selector {
-        border-color: @error-color !important;
-      }
-      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
-      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
-        .active(@error-color);
-      }
-    }
-
-    // fixes https://github.com/ant-design/ant-design/issues/20482
-    .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
-      &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
-        .@{ant-prefix}-select-selector {
-        border: 0;
-      }
-    }
-
-    .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
-      .@{ant-prefix}-input:focus {
-        border-color: @error-color;
-      }
-    }
-
-    //input-number, timepicker
-    .@{ant-prefix}-input-number,
-    .@{ant-prefix}-picker {
-      border-color: @error-color;
-      &-focused,
-      &:focus {
-        .active(@error-color);
-      }
-      &:not([disabled]):hover {
-        border-color: @error-color;
-      }
-    }
-    .@{ant-prefix}-mention-wrapper {
-      .@{ant-prefix}-mention-editor {
-        &,
-        &:not([disabled]):hover {
-          border-color: @error-color;
-        }
-      }
-      &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
-      .@{ant-prefix}-mention-editor:not([disabled]):focus {
-        .active(@error-color);
-      }
-    }
-
-    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
-      .active(@error-color);
-    }
-
-    // transfer
-    .@{ant-prefix}-transfer {
-      &-list {
-        border-color: @error-color;
-
-        &-search:not([disabled]) {
-          border-color: @input-border-color;
-
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .active();
-          }
-        }
-      }
-    }
-  }
-
-  // Patch to keep error explain color
-  &-has-error-leave {
-    .@{form-item-prefix-cls}-explain {
-      color: @error-color;
-    }
-  }
-
-  // ====================== Validating =======================
-  &-is-validating {
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      display: inline-block;
-      color: @primary-color;
-    }
-  }
 }
 
 .show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {

components/form/style/status.less

@@ -0,0 +1,290 @@
+@import './index.less';
+
+.@{form-item-prefix-cls} {
+  // ================================================================
+  // =                            Status                            =
+  // ================================================================
+  /* Some non-status related component style is in `components.less` */
+
+  &-has-feedback {
+    // ========================= Input =========================
+    .@{ant-prefix}-input {
+      padding-right: 24px;
+    }
+    // https://github.com/ant-design/ant-design/issues/19884
+    .@{ant-prefix}-input-affix-wrapper {
+      .@{ant-prefix}-input-suffix {
+        padding-right: 18px;
+      }
+    }
+
+    // Fix issue: https://github.com/ant-design/ant-design/issues/7854
+    .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
+      .@{ant-prefix}-input-suffix {
+        right: 28px;
+
+        .@{form-prefix-cls}-rtl & {
+          right: auto;
+          left: 28px;
+        }
+      }
+    }
+
+    .@{ant-prefix}-input-password-icon {
+      .@{form-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: 18px;
+      }
+    }
+
+    // ======================== Switch =========================
+    .@{ant-prefix}-switch {
+      margin: 2px 0 4px;
+    }
+
+    // ======================== Select =========================
+    // Fix overlapping between feedback icon and <Select>'s arrow.
+    // https://github.com/ant-design/ant-design/issues/4431
+    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
+    > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
+    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
+    :not(.@{ant-prefix}-input-group-addon)
+      > .@{ant-prefix}-select
+      .@{ant-prefix}-select-selection__clear {
+      right: 28px;
+
+      .@{form-prefix-cls}-rtl & {
+        right: auto;
+        left: 28px;
+      }
+    }
+    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
+    :not(.@{ant-prefix}-input-group-addon)
+      > .@{ant-prefix}-select
+      .@{ant-prefix}-select-selection-selected-value {
+      padding-right: 42px;
+
+      .@{form-prefix-cls}-rtl & {
+        padding-right: 0;
+        padding-left: 42px;
+      }
+    }
+
+    // ======================= Cascader ========================
+    .@{ant-prefix}-cascader-picker {
+      &-arrow {
+        margin-right: 17px;
+
+        .@{form-prefix-cls}-rtl & {
+          margin-right: 0;
+          margin-left: 17px;
+        }
+      }
+      &-clear {
+        right: 28px;
+
+        .@{form-prefix-cls}-rtl & {
+          right: auto;
+          left: 28px;
+        }
+      }
+    }
+
+    // ======================== Picker =========================
+    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
+    .@{ant-prefix}-picker {
+      padding-right: @input-padding-horizontal-base + @font-size-base * 1.3;
+
+      &-large {
+        padding-right: @input-padding-horizontal-lg + @font-size-base * 1.3;
+      }
+
+      &-small {
+        padding-right: @input-padding-horizontal-sm + @font-size-base * 1.3;
+      }
+    }
+
+    // ===================== Status Group ======================
+    &.@{form-item-prefix-cls} {
+      &-has-success,
+      &-has-warning,
+      &-has-error,
+      &-is-validating {
+        // ====================== Icon ======================
+        .@{form-item-prefix-cls}-children-icon {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          z-index: 1;
+          width: @input-height-base;
+          height: 20px;
+          margin-top: -10px;
+          font-size: @font-size-base;
+          line-height: 20px;
+          text-align: center;
+          visibility: visible;
+          animation: zoomIn 0.3s @ease-out-back;
+          pointer-events: none;
+
+          .@{form-prefix-cls}-rtl & {
+            right: auto;
+            left: 0;
+          }
+
+          & svg {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: auto;
+          }
+        }
+      }
+    }
+  }
+
+  // ======================== Success ========================
+  &-has-success {
+    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
+      color: @success-color;
+      animation-name: diffZoomIn1 !important;
+    }
+  }
+
+  // ======================== Warning ========================
+  &-has-warning {
+    .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg);
+
+    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
+      color: @warning-color;
+      animation-name: diffZoomIn3 !important;
+    }
+
+    //select
+    .@{ant-prefix}-select {
+      .@{ant-prefix}-select-selector {
+        border-color: @warning-color !important;
+      }
+      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
+      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
+        .active(@warning-color);
+      }
+    }
+
+    //input-number, timepicker
+    .@{ant-prefix}-input-number,
+    .@{ant-prefix}-picker {
+      border-color: @warning-color;
+      &-focused,
+      &:focus {
+        .active(@warning-color);
+      }
+      &:not([disabled]):hover {
+        border-color: @warning-color;
+      }
+    }
+
+    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
+      .active(@warning-color);
+    }
+  }
+
+  // ========================= Error =========================
+  &-has-error {
+    .form-control-validation(@error-color; @error-color; @form-error-input-bg);
+
+    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
+      color: @error-color;
+      animation-name: diffZoomIn2 !important;
+    }
+
+    //select
+    .@{ant-prefix}-select {
+      .@{ant-prefix}-select-selector {
+        border-color: @error-color !important;
+      }
+      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
+      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
+        .active(@error-color);
+      }
+    }
+
+    // fixes https://github.com/ant-design/ant-design/issues/20482
+    .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
+      &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
+        .@{ant-prefix}-select-selector {
+        border: 0;
+      }
+    }
+
+    .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
+      .@{ant-prefix}-input:focus {
+        border-color: @error-color;
+      }
+    }
+
+    //input-number, timepicker
+    .@{ant-prefix}-input-number,
+    .@{ant-prefix}-picker {
+      border-color: @error-color;
+      &-focused,
+      &:focus {
+        .active(@error-color);
+      }
+      &:not([disabled]):hover {
+        border-color: @error-color;
+      }
+    }
+    .@{ant-prefix}-mention-wrapper {
+      .@{ant-prefix}-mention-editor {
+        &,
+        &:not([disabled]):hover {
+          border-color: @error-color;
+        }
+      }
+      &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
+      .@{ant-prefix}-mention-editor:not([disabled]):focus {
+        .active(@error-color);
+      }
+    }
+
+    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
+      .active(@error-color);
+    }
+
+    // transfer
+    .@{ant-prefix}-transfer {
+      &-list {
+        border-color: @error-color;
+
+        &-search:not([disabled]) {
+          border-color: @input-border-color;
+
+          &:hover {
+            .hover();
+          }
+
+          &:focus {
+            .active();
+          }
+        }
+      }
+    }
+  }
+
+  // Patch to keep error explain color
+  &-has-error-leave {
+    .@{form-item-prefix-cls}-explain {
+      color: @error-color;
+    }
+  }
+
+  // ====================== Validating =======================
+  &-is-validating {
+    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
+      display: inline-block;
+      color: @primary-color;
+    }
+  }
+}

components/input/__tests__/__snapshots__/index.test.js.snap

@@ -175,7 +175,7 @@ exports[`Input should support size 1`] = `
 
 exports[`Input should support size in form 1`] = `
 <form
-  class="ant-form ant-form-horizontal"
+  class="ant-form ant-form-horizontal ant-form-large"
 >
   <div
     class="ant-row ant-form-item"
@@ -185,6 +185,9 @@ exports[`Input should support size in form 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <input
             class="ant-input ant-input-lg"
@@ -194,6 +197,7 @@ exports[`Input should support size in form 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 

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

@@ -47,6 +47,9 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <div
             class="ant-mentions"
@@ -59,6 +62,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -78,6 +82,9 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <div
             class="ant-mentions"
@@ -91,6 +98,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
   <div
     class="ant-row ant-form-item"
   >
@@ -99,6 +107,9 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <button
             class="ant-btn ant-btn-primary"
@@ -120,6 +131,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;
 

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

@@ -126,6 +126,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <button
                 aria-checked="false"
@@ -140,6 +143,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         class="ant-row ant-form-item"
       >
@@ -158,6 +162,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <div
                 class="ant-radio-group ant-radio-group-outline"
@@ -224,6 +231,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         class="ant-row ant-form-item"
       >
@@ -242,6 +250,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <div
                 class="ant-radio-group ant-radio-group-outline"
@@ -308,6 +319,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
     </form>
     <div
       class="ant-skeleton ant-skeleton-element"
@@ -341,6 +353,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <button
                 aria-checked="false"
@@ -355,6 +370,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         class="ant-row ant-form-item"
       >
@@ -373,6 +389,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <div
                 class="ant-radio-group ant-radio-group-outline"
@@ -439,6 +458,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         class="ant-row ant-form-item"
       >
@@ -457,6 +477,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <div
                 class="ant-radio-group ant-radio-group-outline"
@@ -504,6 +527,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
     </form>
     <div
       class="ant-skeleton ant-skeleton-element"
@@ -537,6 +561,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <button
                 aria-checked="false"
@@ -551,6 +578,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
       <div
         class="ant-row ant-form-item"
       >
@@ -569,6 +597,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
         >
           <div
             class="ant-form-item-control-input"
+          >
+            <div
+              class="ant-form-item-control-input-content"
             >
               <div
                 class="ant-radio-group ant-radio-group-outline"
@@ -635,6 +666,7 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
             </div>
           </div>
         </div>
+      </div>
     </form>
     <div
       class="ant-skeleton ant-skeleton-element"

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

@@ -1633,6 +1633,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="false"
@@ -1647,6 +1650,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1665,6 +1669,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="false"
@@ -1679,6 +1686,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1697,6 +1705,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="false"
@@ -1711,6 +1722,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1729,6 +1741,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="true"
@@ -1744,6 +1759,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1762,6 +1778,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="true"
@@ -1777,6 +1796,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1795,6 +1815,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="true"
@@ -1810,6 +1833,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1828,6 +1852,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="true"
@@ -1843,6 +1870,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1861,6 +1889,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="false"
@@ -1875,6 +1906,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1893,6 +1925,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="true"
@@ -1908,6 +1943,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1926,6 +1962,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <button
               aria-checked="false"
@@ -1940,6 +1979,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -1958,6 +1998,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <div
               class="ant-radio-group ant-radio-group-outline"
@@ -2024,6 +2067,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -2042,6 +2086,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <div
               class="ant-radio-group ant-radio-group-outline"
@@ -2107,6 +2154,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -2125,6 +2173,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <div
               class="ant-radio-group ant-radio-group-outline"
@@ -2171,6 +2222,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
     <div
       class="ant-row ant-form-item"
     >
@@ -2189,6 +2241,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
       >
         <div
           class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
           >
             <div
               class="ant-radio-group ant-radio-group-outline"
@@ -2274,6 +2329,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           </div>
         </div>
       </div>
+    </div>
   </form>
   <div
     class="ant-table-wrapper"

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

@@ -3004,6 +3004,9 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
     >
       <div
         class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
         >
           <span
             class=""
@@ -3058,5 +3061,6 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
         </div>
       </div>
     </div>
+  </div>
 </form>
 `;