Merge branch 'feature' into next-merge-feature

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

@@ -149,7 +149,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 =====================
@@ -234,8 +239,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 }) => (
+                {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
-                  <RCRangePicker<DateType>
+                  const suffixNode = (
-                    separator={
+                    <>
-                      <span aria-label="to" className={`${prefixCls}-separator`}>
+                      {picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                        <SwapRightOutlined />
+                      {hasFeedback && feedbackIcon}
-                      </span>
+                    </>
-                    }
+                  );
-                    ref={this.pickerRef}
+
-                    dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                  return (
-                    placeholder={getRangePlaceholder(picker, locale, placeholder)}
+                    <RCRangePicker<DateType>
-                    suffixIcon={this.renderSuffix(prefixCls, picker)}
+                      separator={
-                    clearIcon={<CloseCircleFilled />}
+                        <span aria-label="to" className={`${prefixCls}-separator`}>
-                    prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+                          <SwapRightOutlined />
-                    nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                        </span>
-                    superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                      }
-                    superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                      ref={this.pickerRef}
-                    allowClear
+                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                    transitionName={`${rootPrefixCls}-slide-up`}
+                      placeholder={getRangePlaceholder(picker, locale, placeholder)}
-                    {...restProps}
+                      suffixIcon={suffixNode}
-                    {...additionalOverrideProps}
+                      clearIcon={<CloseCircleFilled />}
-                    className={classNames(
+                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                      {
+                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                        [`${prefixCls}-${mergedSize}`]: mergedSize,
+                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                        [`${prefixCls}-borderless`]: !bordered,
+                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                      },
+                      allowClear
-                      getStatusClassNames(
+                      transitionName={`${rootPrefixCls}-slide-up`}
-                        prefixCls,
+                      {...restProps}
-                        getMergedStatus(contextStatus, customStatus),
+                      {...additionalOverrideProps}
-                        hasFeedback,
+                      className={classNames(
-                      ),
+                        {
-                      className,
+                          [`${prefixCls}-${mergedSize}`]: mergedSize,
-                    )}
+                          [`${prefixCls}-borderless`]: !bordered,
-                    locale={locale!.lang}
+                        },
-                    prefixCls={prefixCls}
+                        getStatusClassNames(
-                    getPopupContainer={customGetPopupContainer || getPopupContainer}
+                          prefixCls,
-                    generateConfig={generateConfig}
+                          getMergedStatus(contextStatus, customStatus),
-                    components={Components}
+                          hasFeedback,
-                    direction={direction}
+                        ),
-                  />
+                        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 {
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../../_util/statusUtils';
-  getFeedbackIcon,
-  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 }) => (
+                  {({ hasFeedback, status: contextStatus, feedbackIcon }) => {
-                    <RCPicker<DateType>
+                    const suffixNode = (
-                      ref={this.pickerRef}
+                      <>
-                      placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
+                        {mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
-                      suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
+                        {hasFeedback && feedbackIcon}
-                      dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                      </>
-                      clearIcon={<CloseCircleFilled />}
+                    );
-                      prevIcon={<span className={`${prefixCls}-prev-icon`} />}
+
-                      nextIcon={<span className={`${prefixCls}-next-icon`} />}
+                    return (
-                      superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
+                      <RCPicker<DateType>
-                      superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
+                        ref={this.pickerRef}
-                      allowClear
+                        placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
-                      transitionName={`${rootPrefixCls}-slide-up`}
+                        suffixIcon={suffixNode}
-                      {...additionalProps}
+                        dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-                      {...restProps}
+                        clearIcon={<CloseCircleFilled />}
-                      {...additionalOverrideProps}
+                        prevIcon={<span className={`${prefixCls}-prev-icon`} />}
-                      locale={locale!.lang}
+                        nextIcon={<span className={`${prefixCls}-next-icon`} />}
-                      className={classNames(
+                        superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
-                        {
+                        superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
-                          [`${prefixCls}-${mergedSize}`]: mergedSize,
+                        allowClear
-                          [`${prefixCls}-borderless`]: !bordered,
+                        transitionName={`${rootPrefixCls}-slide-up`}
-                        },
+                        {...additionalProps}
-                        getStatusClassNames(
+                        {...restProps}
-                          prefixCls,
+                        {...additionalOverrideProps}
-                          getMergedStatus(contextStatus, customStatus),
+                        locale={locale!.lang}
-                          hasFeedback,
+                        className={classNames(
-                        ),
+                          {
-                        className,
+                            [`${prefixCls}-${mergedSize}`]: mergedSize,
-                      )}
+                            [`${prefixCls}-borderless`]: !bordered,
-                      prefixCls={prefixCls}
+                          },
-                      getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+                          getStatusClassNames(
-                      generateConfig={generateConfig}
+                            prefixCls,
-                      components={Components}
+                            getMergedStatus(contextStatus, customStatus),
-                      direction={direction}
+                            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

@@ -5188,7 +5188,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-textarea ant-input-textarea-show-count"
+            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
             data-count="0 / 100"
           >
             <textarea
@@ -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="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-                class="anticon anticon-close-circle"
-                role="img"
               >
-                <svg
+                <span
-                  aria-hidden="true"
+                  aria-label="close-circle"
-                  data-icon="close-circle"
+                  class="anticon anticon-close-circle"
-                  fill="currentColor"
+                  role="img"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
                 >
-                  <path
+                  <svg
-                    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"
+                    aria-hidden="true"
-                  />
+                    data-icon="close-circle"
-                </svg>
+                    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>
@@ -22268,7 +22272,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-status-error ant-input-textarea-has-feedback"
+            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
             data-count="0"
           >
             <span
@@ -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="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-                class="anticon anticon-close-circle"
-                role="img"
               >
-                <svg
+                <span
-                  aria-hidden="true"
+                  aria-label="close-circle"
-                  data-icon="close-circle"
+                  class="anticon anticon-close-circle"
-                  fill="currentColor"
+                  role="img"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
                 >
-                  <path
+                  <svg
-                    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"
+                    aria-hidden="true"
-                  />
+                    data-icon="close-circle"
-                </svg>
+                    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

@@ -4370,7 +4370,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-textarea ant-input-textarea-show-count"
+            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item"
             data-count="0 / 100"
           >
             <textarea
@@ -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="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-                class="anticon anticon-close-circle"
-                role="img"
               >
-                <svg
+                <span
-                  aria-hidden="true"
+                  aria-label="close-circle"
-                  data-icon="close-circle"
+                  class="anticon anticon-close-circle"
-                  fill="currentColor"
+                  role="img"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
                 >
-                  <path
+                  <svg
-                    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"
+                    aria-hidden="true"
-                  />
+                    data-icon="close-circle"
-                </svg>
+                    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>
@@ -8998,7 +9002,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <div
-            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-status-error ant-input-textarea-has-feedback"
+            class="ant-input-textarea ant-input-textarea-show-count ant-input-textarea-in-form-item ant-input-textarea-status-error ant-input-textarea-has-feedback"
             data-count="0"
           >
             <span
@@ -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="ant-form-item-feedback-icon ant-form-item-feedback-icon-error"
-                class="anticon anticon-close-circle"
-                role="img"
               >
-                <svg
+                <span
-                  aria-hidden="true"
+                  aria-label="close-circle"
-                  data-icon="close-circle"
+                  class="anticon anticon-close-circle"
-                  fill="currentColor"
+                  role="img"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
                 >
-                  <path
+                  <svg
-                    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"
+                    aria-hidden="true"
-                  />
+                    data-icon="close-circle"
-                </svg>
+                    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

@@ -212,17 +212,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/input-number/index.tsx

@@ -8,13 +8,8 @@ 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 useStyle from './style';
+import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
 
 type ValueType = string | number;
 
@@ -76,7 +71,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;
@@ -144,9 +144,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
             props.onBlur?.(event);
           },
         })}
-        {hasFeedback && (
+        {hasFeedback && <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>}
-          <span className={`${prefixCls}-suffix`}>{getFeedbackIcon(prefixCls, mergedStatus)}</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 {
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
-  getFeedbackIcon,
-  getMergedStatus,
-  getStatusClassNames,
-  InputStatus,
-} from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { hasPrefixSuffix } from './utils';
@@ -151,7 +146,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 =====================
@@ -202,7 +197,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 {
+import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
-  getFeedbackIcon,
-  getStatusClassNames,
-  InputStatus,
-  getMergedStatus,
-} from '../_util/statusUtils';
 import ClearableLabeledInput from './ClearableLabeledInput';
 import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
 import useStyle from './style';
@@ -80,7 +75,12 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
 
-    const { status: contextStatus, hasFeedback } = React.useContext(FormItemInputContext);
+    const {
+      status: contextStatus,
+      hasFeedback,
+      isFormItemInput,
+      feedbackIcon,
+    } = React.useContext(FormItemInputContext);
     const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
     const innerRef = React.useRef<RcTextArea>(null);
@@ -240,6 +240,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
             {
               [`${prefixCls}-textarea-rtl`]: direction === 'rtl',
               [`${prefixCls}-textarea-show-count`]: showCount,
+              [`${prefixCls}-textarea-in-form-item`]: isFormItemInput,
             },
             getStatusClassNames(`${prefixCls}-textarea`, mergedStatus, hasFeedback),
             className,
@@ -249,7 +250,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.tsx

@@ -96,7 +96,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
         }),
       },
 
-      [`.${prefixCls}-feedback-icon, .${prefixCls}-prefix`]: {
+      [`.${prefixCls}-prefix`]: {
         color: colorError,
       },
     },
@@ -114,7 +114,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
         }),
       },
 
-      [`.${prefixCls}-feedback-icon, .${prefixCls}-prefix`]: {
+      [`.${prefixCls}-prefix`]: {
         color: colorWarning,
       },
     },
@@ -510,22 +510,6 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
           paddingBottom: 3, // FIXME: magic number
         },
       },
-
-      '&-textarea-show-count': {
-        // https://github.com/ant-design/ant-design/issues/33049
-        [`> .${prefixCls}`]: {
-          height: '100%',
-        },
-
-        '&::after': {
-          textAlign: 'end',
-          color: token.colorTextSecondary,
-          whiteSpace: 'nowrap',
-          content: 'attr(data-count)',
-          pointerEvents: 'none',
-          display: 'block',
-        },
-      },
     },
   };
 };
@@ -633,6 +617,10 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
           display: 'flex',
           flex: 'none',
           alignItems: 'center',
+
+          '> *:not(:last-child)': {
+            marginInlineEnd: 8, // FIXME: magic number
+          },
         },
 
         '&-show-count-suffix': {
@@ -640,7 +628,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
         },
 
         '&-show-count-has-suffix': {
-          marginInlineEnd: 2, // FIXME: magic number
+          marginInlineEnd: token.marginXXS,
         },
 
         '&-prefix': {
@@ -667,18 +655,6 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
 
       // status
       ...genStatusStyle(token),
-      '&-status-validating': {
-        [`.${prefixCls}-feedback-icon`]: {
-          display: 'inline-block',
-          color: colorPrimary,
-        },
-      },
-      '&-status-success': {
-        [`.${prefixCls}-feedback-icon`]: {
-          color: colorSuccess,
-          // FIXME: animationName
-        },
-      },
     },
   };
 };
@@ -834,7 +810,7 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
 
   return {
     [textareaPrefixCls]: {
-      [`.${prefixCls}-feedback-icon`]: {
+      [`${textareaPrefixCls}-suffix`]: {
         position: 'absolute',
         top: 0,
         insetInlineEnd: inputPaddingHorizontal,
@@ -855,6 +831,28 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
           },
         },
       },
+
+      '&-show-count': {
+        // https://github.com/ant-design/ant-design/issues/33049
+        [`> .${prefixCls}`]: {
+          height: '100%',
+        },
+
+        '&::after': {
+          textAlign: 'end',
+          color: token.colorTextSecondary,
+          whiteSpace: 'nowrap',
+          content: 'attr(data-count)',
+          pointerEvents: 'none',
+          display: 'block',
+        },
+
+        [`&${textareaPrefixCls}-in-form-item`]: {
+          '&::after': {
+            marginBottom: -Math.floor(token.fontSize * token.lineHeight),
+          },
+        },
+      },
     },
   };
 };

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,13 +6,8 @@ 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 useStyle from './style';
+import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
 
 export const { Option } = RcMentions;
 
@@ -72,7 +67,11 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
   const { getPrefixCls, renderEmpty, direction, iconPrefixCls } = 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) => {
@@ -162,7 +161,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
         )}
       >
         {mentions}
-        {getFeedbackIcon(prefixCls, mergedStatus)}
+        <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>
       </div>
     );
   }

components/mentions/style/index.tsx

@@ -61,6 +61,17 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
         ...genActiveStyle(token),
       },
 
+      [`&-affix-wrapper ${mentionsCls}-suffix`]: {
+        position: 'absolute',
+        top: 0,
+        insetInlineEnd: inputPaddingHorizontal,
+        bottom: 0,
+        zIndex: 1,
+        display: 'inline-flex',
+        alignItems: 'center',
+        margin: 'auto',
+      },
+
       // ================= Input Area =================
       [`> textarea, ${mentionsCls}-measure`]: {
         minHeight: controlHeight - 2,

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

@@ -105,7 +105,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 =====================
@@ -122,8 +127,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

@@ -1,322 +1,322 @@
-// @import '../../style/themes/index';
+//@import '../../style/themes/index';
-// @import '../../style/mixins/index';
+//@import '../../style/mixins/index';
-// @import '../../input/style/mixin';
+//@import '../../input/style/mixin';
-// @import './single';
+//@import './single';
-// @import './multiple';
+//@import './multiple';
-// @import './status';
+//@import './status';
-
+//
-// @select-prefix-cls: ~'@{ant-prefix}-select';
+//@select-prefix-cls: ~'@{ant-prefix}-select';
-// @select-height-without-border: @input-height-base - 2 * @border-width-base;
+//@select-height-without-border: @input-height-base - 2 * @border-width-base;
-// @select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
+//@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
-
+//
-// .select-selector() {
+//.select-selector() {
-//   position: relative;
+//  position: relative;
-//   background-color: @select-background;
+//  background-color: @select-background;
-//   border: @border-width-base @border-style-base @select-border-color;
+//  border: @border-width-base @border-style-base @select-border-color;
-//   border-radius: @border-radius-base;
+//  border-radius: @border-radius-base;
-//   transition: all 0.3s @ease-in-out;
+//  transition: all 0.3s @ease-in-out;
-
+//
-//   input {
+//  input {
-//     cursor: pointer;
+//    cursor: pointer;
-//   }
+//  }
-
+//
-//   .@{select-prefix-cls}-show-search& {
+//  .@{select-prefix-cls}-show-search& {
-//     cursor: text;
+//    cursor: text;
-
+//
-//     input {
+//    input {
-//       cursor: auto;
+//      cursor: auto;
-//     }
+//    }
-//   }
+//  }
-
+//
-//   .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
+//  .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
-//     .active();
+//    .active();
-//   }
+//  }
-
+//
-//   .@{select-prefix-cls}-disabled& {
+//  .@{select-prefix-cls}-disabled& {
-//     color: @disabled-color;
+//    color: @disabled-color;
-//     background: @input-disabled-bg;
+//    background: @input-disabled-bg;
-//     cursor: not-allowed;
+//    cursor: not-allowed;
-
+//
-//     .@{select-prefix-cls}-multiple& {
+//    .@{select-prefix-cls}-multiple& {
-//       background: @select-multiple-disabled-background;
+//      background: @select-multiple-disabled-background;
-//     }
+//    }
-
+//
-//     input {
+//    input {
-//       cursor: not-allowed;
+//      cursor: not-allowed;
-//     }
+//    }
-//   }
+//  }
-// }
+//}
-
+//
-// /* Reset search input style */
+///* Reset search input style */
-// .select-search-input-without-border() {
+//.select-search-input-without-border() {
-//   .@{select-prefix-cls}-selection-search-input {
+//  .@{select-prefix-cls}-selection-search-input {
-//     margin: 0;
+//    margin: 0;
-//     padding: 0;
+//    padding: 0;
-//     background: transparent;
+//    background: transparent;
-//     border: none;
+//    border: none;
-//     outline: none;
+//    outline: none;
-//     appearance: none;
+//    appearance: none;
-
+//
-//     &::-webkit-search-cancel-button {
+//    &::-webkit-search-cancel-button {
-//       display: none;
+//      display: none;
-//       /* stylelint-disable-next-line property-no-vendor-prefix */
+//      /* stylelint-disable-next-line property-no-vendor-prefix */
-//       -webkit-appearance: none;
+//      -webkit-appearance: none;
-//     }
+//    }
-//   }
+//  }
-// }
+//}
-
+//
-// .@{select-prefix-cls} {
+//.@{select-prefix-cls} {
-//   .reset-component();
+//  .reset-component();
-//   position: relative;
+//  position: relative;
-//   display: inline-block;
+//  display: inline-block;
-//   cursor: pointer;
+//  cursor: pointer;
-
+//
-//   &:not(&-customize-input) &-selector {
+//  &:not(&-customize-input) &-selector {
-//     .select-selector();
+//    .select-selector();
-//     .select-search-input-without-border();
+//    .select-search-input-without-border();
-//   }
+//  }
-
+//
-//   &:not(&-disabled):hover &-selector {
+//  &:not(&-disabled):hover &-selector {
-//     .hover();
+//    .hover();
-//   }
+//  }
-
+//
-//   // ======================== Selection ========================
+//  // ======================== Selection ========================
-//   &-selection-item {
+//  &-selection-item {
-//     flex: 1;
+//    flex: 1;
-//     overflow: hidden;
+//    overflow: hidden;
-//     font-weight: normal;
+//    font-weight: normal;
-//     white-space: nowrap;
+//    white-space: nowrap;
-//     text-overflow: ellipsis;
+//    text-overflow: ellipsis;
-
+//
-//     // IE11 css hack. `*::-ms-backdrop,` is a must have
+//    // IE11 css hack. `*::-ms-backdrop,` is a must have
-//     @media all and (-ms-high-contrast: none) {
+//    @media all and (-ms-high-contrast: none) {
-//       *::-ms-backdrop,
+//      *::-ms-backdrop,
-//       & {
+//      & {
-//         flex: auto;
+//        flex: auto;
-//       }
+//      }
-//     }
+//    }
-//   }
+//  }
-
+//
-//   // ======================= Placeholder =======================
+//  // ======================= Placeholder =======================
-//   &-selection-placeholder {
+//  &-selection-placeholder {
-//     flex: 1;
+//    flex: 1;
-//     overflow: hidden;
+//    overflow: hidden;
-//     color: @input-placeholder-color;
+//    color: @input-placeholder-color;
-//     white-space: nowrap;
+//    white-space: nowrap;
-//     text-overflow: ellipsis;
+//    text-overflow: ellipsis;
-//     pointer-events: none;
+//    pointer-events: none;
-
+//
-//     // IE11 css hack. `*::-ms-backdrop,` is a must have
+//    // IE11 css hack. `*::-ms-backdrop,` is a must have
-//     @media all and (-ms-high-contrast: none) {
+//    @media all and (-ms-high-contrast: none) {
-//       *::-ms-backdrop,
+//      *::-ms-backdrop,
-//       & {
+//      & {
-//         flex: auto;
+//        flex: auto;
-//       }
+//      }
-//     }
+//    }
-//   }
+//  }
-
+//
-//   // ========================== Arrow ==========================
+//  // ========================== Arrow ==========================
-//   &-arrow {
+//  &-arrow {
-//     .iconfont-mixin();
+//    .iconfont-mixin();
-//     position: absolute;
+//    position: absolute;
-//     top: 50%;
+//    top: 50%;
-//     right: @control-padding-horizontal - 1px;
+//    right: @control-padding-horizontal - 1px;
-//     display: flex;
+//    display: flex;
-//     align-items: center;
+//    align-items: center;
-//     height: @font-size-sm;
+//    height: @font-size-sm;
-//     margin-top: (-@font-size-sm / 2);
+//    margin-top: (-@font-size-sm / 2);
-//     color: @disabled-color;
+//    color: @disabled-color;
-//     font-size: @font-size-sm;
+//    font-size: @font-size-sm;
-//     line-height: 1;
+//    line-height: 1;
-//     text-align: center;
+//    text-align: center;
-//     pointer-events: none;
+//    pointer-events: none;
-
+//
-//     .@{iconfont-css-prefix} {
+//    .@{iconfont-css-prefix} {
-//       vertical-align: top;
+//      vertical-align: top;
-//       transition: transform 0.3s;
+//      transition: transform 0.3s;
-
+//
-//       > svg {
+//      > svg {
-//         vertical-align: top;
+//        vertical-align: top;
-//       }
+//      }
-
+//
-//       &:not(.@{select-prefix-cls}-suffix) {
+//      &:not(.@{select-prefix-cls}-suffix) {
-//         pointer-events: auto;
+//        pointer-events: auto;
-//       }
+//      }
-//     }
+//    }
-
+//
-//     .@{select-prefix-cls}-disabled & {
+//    .@{select-prefix-cls}-disabled & {
-//       cursor: not-allowed;
+//      cursor: not-allowed;
-//     }
+//    }
-//   }
+//  }
-
+//
-//   // ========================== Clear ==========================
+//  // ========================== Clear ==========================
-//   &-clear {
+//  &-clear {
-//     position: absolute;
+//    position: absolute;
-//     top: 50%;
+//    top: 50%;
-//     right: @control-padding-horizontal - 1px;
+//    right: @control-padding-horizontal - 1px;
-//     z-index: 1;
+//    z-index: 1;
-//     display: inline-block;
+//    display: inline-block;
-//     width: @font-size-sm;
+//    width: @font-size-sm;
-//     height: @font-size-sm;
+//    height: @font-size-sm;
-//     margin-top: (-@font-size-sm / 2);
+//    margin-top: (-@font-size-sm / 2);
-//     color: @disabled-color;
+//    color: @disabled-color;
-//     font-size: @font-size-sm;
+//    font-size: @font-size-sm;
-//     font-style: normal;
+//    font-style: normal;
-//     line-height: 1;
+//    line-height: 1;
-//     text-align: center;
+//    text-align: center;
-//     text-transform: none;
+//    text-transform: none;
-//     background: @select-clear-background;
+//    background: @select-clear-background;
-//     cursor: pointer;
+//    cursor: pointer;
-//     opacity: 0;
+//    opacity: 0;
-//     transition: color 0.3s ease, opacity 0.15s ease;
+//    transition: color 0.3s ease, opacity 0.15s ease;
-//     text-rendering: auto;
+//    text-rendering: auto;
-
+//
-//     &::before {
+//    &::before {
-//       display: block;
+//      display: block;
-//     }
+//    }
-
+//
-//     &:hover {
+//    &:hover {
-//       color: @text-color-secondary;
+//      color: @text-color-secondary;
-//     }
+//    }
-
+//
-//     .@{select-prefix-cls}:hover & {
+//    .@{select-prefix-cls}:hover & {
-//       opacity: 1;
+//      opacity: 1;
-//     }
+//    }
-//   }
+//  }
-
+//
-//   // ========================== Popup ==========================
+//  // ========================== Popup ==========================
-//   &-dropdown {
+//  &-dropdown {
-//     .reset-component();
+//    .reset-component();
-//     position: absolute;
+//    position: absolute;
-//     top: -9999px;
+//    top: -9999px;
-//     left: -9999px;
+//    left: -9999px;
-//     z-index: @zindex-dropdown;
+//    z-index: @zindex-dropdown;
-//     box-sizing: border-box;
+//    box-sizing: border-box;
-//     padding: @select-dropdown-edge-child-vertical-padding 0;
+//    padding: @select-dropdown-edge-child-vertical-padding 0;
-//     overflow: hidden;
+//    overflow: hidden;
-//     font-size: @font-size-base;
+//    font-size: @font-size-base;
-//     // Fix select render lag of long text in chrome
+//    // Fix select render lag of long text in chrome
-//     // https://github.com/ant-design/ant-design/issues/11456
+//    // https://github.com/ant-design/ant-design/issues/11456
-//     // https://github.com/ant-design/ant-design/issues/11843
+//    // https://github.com/ant-design/ant-design/issues/11843
-//     font-variant: initial;
+//    font-variant: initial;
-//     background-color: @select-dropdown-bg;
+//    background-color: @select-dropdown-bg;
-//     border-radius: @border-radius-base;
+//    border-radius: @border-radius-base;
-//     outline: none;
+//    outline: none;
-//     box-shadow: @box-shadow-base;
+//    box-shadow: @box-shadow-base;
-
+//
-//     &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
+//    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
-//     &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
+//    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
-//       animation-name: antSlideUpIn;
+//      animation-name: antSlideUpIn;
-//     }
+//    }
-
+//
-//     &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
+//    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
-//     &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
+//    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
-//       animation-name: antSlideDownIn;
+//      animation-name: antSlideDownIn;
-//     }
+//    }
-
+//
-//     &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
+//    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
-//       animation-name: antSlideUpOut;
+//      animation-name: antSlideUpOut;
-//     }
+//    }
-
+//
-//     &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
+//    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
-//       animation-name: antSlideDownOut;
+//      animation-name: antSlideDownOut;
-//     }
+//    }
-
+//
-//     &-hidden {
+//    &-hidden {
-//       display: none;
+//      display: none;
-//     }
+//    }
-
+//
-//     &-empty {
+//    &-empty {
-//       color: @disabled-color;
+//      color: @disabled-color;
-//     }
+//    }
-//   }
+//  }
-
+//
-//   // ========================= Options =========================
+//  // ========================= Options =========================
-//   .item() {
+//  .item() {
-//     position: relative;
+//    position: relative;
-//     display: block;
+//    display: block;
-//     min-height: @select-dropdown-height;
+//    min-height: @select-dropdown-height;
-//     padding: @select-dropdown-vertical-padding @control-padding-horizontal;
+//    padding: @select-dropdown-vertical-padding @control-padding-horizontal;
-//     color: @text-color;
+//    color: @text-color;
-//     font-weight: normal;
+//    font-weight: normal;
-//     font-size: @select-dropdown-font-size;
+//    font-size: @select-dropdown-font-size;
-//     line-height: @select-dropdown-line-height;
+//    line-height: @select-dropdown-line-height;
-//   }
+//  }
-
+//
-//   &-item-empty {
+//  &-item-empty {
-//     .item();
+//    .item();
-//     color: @disabled-color;
+//    color: @disabled-color;
-//   }
+//  }
-
+//
-//   &-item {
+//  &-item {
-//     .item();
+//    .item();
-
+//
-//     cursor: pointer;
+//    cursor: pointer;
-//     transition: background 0.3s ease;
+//    transition: background 0.3s ease;
-
+//
-//     // =========== Group ============
+//    // =========== Group ============
-//     &-group {
+//    &-group {
-//       color: @text-color-secondary;
+//      color: @text-color-secondary;
-//       font-size: @font-size-sm;
+//      font-size: @font-size-sm;
-//       cursor: default;
+//      cursor: default;
-//     }
+//    }
-
+//
-//     // =========== Option ===========
+//    // =========== Option ===========
-//     &-option {
+//    &-option {
-//       display: flex;
+//      display: flex;
-
+//
-//       &-content {
+//      &-content {
-//         flex: auto;
+//        flex: auto;
-//         overflow: hidden;
+//        overflow: hidden;
-//         white-space: nowrap;
+//        white-space: nowrap;
-//         text-overflow: ellipsis;
+//        text-overflow: ellipsis;
-//       }
+//      }
-
+//
-//       &-state {
+//      &-state {
-//         flex: none;
+//        flex: none;
-//       }
+//      }
-
+//
-//       &-active:not(&-disabled) {
+//      &-active:not(&-disabled) {
-//         background-color: @select-item-active-bg;
+//        background-color: @select-item-active-bg;
-//       }
+//      }
-
+//
-//       &-selected:not(&-disabled) {
+//      &-selected:not(&-disabled) {
-//         color: @select-item-selected-color;
+//        color: @select-item-selected-color;
-//         font-weight: @select-item-selected-font-weight;
+//        font-weight: @select-item-selected-font-weight;
-//         background-color: @select-item-selected-bg;
+//        background-color: @select-item-selected-bg;
-
+//
-//         .@{select-prefix-cls}-item-option-state {
+//        .@{select-prefix-cls}-item-option-state {
-//           color: @primary-color;
+//          color: @primary-color;
-//         }
+//        }
-//       }
+//      }
-
+//
-//       &-disabled {
+//      &-disabled {
-//         &.@{select-prefix-cls}-item-option-selected {
+//        &.@{select-prefix-cls}-item-option-selected {
-//           background-color: @select-multiple-disabled-background;
+//          background-color: @select-multiple-disabled-background;
-//         }
+//        }
-//         color: @disabled-color;
+//        color: @disabled-color;
-//         cursor: not-allowed;
+//        cursor: not-allowed;
-//       }
+//      }
-
+//
-//       &-grouped {
+//      &-grouped {
-//         padding-left: @control-padding-horizontal * 2;
+//        padding-left: @control-padding-horizontal * 2;
-//       }
+//      }
-//     }
+//    }
-//   }
+//  }
-
+//
-//   // ============================================================
+//  // ============================================================
-//   // ==                          Size                          ==
+//  // ==                          Size                          ==
-//   // ============================================================
+//  // ============================================================
-//   &-lg {
+//  &-lg {
-//     font-size: @font-size-lg;
+//    font-size: @font-size-lg;
-//   }
+//  }
-
+//
-//   // no border style
+//  // no border style
-//   &-borderless &-selector {
+//  &-borderless &-selector {
-//     background-color: transparent !important;
+//    background-color: transparent !important;
-//     border-color: transparent !important;
+//    border-color: transparent !important;
-//     box-shadow: none !important;
+//    box-shadow: none !important;
-//   }
+//  }
-// }
+//}
-
+//
-// @import './rtl';
+//@import './rtl';

components/select/style/index.tsx

@@ -179,7 +179,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         top: '50%',
         insetInlineStart: 'auto',
         insetInlineEnd: inputPaddingHorizontalBase,
-        width: token.fontSizeSM,
         height: token.fontSizeSM,
         marginTop: -token.fontSizeSM / 2,
         color: token.colorTextDisabled,
@@ -187,6 +186,8 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         lineHeight: 1,
         textAlign: 'center',
         pointerEvents: 'none',
+        display: 'flex',
+        alignItems: 'center',
 
         [`.${iconPrefixCls}`]: {
           verticalAlign: 'top',
@@ -204,6 +205,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
         [`${selectCls}-disabled &`]: {
           cursor: 'not-allowed',
         },
+
+        '> *:not(:last-child)': {
+          marginInlineEnd: 8, // FIXME: magic
+        },
       },
 
       // ========================== Clear ==========================
@@ -248,23 +253,6 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
       [`${selectCls}-clear`]: {
         insetInlineEnd: token.padding * 2,
       },
-
-      // FIXME: what's this? @MadCcc
-      [`${selectCls}-selection-selected-value`]: {
-        paddingInlineEnd: 42,
-      },
-
-      [`${selectCls}-feedback-icon`]: {
-        fontSize: token.fontSize,
-        textAlign: 'center',
-        visibility: 'visible',
-        animation: `zoomIn ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
-        pointerEvents: 'none',
-
-        '&:not(:first-child)': {
-          marginInlineStart: token.marginXS,
-        },
-      },
     },
   };
 };

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

@@ -117,16 +117,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,
   });