diff --git a/src/components/ToastNotification/ToastNotification.stories.tsx b/src/components/ToastNotification/ToastNotification.stories.tsx index 0453b6a7a..3f725b5ce 100644 --- a/src/components/ToastNotification/ToastNotification.stories.tsx +++ b/src/components/ToastNotification/ToastNotification.stories.tsx @@ -62,7 +62,7 @@ export const NotDismissable: Story = { export const AutoDismiss: Story = { args: { ...Default.args, - dissmissType: 'auto', + dismissType: 'auto', timeout: 500, onDismiss: () => console.log('trigger onDismiss'), }, @@ -111,7 +111,7 @@ const ToastNotificationManager = (args: Args) => { > { setToasts( toasts.map((thisToast) => { diff --git a/src/components/ToastNotification/ToastNotification.test.tsx b/src/components/ToastNotification/ToastNotification.test.tsx index 4d3346b7d..6ad2948e0 100644 --- a/src/components/ToastNotification/ToastNotification.test.tsx +++ b/src/components/ToastNotification/ToastNotification.test.tsx @@ -36,10 +36,22 @@ describe('', () => { it('generates an error when onDissmiss and type=auto are misused', async () => { // One must use onDismiss if auto is used render( - , + , ); await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(1)); }); + + it('[EDS-1453] generates an error message when using the dissmissType prop', async () => { + render(); + + await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(1)); + }); + + it('[EDS-1453] generates no error when using the correct dismissType prop', async () => { + render(); + + await waitFor(() => expect(consoleErrorMock).toHaveBeenCalledTimes(0)); + }); }); }); diff --git a/src/components/ToastNotification/ToastNotification.tsx b/src/components/ToastNotification/ToastNotification.tsx index 9bd5f7353..b31341165 100644 --- a/src/components/ToastNotification/ToastNotification.tsx +++ b/src/components/ToastNotification/ToastNotification.tsx @@ -31,7 +31,7 @@ export type ToastNotificationProps = { * * **Default is `"manual"`**. */ - dissmissType?: 'manual' | 'auto'; + dismissType?: 'manual' | 'auto'; /** * Keyword to characterize the state of the notification */ @@ -40,6 +40,8 @@ export type ToastNotificationProps = { * The title/heading of the notification */ title: string; + /** @deprecated Please use `dismissType` instead */ + dissmissType?: 'manual' | 'auto'; // TODO(next-major): remove this misspelled prop at next major release }; /** @@ -49,7 +51,8 @@ export type ToastNotificationProps = { */ export const ToastNotification = ({ className, - dissmissType = 'manual', + dismissType = 'manual', + dissmissType, onDismiss, status = 'favorable', timeout = 8000, @@ -62,22 +65,36 @@ export const ToastNotification = ({ className, ); + // if both are defined, temporarily prefer the original value of dissmissType to avoid accidental overrides + const tempDismissType = dissmissType ?? dismissType; + assertEdsUsage( - [!!timeout && typeof onDismiss === 'undefined' && dissmissType === 'auto'], + [ + !!timeout && + typeof onDismiss === 'undefined' && + tempDismissType === 'auto', + ], 'When using dismissType=auto, an onDismiss method must be defined', 'error', ); + // TODO(next-major): remove this misspelled prop at next major release + assertEdsUsage( + [typeof dissmissType !== 'undefined'], + '`dissmissType` should not be used. Use `dismissType` instead', + 'error', + ); + useEffect(() => { const expireId = - dissmissType === 'auto' + tempDismissType === 'auto' ? setTimeout(() => { onDismiss && onDismiss(); }, timeout) : undefined; return () => clearTimeout(expireId); - }, [onDismiss, dissmissType, timeout]); + }, [onDismiss, tempDismissType, timeout]); return (