refactor: form

components/_util/createContext.ts

@@ -1,12 +1,12 @@
 import { inject, provide } from 'vue';
 
-function createContext<T>() {
+function createContext<T>(defaultValue?: T) {
   const contextKey = Symbol('contextKey');
   const useProvide = (props: T) => {
     provide(contextKey, props);
   };
   const useInject = () => {
-    return inject(contextKey, undefined as T) || ({} as T);
+    return inject(contextKey, defaultValue as T) || ({} as T);
   };
   return {
     useProvide,

components/calendar/Header.tsx

@@ -2,9 +2,10 @@ import Select from '../select';
 import { Group, Button } from '../radio';
 import type { CalendarMode } from './generateCalendar';
 import type { Ref } from 'vue';
-import { defineComponent, ref } from 'vue';
+import { reactive, watchEffect, defineComponent, ref } from 'vue';
 import type { Locale } from '../vc-picker/interface';
 import type { GenerateConfig } from '../vc-picker/generate';
+import { FormItemInputContext } from '../form/FormItemContext';
 
 const YearSelectOffset = 10;
 const YearSelectTotal = 20;
@@ -168,6 +169,15 @@ export default defineComponent<CalendarHeaderProps<any>>({
   ] as any,
   setup(_props, { attrs }) {
     const divRef = ref<HTMLDivElement>(null);
+    const formItemInputContext = FormItemInputContext.useInject();
+    const newFormItemInputContext = reactive({});
+    FormItemInputContext.useProvide(newFormItemInputContext);
+    watchEffect(() => {
+      Object.assign(newFormItemInputContext, formItemInputContext, {
+        isFormItemInput: false,
+      });
+    });
+
     return () => {
       const props = { ..._props, ...attrs };
       const { prefixCls, fullscreen, mode, onChange, onModeChange } = props;

components/calendar/style/index.less

@@ -70,6 +70,9 @@
         line-height: 18px;
       }
     }
+    .@{calendar-picker-prefix-cls}-cell::before {
+      pointer-events: none;
+    }
   }
 
   // ========================== Full ==========================

components/calendar/style/index.tsx

@@ -2,7 +2,7 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
-// deps-lint-skip: date-picker
+// deps-lint-skip: date-picker, form
 import '../../select/style';
 import '../../radio/style';
 import '../../date-picker/style';

components/form/FormItem.tsx

@@ -7,6 +7,7 @@ import type {
   HTMLAttributes,
 } from 'vue';
 import {
+  reactive,
   watch,
   defineComponent,
   computed,
@@ -16,6 +17,10 @@ import {
   onBeforeUnmount,
   toRaw,
 } from 'vue';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
 import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';
 import Row from '../grid/Row';
@@ -33,8 +38,10 @@ import { useInjectForm } from './context';
 import FormItemLabel from './FormItemLabel';
 import FormItemInput from './FormItemInput';
 import type { ValidationRule } from './Form';
-import { useProvideFormItemContext } from './FormItemContext';
+import type { FormItemStatusContextProps } from './FormItemContext';
+import { FormItemInputContext, useProvideFormItemContext } from './FormItemContext';
 import useDebounce from './utils/useDebounce';
+import classNames from '../_util/classNames';
 
 const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
 export type ValidateStatus = typeof ValidateStatuses[number];
@@ -50,6 +57,13 @@ export interface FieldExpose {
   validateRules: (options: ValidateOptions) => Promise<void> | Promise<RuleError[]>;
 }
 
+const iconMap: { [key: string]: any } = {
+  success: CheckCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  validating: LoadingOutlined,
+};
+
 function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
   let tempObj = obj;
 
@@ -391,6 +405,30 @@ export default defineComponent({
       [`${prefixCls.value}-item-is-validating`]: mergedValidateStatus.value === 'validating',
       [`${prefixCls.value}-item-hidden`]: props.hidden,
     }));
+    const formItemInputContext = reactive<FormItemStatusContextProps>({});
+    FormItemInputContext.useProvide(formItemInputContext);
+    watchEffect(() => {
+      let feedbackIcon: any;
+      if (props.hasFeedback) {
+        const IconNode = mergedValidateStatus.value && iconMap[mergedValidateStatus.value];
+        feedbackIcon = IconNode ? (
+          <span
+            class={classNames(
+              `${prefixCls.value}-item-feedback-icon`,
+              `${prefixCls.value}-item-feedback-icon-${mergedValidateStatus.value}`,
+            )}
+          >
+            <IconNode />
+          </span>
+        ) : null;
+      }
+      Object.assign(formItemInputContext, {
+        status: mergedValidateStatus.value,
+        hasFeedback: props.hasFeedback,
+        feedbackIcon,
+        isFormItemInput: true,
+      });
+    });
     return () => {
       if (props.noStyle) return slots.default?.();
       const help = props.help ?? (slots.help ? filterEmpty(slots.help()) : null);

components/form/FormItemContext.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey, ConcreteComponent } from 'vue';
+import type { ComputedRef, InjectionKey, ConcreteComponent, FunctionalComponent } from 'vue';
 import {
   watch,
   computed,
@@ -10,6 +10,8 @@ import {
   defineComponent,
 } from 'vue';
 import devWarning from '../vc-util/devWarning';
+import createContext from '../_util/createContext';
+import type { ValidateStatus } from './FormItem';
 
 export type FormItemContext = {
   id: ComputedRef<string>;
@@ -103,3 +105,17 @@ export default defineComponent({
     };
   },
 });
+
+export interface FormItemStatusContextProps {
+  isFormItemInput?: boolean;
+  status?: ValidateStatus;
+  hasFeedback?: boolean;
+  feedbackIcon?: any;
+}
+
+export const FormItemInputContext = createContext<FormItemStatusContextProps>({});
+
+export const NoFormStatus: FunctionalComponent = (_, { slots }) => {
+  FormItemInputContext.useProvide({});
+  return slots.default?.();
+};

components/form/FormItemInput.tsx

@@ -1,8 +1,3 @@
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
-import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
-import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
-
 import type { ColProps } from '../grid/Col';
 import Col from '../grid/Col';
 import { useProvideForm, useInjectForm, useProvideFormItemPrefix } from './context';
@@ -27,12 +22,6 @@ export interface FormItemInputProps {
   status?: ValidateStatus;
 }
 
-const iconMap: { [key: string]: any } = {
-  success: CheckCircleFilled,
-  warning: ExclamationCircleFilled,
-  error: CloseCircleFilled,
-  validating: LoadingOutlined,
-};
 const FormItemInput = defineComponent({
   slots: ['help', 'extra', 'errors'],
   inheritAttrs: false,
@@ -66,8 +55,8 @@ const FormItemInput = defineComponent({
         wrapperCol,
         help = slots.help?.(),
         errors = slots.errors?.(),
-        hasFeedback,
+        // hasFeedback,
-        status,
+        // status,
         extra = slots.extra?.(),
       } = props;
       const baseClassName = `${prefixCls}-item`;
@@ -78,7 +67,7 @@ const FormItemInput = defineComponent({
       const className = classNames(`${baseClassName}-control`, mergedWrapperCol.class);
 
       // Should provides additional icon if `hasFeedback`
-      const IconNode = status && iconMap[status];
+      // const IconNode = status && iconMap[status];
 
       return (
         <Col
@@ -89,11 +78,11 @@ const FormItemInput = defineComponent({
               <>
                 <div class={`${baseClassName}-control-input`}>
                   <div class={`${baseClassName}-control-input-content`}>{slots.default?.()}</div>
-                  {hasFeedback && IconNode ? (
+                  {/* {hasFeedback && IconNode ? (
                     <span class={`${baseClassName}-children-icon`}>
                       <IconNode />
                     </span>
-                  ) : null}
+                  ) : null} */}
                 </div>
                 <ErrorList
                   errors={errors}

components/form/demo/validate-static.vue

@@ -0,0 +1,172 @@
+<docs>
+---
+order: 20
+title:
+  zh-CN: 自定义校验
+  en-US: Customized Validation
+---
+
+## zh-CN
+
+我们提供了 `validateStatus` `help` `hasFeedback` 等属性，你可以不通过 Form 自己定义校验的时机和内容。
+
+1. `validateStatus`: 校验状态，可选 'success', 'warning', 'error', 'validating'。
+2. `hasFeedback`：用于给输入框添加反馈图标。
+3. `help`：设置校验文案。
+
+## en-US
+
+We provide properties like `validateStatus` `help` `hasFeedback` to customize your own validate status and message, without using Form.
+
+1. `validateStatus`: validate status of form components which could be 'success', 'warning', 'error', 'validating'.
+2. `hasFeedback`: display feed icon of input control
+3. `help`: display validate message.
+</docs>
+<template>
+  <a-form v-bind="formItemLayout">
+    <a-form-item
+      label="Fail"
+      validate-status="error"
+      help="Should be combination of numbers & alphabets"
+    >
+      <a-input id="error" placeholder="unavailable choice" />
+    </a-form-item>
+
+    <a-form-item label="Warning" validate-status="warning">
+      <a-input id="warning" placeholder="Warning">
+        <template #prefix><smile-outlined /></template>
+      </a-input>
+    </a-form-item>
+
+    <a-form-item
+      label="Validating"
+      has-feedback
+      validate-status="validating"
+      help="The information is being validated..."
+    >
+      <a-input id="validating" placeholder="I'm the content is being validated" />
+    </a-form-item>
+
+    <a-form-item label="Success" has-feedback validate-status="success">
+      <a-input id="success" placeholder="I'm the content" />
+    </a-form-item>
+
+    <a-form-item label="Warning" has-feedback validate-status="warning">
+      <a-input id="warning2" placeholder="Warning" />
+    </a-form-item>
+
+    <a-form-item
+      label="Fail"
+      has-feedback
+      validate-status="error"
+      help="Should be combination of numbers & alphabets"
+    >
+      <a-input id="error2" placeholder="unavailable choice" />
+    </a-form-item>
+
+    <a-form-item label="Success" has-feedback validate-status="success">
+      <a-date-picker style="width: 100%" />
+    </a-form-item>
+
+    <a-form-item label="Warning" has-feedback validate-status="warning">
+      <a-time-picker style="width: 100%" />
+    </a-form-item>
+
+    <a-form-item label="Error" has-feedback validate-status="error">
+      <a-range-picker style="width: 100%" />
+    </a-form-item>
+
+    <a-form-item label="Error" has-feedback validate-status="error">
+      <a-select placeholder="I'm Select" allow-clear>
+        <a-select-option value="1">Option 1</a-select-option>
+        <a-select-option value="2">Option 2</a-select-option>
+        <a-select-option value="3">Option 3</a-select-option>
+      </a-select>
+    </a-form-item>
+
+    <a-form-item
+      label="Validating"
+      has-feedback
+      validate-status="error"
+      help="Something breaks the rule."
+    >
+      <a-cascader
+        placeholder="I'm Cascader"
+        :options="[{ value: 'xx', label: 'xx' }]"
+        allow-clear
+      />
+    </a-form-item>
+
+    <a-form-item label="Warning" has-feedback validate-status="warning" help="Need to be checked">
+      <a-tree-select
+        placeholder="I'm TreeSelect"
+        :tree-data="[{ value: 'xx', label: 'xx' }]"
+        allow-clear
+      />
+    </a-form-item>
+
+    <a-form-item label="inline" style="margin-bottom: 0px">
+      <a-form-item
+        validate-status="error"
+        help="Please select right date"
+        style="display: inline-block; width: calc(50% - 12px)"
+      >
+        <a-date-picker />
+      </a-form-item>
+      <span style="display: inline-block, width: 24px; line-height:32px; text-align: center">
+        -
+      </span>
+      <a-form-item style="display: inline-block; width: calc(50% - 12px)">
+        <a-date-picker />
+      </a-form-item>
+    </a-form-item>
+
+    <a-form-item label="Success" has-feedback validate-status="success">
+      <a-inputNumber style="width: 100%" />
+    </a-form-item>
+
+    <a-form-item label="Success" has-feedback validate-status="success">
+      <a-input allow-clear placeholder="with allowClear" />
+    </a-form-item>
+
+    <a-form-item label="Warning" has-feedback validate-status="warning">
+      <a-input-password placeholder="with input password" />
+    </a-form-item>
+
+    <a-form-item label="Error" has-feedback validate-status="error">
+      <a-input-password allow-clear placeholder="with input password and allowClear" />
+    </a-form-item>
+
+    <a-form-item label="Fail" validate-status="error" has-feedback>
+      <a-mentions />
+    </a-form-item>
+
+    <a-form-item label="Fail" validate-status="error" has-feedback help="Should have something">
+      <a-textarea allow-clear show-count />
+    </a-form-item>
+  </a-form>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { SmileOutlined } from '@ant-design/icons-vue';
+export default defineComponent({
+  components: {
+    SmileOutlined,
+  },
+  setup() {
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 14 },
+      },
+    };
+    return {
+      formItemLayout,
+    };
+  },
+});
+</script>

components/form/style/components.less

@@ -6,67 +6,11 @@
 // ================================================================
 // =                      Children Component                      =
 // ================================================================
+// FIXME: useless, remove in v5
 .@{form-item-prefix-cls} {
-  // input[type=file]
-  .@{ant-prefix}-upload {
-    background: transparent;
-  }
-  .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
-    background: @background-color-light;
-  }
-
-  input[type='radio'],
-  input[type='checkbox'] {
-    width: 14px;
-    height: 14px;
-  }
-
-  // Radios and checkboxes on same line
-  .@{ant-prefix}-radio-inline,
-  .@{ant-prefix}-checkbox-inline {
-    display: inline-block;
-    margin-left: 8px;
-    font-weight: normal;
-    vertical-align: middle;
-    cursor: pointer;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  .@{ant-prefix}-checkbox-vertical,
-  .@{ant-prefix}-radio-vertical {
-    display: block;
-  }
-
-  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
-  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
-    margin-left: 0;
-  }
-
   .@{ant-prefix}-input-number {
     + .@{form-prefix-cls}-text {
       margin-left: 8px;
     }
-
-    &-handler-wrap {
-      z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
-    }
-  }
-
-  .@{ant-prefix}-select,
-  .@{ant-prefix}-cascader-picker {
-    width: 100%;
-  }
-
-  // Don't impact select inside input group and calendar header select
-  .@{ant-prefix}-picker-calendar-year-select,
-  .@{ant-prefix}-picker-calendar-month-select,
-  .@{ant-prefix}-input-group .@{ant-prefix}-select,
-  .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker,
-  .@{ant-prefix}-input-number-group .@{ant-prefix}-select,
-  .@{ant-prefix}-input-number-group .@{ant-prefix}-cascader-picker {
-    width: auto;
   }
 }

components/form/style/horizontal.less

@@ -14,7 +14,9 @@
     min-width: 0;
   }
   // https://github.com/ant-design/ant-design/issues/32980
-  .@{form-item-prefix-cls}-label.@{ant-prefix}-col-24 + .@{form-item-prefix-cls}-control {
+  // https://github.com/ant-design/ant-design/issues/34903
+  .@{form-item-prefix-cls}-label[class$='-24'] + .@{form-item-prefix-cls}-control,
+  .@{form-item-prefix-cls}-label[class*='-24 '] + .@{form-item-prefix-cls}-control {
     min-width: unset;
   }
 }

components/form/style/index.less

@@ -210,17 +210,38 @@
     min-height: @form-item-margin-bottom;
   }
 
-  .@{ant-prefix}-input-textarea-show-count {
-    &::after {
-      margin-bottom: -22px;
-    }
-  }
-
   &-with-help &-explain {
     height: auto;
     min-height: @form-item-margin-bottom;
     opacity: 1;
   }
+
+  // ==============================================================
+  // =                        Feedback Icon                       =
+  // ==============================================================
+  &-feedback-icon {
+    font-size: @font-size-base;
+    text-align: center;
+    visibility: visible;
+    animation: zoomIn 0.3s @ease-out-back;
+    pointer-events: none;
+
+    &-success {
+      color: @success-color;
+    }
+
+    &-error {
+      color: @error-color;
+    }
+
+    &-warning {
+      color: @warning-color;
+    }
+
+    &-validating {
+      color: @primary-color;
+    }
+  }
 }
 
 // >>>>>>>>>> Motion <<<<<<<<<<

components/form/style/mixin.less

@@ -10,40 +10,6 @@
   .@{ant-prefix}-form-item-split {
     color: @text-color;
   }
-  // 输入框的不同校验状态
-  :not(.@{ant-prefix}-input-disabled):not(.@{ant-prefix}-input-borderless).@{ant-prefix}-input,
-  :not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper,
-  :not(.@{ant-prefix}-input-number-affix-wrapper-disabled):not(.@{ant-prefix}-input-number-affix-wrapper-borderless).@{ant-prefix}-input-number-affix-wrapper {
-    &,
-    &:hover {
-      background-color: @background-color;
-      border-color: @border-color;
-    }
-
-    &:focus,
-    &-focused {
-      .active(@border-color, @hoverBorderColor, @outlineColor);
-    }
-  }
-
-  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
-    .active(@border-color, @hoverBorderColor, @outlineColor);
-  }
-
-  .@{ant-prefix}-input-prefix,
-  .@{ant-prefix}-input-number-prefix {
-    color: @text-color;
-  }
-
-  .@{ant-prefix}-input-group-addon,
-  .@{ant-prefix}-input-number-group-addon {
-    color: @text-color;
-    border-color: @border-color;
-  }
-
-  .has-feedback {
-    color: @text-color;
-  }
 }
 
 // Reset form styles

components/form/style/status.less

@@ -24,287 +24,19 @@
   }
 
   &-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;
-      }
-    }
-
     // ======================== 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-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-clear,
-    :not(.@{ant-prefix}-input-number-group-addon)
-      > .@{ant-prefix}-select
-      .@{ant-prefix}-select-arrow,
-    :not(.@{ant-prefix}-input-number-group-addon)
-      > .@{ant-prefix}-select
-      .@{ant-prefix}-select-clear {
-      right: 32px;
-    }
-    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
-    :not(.@{ant-prefix}-input-group-addon)
-      > .@{ant-prefix}-select
-      .@{ant-prefix}-select-selection-selected-value,
-    :not(.@{ant-prefix}-input-number-group-addon)
-      > .@{ant-prefix}-select
-      .@{ant-prefix}-select-selection-selected-value {
-      padding-right: 42px;
-    }
-
-    // ======================= Cascader ========================
-    .@{ant-prefix}-cascader-picker {
-      &-arrow {
-        margin-right: 19px;
-      }
-
-      &-clear {
-        right: 32px;
-      }
-    }
-
-    // ======================== 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;
-        }
-      }
-    }
-  }
-
-  // ======================== 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; @warning-color-hover; @warning-color-outline);
-
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      color: @warning-color;
-      animation-name: diffZoomIn3 !important;
-    }
-
-    // Select
-    .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
-      .@{ant-prefix}-select-selector {
-        background-color: @form-warning-input-bg;
-        border-color: @warning-color !important;
-      }
-      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
-      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
-        .active(@warning-color, @warning-color-hover, @warning-color-outline);
-      }
-    }
-
-    // InputNumber, TimePicker
-    .@{ant-prefix}-input-number,
-    .@{ant-prefix}-picker {
-      background-color: @form-warning-input-bg;
-      border-color: @warning-color;
-
-      &-focused,
-      &:focus {
-        .active(@warning-color, @warning-color-hover, @warning-color-outline);
-      }
-
-      &:not([disabled]):hover {
-        background-color: @form-warning-input-bg;
-        border-color: @warning-color;
-      }
-    }
-
-    .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
-      .active(@warning-color, @warning-color-hover, @warning-color-outline);
-    }
   }
 
   // ========================= Error =========================
   &-has-error {
     .form-control-validation(@error-color; @error-color; @form-error-input-bg; @error-color-hover; @error-color-outline);
-
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      color: @error-color;
-      animation-name: diffZoomIn2 !important;
-    }
-
-    // Select
-    .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled):not(.@{ant-prefix}-select-customize-input) {
-      .@{ant-prefix}-select-selector {
-        background-color: @form-error-input-bg;
-        border-color: @error-color !important;
-      }
-      &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
-      &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector {
-        .active(@error-color, @error-color-hover, @error-color-outline);
-      }
-    }
-
-    // fixes https://github.com/ant-design/ant-design/issues/20482
-    .@{ant-prefix}-input-group-addon,
-    .@{ant-prefix}-input-number-group-addon {
-      .@{ant-prefix}-select {
-        &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
-          .@{ant-prefix}-select-selector {
-          background-color: inherit;
-          border: 0;
-          box-shadow: none;
-        }
-      }
-    }
-
-    .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
-      .@{ant-prefix}-input:focus {
-        border-color: @error-color;
-      }
-    }
-
-    // InputNumber, TimePicker
-    .@{ant-prefix}-input-number,
-    .@{ant-prefix}-picker {
-      background-color: @form-error-input-bg;
-      border-color: @error-color;
-
-      &-focused,
-      &:focus {
-        .active(@error-color, @error-color-hover, @error-color-outline);
-      }
-
-      &:not([disabled]):hover {
-        background-color: @form-error-input-bg;
-        border-color: @error-color;
-      }
-    }
-
-    .@{ant-prefix}-mention-wrapper {
-      .@{ant-prefix}-mention-editor {
-        &,
-        &:not([disabled]):hover {
-          background-color: @form-error-input-bg;
-          border-color: @error-color;
-        }
-      }
-      &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
-      .@{ant-prefix}-mention-editor:not([disabled]):focus {
-        .active(@error-color, @error-color-hover, @error-color-outline);
-      }
-    }
-
-    // Cascader
-    .@{ant-prefix}-cascader-picker {
-      &:hover
-        .@{ant-prefix}-cascader-picker-label:hover
-        + .@{ant-prefix}-cascader-input.@{ant-prefix}-input {
-        border-color: @error-color;
-      }
-
-      &:focus .@{ant-prefix}-cascader-input {
-        background-color: @form-error-input-bg;
-        .active(@error-color, @error-color-hover, @error-color-outline);
-      }
-    }
-
-    // Transfer
-    .@{ant-prefix}-transfer {
-      &-list {
-        border-color: @error-color;
-
-        &-search:not([disabled]) {
-          border-color: @input-border-color;
-
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .active();
-          }
-        }
-      }
-    }
-
-    // Radio.Group
-    .@{ant-prefix}-radio-button-wrapper {
-      border-color: @error-color !important;
-
-      &:not(:first-child) {
-        &::before {
-          background-color: @error-color;
-        }
-      }
-    }
-
-    // Mentions
-    .@{ant-prefix}-mentions {
-      border-color: @error-color !important;
-
-      &-focused,
-      &:focus {
-        .active(@error-color, @error-color-hover, @error-color-outline);
-      }
-    }
-  }
-
-  // ====================== Validating =======================
-  &-is-validating {
-    &.@{form-item-prefix-cls}-has-feedback .@{form-item-prefix-cls}-children-icon {
-      display: inline-block;
-      color: @primary-color;
-    }
   }
 }