refactor: feedbackIcon provided by form (#34712)

* refactor: feedbackIcon migration

* test: update snapshot

components/_util/statusUtils.tsx

@@ -1,8 +1,3 @@
-import React from 'react';
-import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
-import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
-import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import classNames from 'classnames';
 import { ValidateStatus } from '../form/FormItem';
 import { tuple } from './type';
@@ -10,22 +5,6 @@ import { tuple } from './type';
 const InputStatuses = tuple('warning', 'error', '');
 export type InputStatus = typeof InputStatuses[number];
 
-const iconMap = {
-  success: CheckCircleFilled,
-  warning: ExclamationCircleFilled,
-  error: CloseCircleFilled,
-  validating: LoadingOutlined,
-};
-
-export const getFeedbackIcon = (prefixCls: string, status?: ValidateStatus) => {
-  const IconNode = status && iconMap[status];
-  return IconNode ? (
-    <span className={`${prefixCls}-feedback-icon`}>
-      <IconNode />
-    </span>
-  ) : null;
-};
-
 export function getStatusClassNames(
   prefixCls: string,
   status?: ValidateStatus,

components/cascader/index.tsx

@@ -146,7 +146,12 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const isRtl = mergedDirection === 'rtl';
 
   // =================== Form =====================
-  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon,
+  } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // =================== Warning =====================
@@ -227,8 +232,8 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !multiple;
   const { suffixIcon, removeIcon, clearIcon } = getIcons({
     ...props,
-    status: mergedStatus,
     hasFeedback,
+    feedbackIcon,
     showArrow: mergedShowArrow,
     multiple,
     prefixCls,

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -6,7 +6,6 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import SwapRightOutlined from '@ant-design/icons/SwapRightOutlined';
 import { RangePicker as RCRangePicker } from 'rc-picker';
 import { GenerateConfig } from 'rc-picker/lib/generate/index';
-import { PickerMode } from 'rc-picker/lib/interface';
 import enUS from '../locale/en_US';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import SizeContext from '../../config-provider/SizeContext';
@@ -15,7 +14,7 @@ import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
 import { FormItemInputContext } from '../../form/context';
-import { getFeedbackIcon, getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 
 export default function generateRangePicker<DateType>(
   generateConfig: GenerateConfig<DateType>,
@@ -39,23 +38,6 @@ export default function generateRangePicker<DateType>(
       }
     };
 
-    renderFeedback = (prefixCls: string) => (
-      <FormItemInputContext.Consumer>
-        {({ hasFeedback, status: contextStatus }) => {
-          const { status: customStatus } = this.props;
-          const status = getMergedStatus(contextStatus, customStatus);
-          return hasFeedback && getFeedbackIcon(prefixCls, status);
-        }}
-      </FormItemInputContext.Consumer>
-    );
-
-    renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
-      <>
-        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-        {this.renderFeedback(prefixCls)}
-      </>
-    );
-
     renderPicker = (contextLocale: PickerLocale) => {
       const locale = { ...contextLocale, ...this.props.locale };
       const { getPrefixCls, direction, getPopupContainer } = this.context;
@@ -89,46 +71,55 @@ export default function generateRangePicker<DateType>(
 
             return (
               <FormItemInputContext.Consumer>
-                {({ hasFeedback, status: contextStatus }) => (
-                  <RCRangePicker<DateType>
-                    separator={
-                      <span aria-label="to" className={`${prefixCls}-separator`}>
-                        <SwapRightOutlined />
-                      </span>
-                    }
-                    ref={this.pickerRef}
-                    dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                    placeholder={getRangePlaceholder(picker, locale, placeholder)}
-                    suffixIcon={this.renderSuffix(prefixCls, picker)}
-                    clearIcon={<CloseCircleFilled />}
-                    prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                    nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                    superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                    superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                    allowClear
-                    transitionName={`${rootPrefixCls}-slide-up`}
-                    {...restProps}
-                    {...additionalOverrideProps}
-                    className={classNames(
-                      {
-                        [`${prefixCls}-${mergedSize}`]: mergedSize,
-                        [`${prefixCls}-borderless`]: !bordered,
-                      },
-                      getStatusClassNames(
-                        prefixCls,
-                        getMergedStatus(contextStatus, customStatus),
-                        hasFeedback,
-                      ),
-                      className,
-                    )}
-                    locale={locale!.lang}
-                    prefixCls={prefixCls}
-                    getPopupContainer={customGetPopupContainer || getPopupContainer}
-                    generateConfig={generateConfig}
-                    components={Components}
-                    direction={direction}
-                  />
-                )}
+                {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
+                  const suffixNode = (
+                    <>
+                      {picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
+                      {hasFeedback && feedbackIcon}
+                    </>
+                  );
+
+                  return (
+                    <RCRangePicker<DateType>
+                      separator={
+                        <span aria-label="to" className={`${prefixCls}-separator`}>
+                          <SwapRightOutlined />
+                        </span>
+                      }
+                      ref={this.pickerRef}
+                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                      placeholder={getRangePlaceholder(picker, locale, placeholder)}
+                      suffixIcon={suffixNode}
+                      clearIcon={<CloseCircleFilled />}
+                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                      allowClear
+                      transitionName={`${rootPrefixCls}-slide-up`}
+                      {...restProps}
+                      {...additionalOverrideProps}
+                      className={classNames(
+                        {
+                          [`${prefixCls}-${mergedSize}`]: mergedSize,
+                          [`${prefixCls}-borderless`]: !bordered,
+                        },
+                        getStatusClassNames(
+                          prefixCls,
+                          getMergedStatus(contextStatus, customStatus),
+                          hasFeedback,
+                        ),
+                        className,
+                      )}
+                      locale={locale!.lang}
+                      prefixCls={prefixCls}
+                      getPopupContainer={customGetPopupContainer || getPopupContainer}
+                      generateConfig={generateConfig}
+                      components={Components}
+                      direction={direction}
+                    />
+                  );
+                }}
               </FormItemInputContext.Consumer>
             );
           }}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -22,12 +22,7 @@ import {
 } from '.';
 import { PickerComponentClass } from './interface';
 import { FormItemInputContext } from '../../form/context';
-import {
-  getFeedbackIcon,
-  getMergedStatus,
-  getStatusClassNames,
-  InputStatus,
-} from '../../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type DatePickerProps = PickerProps<DateType> & {
@@ -68,23 +63,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         }
       };
 
-      renderFeedback = (prefixCls: string) => (
-        <FormItemInputContext.Consumer>
-          {({ hasFeedback, status: contextStatus }) => {
-            const { status: customStatus } = this.props;
-            const status = getMergedStatus(contextStatus, customStatus);
-            return hasFeedback && getFeedbackIcon(prefixCls, status);
-          }}
-        </FormItemInputContext.Consumer>
-      );
-
-      renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
-        <>
-          {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-          {this.renderFeedback(prefixCls)}
-        </>
-      );
-
       renderPicker = (contextLocale: PickerLocale) => {
         const locale = { ...contextLocale, ...this.props.locale };
         const { getPrefixCls, direction, getPopupContainer } = this.context;
@@ -128,42 +106,51 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
               return (
                 <FormItemInputContext.Consumer>
-                  {({ hasFeedback, status: contextStatus }) => (
-                    <RCPicker<DateType>
-                      ref={this.pickerRef}
-                      placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
-                      suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
-                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                      clearIcon={<CloseCircleFilled />}
-                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                      allowClear
-                      transitionName={`${rootPrefixCls}-slide-up`}
-                      {...additionalProps}
-                      {...restProps}
-                      {...additionalOverrideProps}
-                      locale={locale!.lang}
-                      className={classNames(
-                        {
-                          [`${prefixCls}-${mergedSize}`]: mergedSize,
-                          [`${prefixCls}-borderless`]: !bordered,
-                        },
-                        getStatusClassNames(
-                          prefixCls,
-                          getMergedStatus(contextStatus, customStatus),
-                          hasFeedback,
-                        ),
-                        className,
-                      )}
-                      prefixCls={prefixCls}
-                      getPopupContainer={customizeGetPopupContainer || getPopupContainer}
-                      generateConfig={generateConfig}
-                      components={Components}
-                      direction={direction}
-                    />
-                  )}
+                  {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
+                    const suffixNode = (
+                      <>
+                        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
+                        {hasFeedback && feedbackIcon}
+                      </>
+                    );
+
+                    return (
+                      <RCPicker<DateType>
+                        ref={this.pickerRef}
+                        placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
+                        suffixIcon={suffixNode}
+                        dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                        clearIcon={<CloseCircleFilled />}
+                        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                        nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                        allowClear
+                        transitionName={`${rootPrefixCls}-slide-up`}
+                        {...additionalProps}
+                        {...restProps}
+                        {...additionalOverrideProps}
+                        locale={locale!.lang}
+                        className={classNames(
+                          {
+                            [`${prefixCls}-${mergedSize}`]: mergedSize,
+                            [`${prefixCls}-borderless`]: !bordered,
+                          },
+                          getStatusClassNames(
+                            prefixCls,
+                            getMergedStatus(contextStatus, customStatus),
+                            hasFeedback,
+                          ),
+                          className,
+                        )}
+                        prefixCls={prefixCls}
+                        getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+                        generateConfig={generateConfig}
+                        components={Components}
+                        direction={direction}
+                      />
+                    );
+                  }}
                 </FormItemInputContext.Consumer>
               );
             }}

components/date-picker/style/status.less

@@ -21,10 +21,6 @@
       .active(@text-color, @hoverBorderColor, @outlineColor);
     }
   }
-
-  .@{picker-prefix-cls}-feedback-icon {
-    color: @text-color;
-  }
 }
 
 .@{picker-prefix-cls} {
@@ -35,18 +31,4 @@
   &-status-warning {
     .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
   }
-
-  &-status-validating {
-    .@{picker-prefix-cls}-feedback-icon {
-      display: inline-block;
-      color: @primary-color;
-    }
-  }
-
-  &-status-success {
-    .@{picker-prefix-cls}-feedback-icon {
-      color: @success-color;
-      animation-name: diffZoomIn1 !important;
-    }
-  }
 }

components/form/FormItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useContext, useMemo } from 'react';
+import { ReactNode, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { Field, FormInstance, FieldContext, ListContext } from 'rc-field-form';
 import { FieldProps } from 'rc-field-form/lib/Field';
@@ -7,6 +7,10 @@ import { Meta, NamePath } from 'rc-field-form/lib/interface';
 import { supportRef } from 'rc-util/lib/ref';
 import useState from 'rc-util/lib/hooks/useState';
 import omit from 'rc-util/lib/omit';
+import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 import Row from '../grid/row';
 import { ConfigContext } from '../config-provider';
 import { tuple } from '../_util/type';
@@ -88,6 +92,13 @@ function genEmptyMeta(): Meta {
   };
 }
 
+const iconMap = {
+  success: CheckCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  validating: LoadingOutlined,
+};
+
 function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElement {
   const {
     name,
@@ -219,14 +230,29 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
     mergedValidateStatus = 'success';
   }
 
-  const formItemStatusContext = useMemo<FormItemStatusContextProps>(
-    () => ({
+  const formItemStatusContext = useMemo<FormItemStatusContextProps>(() => {
+    let feedbackIcon: ReactNode;
+    if (hasFeedback) {
+      const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus];
+      feedbackIcon = IconNode ? (
+        <span
+          className={classNames(
+            `${prefixCls}-item-feedback-icon`,
+            `${prefixCls}-item-feedback-icon-${mergedValidateStatus}`,
+          )}
+        >
+          <IconNode />
+        </span>
+      ) : null;
+    }
+
+    return {
       status: mergedValidateStatus,
       hasFeedback,
+      feedbackIcon,
       isFormItemInput: true,
-    }),
-    [mergedValidateStatus, hasFeedback],
-  );
+    };
+  }, [mergedValidateStatus, hasFeedback]);
 
   // ======================== Render ========================
   function renderLayout(

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -16390,7 +16390,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
               >
                 <span
                   aria-label="loading"
@@ -16464,7 +16464,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
               >
                 <span
                   aria-label="check-circle"
@@ -16528,7 +16528,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
               >
                 <span
                   aria-label="exclamation-circle"
@@ -16592,7 +16592,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -16690,7 +16690,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                   </svg>
                 </span>
                 <span
-                  class="ant-picker-feedback-icon"
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
                 >
                   <span
                     aria-label="check-circle"
@@ -17336,7 +17336,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                   </svg>
                 </span>
                 <span
-                  class="ant-picker-feedback-icon"
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
                 >
                   <span
                     aria-label="exclamation-circle"
@@ -18833,7 +18833,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </svg>
               </span>
               <span
-                class="ant-picker-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -20136,7 +20136,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </svg>
               </span>
               <span
-                class="ant-select-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -20273,7 +20273,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </svg>
               </span>
               <span
-                class="ant-select-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -20466,7 +20466,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </svg>
               </span>
               <span
-                class="ant-select-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
               >
                 <span
                   aria-label="exclamation-circle"
@@ -21869,7 +21869,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               class="ant-input-number-suffix"
             >
               <span
-                class="ant-input-number-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
               >
                 <span
                   aria-label="check-circle"
@@ -21957,7 +21957,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </span>
               </span>
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
               >
                 <span
                   aria-label="check-circle"
@@ -22044,7 +22044,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </svg>
               </span>
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
               >
                 <span
                   aria-label="exclamation-circle"
@@ -22156,7 +22156,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                 </svg>
               </span>
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -22218,26 +22218,30 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               />
             </div>
             <span
-              class="ant-mentions-feedback-icon"
+              class="ant-mentions-suffix"
             >
               <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle"
-                role="img"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
               </span>
             </span>
           </div>
@@ -22299,26 +22303,30 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
               </span>
             </span>
             <span
-              class="ant-input-feedback-icon"
+              class="ant-input-textarea-suffix"
             >
               <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle"
-                role="img"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
               </span>
             </span>
           </div>

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

@@ -7451,7 +7451,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-validating"
               >
                 <span
                   aria-label="loading"
@@ -7525,7 +7525,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
               >
                 <span
                   aria-label="check-circle"
@@ -7589,7 +7589,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
               >
                 <span
                   aria-label="exclamation-circle"
@@ -7653,7 +7653,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-suffix"
             >
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -7751,7 +7751,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="ant-picker-feedback-icon"
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
                 >
                   <span
                     aria-label="check-circle"
@@ -7843,7 +7843,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                   </svg>
                 </span>
                 <span
-                  class="ant-picker-feedback-icon"
+                  class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
                 >
                   <span
                     aria-label="exclamation-circle"
@@ -7975,7 +7975,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="ant-picker-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -8082,7 +8082,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="ant-select-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -8188,7 +8188,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="ant-select-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -8304,7 +8304,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="ant-select-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
               >
                 <span
                   aria-label="exclamation-circle"
@@ -8599,7 +8599,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-number-suffix"
             >
               <span
-                class="ant-input-number-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
               >
                 <span
                   aria-label="check-circle"
@@ -8687,7 +8687,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </span>
               </span>
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-success"
               >
                 <span
                   aria-label="check-circle"
@@ -8774,7 +8774,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-warning"
               >
                 <span
                   aria-label="exclamation-circle"
@@ -8886,7 +8886,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </svg>
               </span>
               <span
-                class="ant-input-feedback-icon"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
                 <span
                   aria-label="close-circle"
@@ -8948,26 +8948,30 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               />
             </div>
             <span
-              class="ant-mentions-feedback-icon"
+              class="ant-mentions-suffix"
             >
               <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle"
-                role="img"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
               </span>
             </span>
           </div>
@@ -9029,26 +9033,30 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               </span>
             </span>
             <span
-              class="ant-input-feedback-icon"
+              class="ant-input-textarea-suffix"
             >
               <span
-                aria-label="close-circle"
-                class="anticon anticon-close-circle"
-                role="img"
+                class="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
               >
-                <svg
-                  aria-hidden="true"
-                  data-icon="close-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="close-circle"
+                  class="anticon anticon-close-circle"
+                  role="img"
                 >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="close-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+                    />
+                  </svg>
+                </span>
               </span>
             </span>
           </div>

components/form/context.tsx

@@ -3,7 +3,7 @@ import omit from 'rc-util/lib/omit';
 import { Meta } from 'rc-field-form/lib/interface';
 import { FormProvider as RcFormProvider } from 'rc-field-form';
 import { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext';
-import { FC, PropsWithChildren, useMemo } from 'react';
+import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
 import { ColProps } from '../grid/col';
 import { FormLabelAlign } from './interface';
 import { RequiredMark } from './Form';
@@ -56,6 +56,7 @@ export interface FormItemStatusContextProps {
   isFormItemInput?: boolean;
   status?: ValidateStatus;
   hasFeedback?: boolean;
+  feedbackIcon?: ReactNode;
 }
 
 export const FormItemInputContext = React.createContext<FormItemStatusContextProps>({});

components/form/style/index.less

@@ -223,6 +223,33 @@
     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/input-number/index.tsx

@@ -8,12 +8,7 @@ import { ConfigContext } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { cloneElement } from '../_util/reactNode';
-import {
-  getFeedbackIcon,
-  getStatusClassNames,
-  InputStatus,
-  getMergedStatus,
-} from '../_util/statusUtils';
+import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
 
 type ValueType = string | number;
 
@@ -71,7 +66,12 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
       );
   }
 
-  const { hasFeedback, status: contextStatus, isFormItemInput } = useContext(FormItemInputContext);
+  const {
+    hasFeedback,
+    status: contextStatus,
+    isFormItemInput,
+    feedbackIcon,
+  } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   const mergeSize = customizeSize || size;
@@ -137,9 +137,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
             props.onBlur?.(event);
           },
         })}
-        {hasFeedback && (
-          <span className={`${prefixCls}-suffix`}>{getFeedbackIcon(prefixCls, mergedStatus)}</span>
-        )}
+        {hasFeedback && <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>}
       </div>
     );
   }

components/input-number/style/status.less

@@ -18,22 +18,6 @@ each(@input-number-wrapper-cls, {
   }
 });
 
-.@{input-number-prefix-cls}-affix-wrapper {
-  &-status-validating {
-    .@{input-number-prefix-cls}-feedback-icon {
-      display: inline-block;
-      color: @primary-color;
-    }
-  }
-
-  &-status-success {
-    .@{input-number-prefix-cls}-feedback-icon {
-      color: @success-color;
-      animation-name: diffZoomIn1 !important;
-    }
-  }
-}
-
 .@{input-number-prefix-cls}-group-wrapper {
   &-status-error {
     .group-status-color(@input-number-prefix-cls, @error-color, @error-color);

components/input/Input.tsx

@@ -4,12 +4,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import {
-  getFeedbackIcon,
-  getMergedStatus,
-  getStatusClassNames,
-  InputStatus,
-} from '../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { hasPrefixSuffix } from './utils';
@@ -145,7 +140,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const mergedSize = customSize || size;
 
   // ===================== Status =====================
-  const { status: contextStatus, hasFeedback } = useContext(FormItemInputContext);
+  const { status: contextStatus, hasFeedback, feedbackIcon } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Focus warning =====================
@@ -196,7 +191,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const suffixNode = (hasFeedback || suffix) && (
     <>
       {suffix}
-      {hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
+      {hasFeedback && feedbackIcon}
     </>
   );
 

components/input/TextArea.tsx

@@ -7,12 +7,7 @@ import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import {
-  getFeedbackIcon,
-  getStatusClassNames,
-  InputStatus,
-  getMergedStatus,
-} from '../_util/statusUtils';
+import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
 import ClearableLabeledInput from './ClearableLabeledInput';
 import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
 
@@ -79,7 +74,11 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
 
-    const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
+    const {
+      status: contextStatus,
+      hasFeedback,
+      feedbackIcon,
+    } = React.useContext(FormItemInputContext);
     const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
     const innerRef = React.useRef<RcTextArea>(null);
@@ -242,7 +241,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
           data-count={dataCount}
         >
           {textareaNode}
-          {hasFeedback && getFeedbackIcon(prefixCls, mergedStatus)}
+          {hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
         </div>
       );
     }

components/input/style/index.less

@@ -62,6 +62,17 @@
       pointer-events: none;
     }
   }
+
+  &-textarea-suffix {
+    position: absolute;
+    top: 0;
+    right: @input-padding-horizontal-base;
+    bottom: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    margin: auto;
+  }
 }
 
 @import './search-input';

components/input/style/mixin.less

@@ -453,10 +453,6 @@
   @hoverBorderColor: @primary-color-hover;
   @outlineColor: @primary-color-outline;
 ) {
-  .@{prefix-cls}-feedback-icon {
-    color: @text-color;
-  }
-
   .@{prefix-cls}-prefix {
     color: @text-color;
   }

components/input/style/status.less

@@ -18,47 +18,7 @@ each(@input-wrapper-cls, {
   }
 });
 
-.@{input-prefix-cls}-textarea,
-.@{input-prefix-cls}-affix-wrapper {
-  &-status-validating {
-    .@{input-prefix-cls}-feedback-icon {
-      display: inline-block;
-      color: @primary-color;
-    }
-  }
-
-  &-status-success {
-    .@{input-prefix-cls}-feedback-icon {
-      color: @success-color;
-      animation-name: diffZoomIn1 !important;
-    }
-  }
-}
-
 .@{input-prefix-cls}-textarea {
-  &-status-error {
-    .@{input-prefix-cls}-feedback-icon {
-      color: @error-color;
-    }
-  }
-
-  &-status-warning {
-    .@{input-prefix-cls}-feedback-icon {
-      color: @warning-color;
-    }
-  }
-
-  .@{input-prefix-cls}-feedback-icon {
-    position: absolute;
-    top: 0;
-    right: @input-padding-horizontal-base;
-    bottom: 0;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    margin: auto;
-  }
-
   &-status-error,
   &-status-warning,
   &-status-success,

components/mentions/index.tsx

@@ -6,12 +6,7 @@ import { composeRef } from 'rc-util/lib/ref';
 import Spin from '../spin';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext } from '../form/context';
-import {
-  getFeedbackIcon,
-  getMergedStatus,
-  getStatusClassNames,
-  InputStatus,
-} from '../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 
 export const { Option } = RcMentions;
 
@@ -70,7 +65,11 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
   const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
-  const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
+  const {
+    status: contextStatus,
+    hasFeedback,
+    feedbackIcon,
+  } = React.useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   const onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
@@ -154,7 +153,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
         )}
       >
         {mentions}
-        {getFeedbackIcon(prefixCls, mergedStatus)}
+        <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>
       </div>
     );
   }

components/mentions/style/index.less

@@ -163,6 +163,17 @@
       }
     }
   }
+
+  &-suffix {
+    position: absolute;
+    top: 0;
+    right: @input-padding-horizontal-base;
+    bottom: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    margin: auto;
+  }
 }
 
 @import './rtl';

components/mentions/style/status.less

@@ -13,31 +13,4 @@
     .status-color(@mention-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
     .status-color-common(@input-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
   }
-
-  &-affix-wrapper {
-    position: relative;
-
-    .@{mention-prefix-cls}-feedback-icon {
-      position: absolute;
-      top: 0;
-      right: @input-padding-horizontal-base;
-      bottom: 0;
-      z-index: 1;
-      display: inline-flex;
-      align-items: center;
-      margin: auto;
-    }
-
-    &-status-error {
-      .@{mention-prefix-cls}-feedback-icon {
-        color: @error-color;
-      }
-    }
-
-    &-has-warning {
-      .@{mention-prefix-cls}-feedback-icon {
-        color: @warning-color;
-      }
-    }
-  }
 }

components/select/index.tsx

@@ -100,7 +100,12 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
 
   // ===================== Form Status =====================
-  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon,
+  } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Empty =====================
@@ -117,8 +122,8 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons({
     ...props,
     multiple: isMultiple,
-    status: mergedStatus,
     hasFeedback,
+    feedbackIcon,
     showArrow: mergedShowArrow,
     prefixCls,
   });

components/select/style/index.less

@@ -147,6 +147,10 @@
     .@{select-prefix-cls}-disabled & {
       cursor: not-allowed;
     }
+
+    > *:not(:last-child) {
+      margin-inline-end: @padding-xs;
+    }
   }
 
   // ========================== Clear ==========================

components/select/style/status.less

@@ -19,10 +19,6 @@
       .active(@border-color, @hoverBorderColor, @outlineColor);
     }
   }
-
-  .@{select-prefix-cls}-feedback-icon {
-    color: @text-color;
-  }
 }
 
 .@{select-prefix-cls} {
@@ -34,18 +30,6 @@
     .select-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
   }
 
-  &-status-success {
-    .@{select-prefix-cls}-feedback-icon {
-      color: @success-color;
-    }
-  }
-
-  &-status-validating {
-    .@{select-prefix-cls}-feedback-icon {
-      color: @primary-color;
-    }
-  }
-
   &-status-error,
   &-status-warning,
   &-status-success,
@@ -61,16 +45,4 @@
       }
     }
   }
-
-  &-feedback-icon {
-    font-size: @font-size-base;
-    text-align: center;
-    visibility: visible;
-    animation: zoomIn 0.3s @ease-out-back;
-    pointer-events: none;
-
-    &:not(:first-child) {
-      margin-left: 8px;
-    }
-  }
 }

components/select/utils/iconUtil.tsx

@@ -6,8 +6,6 @@ import CheckOutlined from '@ant-design/icons/CheckOutlined';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
-import { ValidateStatus } from '../../form/FormItem';
-import { getFeedbackIcon } from '../../_util/statusUtils';
 
 export default function getIcons({
   suffixIcon,
@@ -17,9 +15,9 @@ export default function getIcons({
   loading,
   multiple,
   hasFeedback,
-  status,
   prefixCls,
   showArrow,
+  feedbackIcon,
 }: {
   suffixIcon?: React.ReactNode;
   clearIcon?: React.ReactNode;
@@ -28,7 +26,7 @@ export default function getIcons({
   loading?: boolean;
   multiple?: boolean;
   hasFeedback?: boolean;
-  status?: ValidateStatus;
+  feedbackIcon?: ReactNode;
   prefixCls: string;
   showArrow?: boolean;
 }) {
@@ -42,7 +40,7 @@ export default function getIcons({
   const getSuffixIconNode = (arrowIcon?: ReactNode) => (
     <>
       {showArrow !== false && arrowIcon}
-      {hasFeedback && getFeedbackIcon(prefixCls, status)}
+      {hasFeedback && feedbackIcon}
     </>
   );
 

components/tree-select/index.tsx

@@ -105,16 +105,21 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
 
   // ===================== Form =====================
-  const { status: contextStatus, hasFeedback, isFormItemInput } = useContext(FormItemInputContext);
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon,
+  } = useContext(FormItemInputContext);
   const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
   // ===================== Icons =====================
   const { suffixIcon, removeIcon, clearIcon } = getIcons({
     ...props,
     multiple: isMultiple,
-    status: mergedStatus,
     showArrow: mergedShowArrow,
     hasFeedback,
+    feedbackIcon,
     prefixCls,
   });