`;
-exports[`renders components/alert/demo/close-text.tsx correctly 1`] = `
-
-`;
-
exports[`renders components/alert/demo/custom-icon.tsx correctly 1`] = `
{
const { container } = render(
);
expect(!!container.querySelector('.ant-alert-message')).toBe(false);
});
+
+ it('close button should be hidden when closeIcon setting to null or false', () => {
+ const { container, rerender } = render(
);
+ expect(container.querySelector('.ant-alert-close-icon')).toBeFalsy();
+ rerender(
);
+ expect(container.querySelector('.ant-alert-close-icon')).toBeFalsy();
+ rerender(
);
+ expect(container.querySelector('.ant-alert-close-icon')).toBeTruthy();
+ rerender(
);
+ expect(container.querySelector('.ant-alert-close-icon')).toBeFalsy();
+ });
+
+ it('should warning when using closeText', () => {
+ resetWarned();
+ const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+ const { container } = render(
);
+
+ expect(warnSpy).toHaveBeenCalledWith(
+ `Warning: [antd: Alert] \`closeText\` is deprecated. Please use \`closeIcon\` instead.`,
+ );
+
+ expect(container.querySelector('.ant-alert-close-icon')?.textContent).toBe('close');
+
+ warnSpy.mockRestore();
+ });
});
diff --git a/components/alert/demo/closable.tsx b/components/alert/demo/closable.tsx
index 2d04f4ebaf..2edfc24ec2 100644
--- a/components/alert/demo/closable.tsx
+++ b/components/alert/demo/closable.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Alert, Space } from 'antd';
+import React from 'react';
const onClose = (e: React.MouseEvent
) => {
console.log(e, 'I was closed.');
@@ -10,14 +10,14 @@ const App: React.FC = () => (
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
deleted file mode 100644
index 969bff8f4c..0000000000
--- a/components/alert/demo/close-text.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
-
-## en-US
-
-Replace the default icon with customized text.
diff --git a/components/alert/demo/close-text.tsx b/components/alert/demo/close-text.tsx
deleted file mode 100644
index f5517f7247..0000000000
--- a/components/alert/demo/close-text.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import { Alert } from 'antd';
-
-const App: React.FC = () => ;
-
-export default App;
diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
index 5b66c657a9..498be9f955 100644
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -25,7 +25,6 @@ Alert component for feedback.
Closable
Description
Icon
-Customized Close Text
Banner
Loop Banner
Smoothly Unmount
@@ -40,9 +39,7 @@ Alert component for feedback.
| action | The action of Alert | ReactNode | - | 4.9.0 |
| afterClose | Called when close animation is finished | () => void | - | |
| banner | Whether to show as banner | boolean | false | |
-| closable | Whether Alert can be closed | boolean | - | |
-| closeText | Close text to show | ReactNode | - | |
-| closeIcon | Custom close icon | ReactNode | `` | 4.18.0 |
+| closeIcon | Custom close icon, >=5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | `` | |
| description | Additional content of Alert | ReactNode | - | |
| icon | Custom icon, effective when `showIcon` is true | ReactNode | - | |
| message | Content of Alert | ReactNode | - | |
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 1af120f207..60b7c0fcd7 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -9,6 +9,7 @@ import pickAttrs from 'rc-util/lib/pickAttrs';
import type { ReactElement } from 'react';
import * as React from 'react';
import { replaceElement } from '../_util/reactNode';
+import warning from '../_util/warning';
import { ConfigContext } from '../config-provider';
import ErrorBoundary from './ErrorBoundary';
@@ -20,7 +21,10 @@ export interface AlertProps {
type?: 'success' | 'info' | 'warning' | 'error';
/** Whether Alert can be closed */
closable?: boolean;
- /** Close text to show */
+ /**
+ * @deprecated please use `closeIcon` instead.
+ * Close text to show
+ */
closeText?: React.ReactNode;
/** Content of Alert */
message?: React.ReactNode;
@@ -41,7 +45,7 @@ export interface AlertProps {
banner?: boolean;
icon?: React.ReactNode;
/** Custom closeIcon */
- closeIcon?: React.ReactNode;
+ closeIcon?: boolean | React.ReactNode;
action?: React.ReactNode;
onMouseEnter?: React.MouseEventHandler;
onMouseLeave?: React.MouseEventHandler;
@@ -78,16 +82,17 @@ const IconNode: React.FC = (props) => {
interface CloseIconProps {
isClosable: boolean;
prefixCls: AlertProps['prefixCls'];
- closeText: AlertProps['closeText'];
closeIcon: AlertProps['closeIcon'];
handleClose: AlertProps['onClose'];
}
const CloseIcon: React.FC = (props) => {
- const { isClosable, closeText, prefixCls, closeIcon, handleClose } = props;
+ const { isClosable, prefixCls, closeIcon, handleClose } = props;
+ const mergedCloseIcon =
+ closeIcon === true || closeIcon === undefined ? : closeIcon;
return isClosable ? (
) : null;
};
@@ -111,12 +116,14 @@ const Alert: CompoundedComponent = ({
showIcon,
closable,
closeText,
- closeIcon = ,
+ closeIcon,
action,
...props
}) => {
const [closed, setClosed] = React.useState(false);
-
+ if (process.env.NODE_ENV !== 'production') {
+ warning(!closeText, 'Alert', '`closeText` is deprecated. Please use `closeIcon` instead.');
+ }
const ref = React.useRef(null);
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('alert', customizePrefixCls);
@@ -136,8 +143,18 @@ const Alert: CompoundedComponent = ({
return banner ? 'warning' : 'info';
};
- // closeable when closeText is assigned
- const isClosable = closeText ? true : closable;
+ // closeable when closeText or closeIcon is assigned
+ const isClosable = React.useMemo(() => {
+ if (closeText) {
+ return true;
+ }
+ if (typeof closable === 'boolean') {
+ return closable;
+ }
+ // should be true when closeIcon is 0 or ''
+ return closeIcon !== false && closeIcon !== null && closeIcon !== undefined;
+ }, [closeText, closeIcon, closable]);
+
const type = getType();
// banner mode defaults to Icon
@@ -199,10 +216,9 @@ const Alert: CompoundedComponent = ({