feat: add waring for icon props in Avatar, Button, Modal.method and Result (#20226)

components/avatar/__tests__/Avatar.test.js

@@ -133,4 +133,15 @@ describe('Avatar Render', () => {
     wrapper.setProps({ children: 'xx' });
     expect(wrapper.state().scale).toBe(0.32);
   });
+
+  it('should warning when pass a string as icon props', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Avatar size={64} icon="aa" />);
+    expect(warnSpy).not.toHaveBeenCalled();
+    mount(<Avatar size={64} icon="user" />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Warning: [antd: Avatar] \`icon\` is using ReactNode instead of string naming in v4. Please check \`user\` at https://ant.design/components/icon`,
+    );
+    warnSpy.mockRestore();
+  });
 });

components/avatar/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import warning from '../_util/warning';
 
 export interface AvatarProps {
   /** Shape of avatar, options:`circle`, `square` */
@@ -108,6 +109,12 @@ export default class Avatar extends React.Component<AvatarProps, AvatarState> {
       ...others
     } = this.props;
 
+    warning(
+      !(typeof icon === 'string' && icon.length > 2),
+      'Avatar',
+      `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+    );
+
     const { isImgExist, scale, mounted } = this.state;
 
     const prefixCls = getPrefixCls('avatar', customizePrefixCls);

components/button/__tests__/index.test.js

@@ -233,4 +233,15 @@ describe('Button', () => {
       wrapper.unmount();
     }).not.toThrow();
   });
+
+  it('should warning when pass a string as icon props', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Button type="primary" icon="ab" />);
+    expect(warnSpy).not.toHaveBeenCalled();
+    mount(<Button type="primary" icon="search" />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Warning: [antd: Button] \`icon\` is using ReactNode instead of string naming in v4. Please check \`search\` at https://ant.design/components/icon`,
+    );
+    warnSpy.mockRestore();
+  });
 });

components/button/button.tsx

@@ -10,6 +10,7 @@ import Group from './button-group';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import Wave from '../_util/wave';
 import { Omit, tuple } from '../_util/type';
+import warning from '../_util/warning';
 
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -231,6 +232,12 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     } = this.props;
     const { loading, hasTwoCNChar } = this.state;
 
+    warning(
+      !(typeof icon === 'string' && icon.length > 2),
+      'Button',
+      `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+    );
+
     const prefixCls = getPrefixCls('btn', customizePrefixCls);
     const autoInsertSpace = autoInsertSpaceInButton !== false;
 

components/modal/__tests__/confirm.test.js

@@ -214,4 +214,21 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     });
     jest.useRealTimers();
   });
+
+  it('should warning when pass a string as icon props', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    confirm({
+      content: 'some descriptions',
+      icon: 'ab',
+    });
+    expect(warnSpy).not.toHaveBeenCalled();
+    confirm({
+      content: 'some descriptions',
+      icon: 'question',
+    });
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Warning: [antd: Modal] \`icon\` is using ReactNode instead of string naming in v4. Please check \`question\` at https://ant.design/components/icon`,
+    );
+    warnSpy.mockRestore();
+  });
 });

components/modal/confirm.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import Dialog, { ModalFuncProps, destroyFns } from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
+import warning from '../_util/warning';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -31,6 +32,12 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     cancelButtonProps,
   } = props;
 
+  warning(
+    !(typeof icon === 'string' && icon.length > 2),
+    'Modal',
+    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+  );
+
   // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
   const okType = props.okType || 'primary';
   const prefixCls = props.prefixCls || 'ant-modal';

components/result/__tests__/index.test.js

@@ -55,4 +55,15 @@ describe('Result', () => {
     const wrapper = mount(<Result status="404" title="404" className="my-result" />);
     expect(wrapper.find('.ant-result.my-result')).toHaveLength(1);
   });
+
+  it('should warning when pass a string as icon props', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Result title="404" icon="ab" />);
+    expect(warnSpy).not.toHaveBeenCalled();
+    mount(<Result title="404" icon="smile" />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      `Warning: [antd: Result] \`icon\` is using ReactNode instead of string naming in v4. Please check \`smile\` at https://ant.design/components/icon`,
+    );
+    warnSpy.mockRestore();
+  });
 });

components/result/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '@ant-design/icons';
 
 import { ConfigConsumerProps, ConfigConsumer } from '../config-provider';
+import warning from '../_util/warning';
 
 import noFound from './noFound';
 import serverError from './serverError';
@@ -53,6 +54,12 @@ const ExceptionStatus = Object.keys(ExceptionMap);
 const renderIcon = (prefixCls: string, { status, icon }: ResultProps) => {
   const className = classnames(`${prefixCls}-icon`);
 
+  warning(
+    !(typeof icon === 'string' && icon.length > 2),
+    'Result',
+    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+  );
+
   if (ExceptionStatus.includes(status as ResultStatusType)) {
     const SVGComponent = ExceptionMap[status as ExceptionStatusType];
     return (