Fix the NotificationToast isVisible issue and increase duration (#1357)

* increase toast duration

* fix the isVisible prop issue

* add changeset

* Update changeset

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

* address review comment

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

.changeset/perfect-sheep-develop.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Increased the NotificationToast's default duration to 6 seconds to match the accessibility guidelines.

.changeset/small-cars-walk.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Updated the NotificationToast's prop types, now the `iconLabel` prop is optional and the `isVisible` prop is internal only.

packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx

@@ -159,7 +159,7 @@ describe('NotificationToast', () => {
         () => {
           expect(baseNotificationToast.onClose).toHaveBeenCalledTimes(1);
         },
-        { timeout: 3000 },
+        { timeout: 6000 },
       );
     });
   });

packages/circuit-ui/components/NotificationToast/NotificationToast.tsx

@@ -61,7 +61,7 @@ export type NotificationToastProps = HTMLAttributes<HTMLDivElement> &
     /**
      * A clear and concise description of the icon and the Toast's purpose. If the toast body is self-explanatory pass an empty string.
      */
-    iconLabel: string;
+    iconLabel?: string;
   };
 
 // TODO: update the design token colors to be info/confirm/alert/notify, then remove this mapping
@@ -147,7 +147,7 @@ export function NotificationToast({
   body,
   headline,
   onClose,
-  iconLabel,
+  iconLabel = '',
   isVisible,
   tracking,
   duration, // this is the auto-dismiss duration, not the animation duration. We shouldn't pass it to the wrapper along with ...props

packages/circuit-ui/components/ToastContext/ToastContext.tsx

@@ -29,6 +29,8 @@ import { spacing } from '../..';
 
 import { BaseToastProps, ToastComponent } from './types';
 
+const DEFAULT_TOAST_DURATION = 6000;
+
 type ToastState<TProps extends BaseToastProps> = TProps &
   StackItem & { component: ToastComponent<TProps> };
 
@@ -120,8 +122,8 @@ export function ToastProvider<TProps extends BaseToastProps>({
       return undefined;
     }
     const duration = toastToDismiss.duration
-      ? Math.max(toastToDismiss.duration, 3000)
-      : 3000;
+      ? Math.max(toastToDismiss.duration, DEFAULT_TOAST_DURATION)
+      : DEFAULT_TOAST_DURATION;
     const timeoutId = setTimeout(() => {
       context.removeToast(toastToDismiss);
     }, duration);

packages/circuit-ui/components/ToastContext/createUseToast.ts

@@ -24,13 +24,13 @@ export function createUseToast<T extends BaseToastProps>(
   component: ToastComponent<T>,
 ) {
   return (): {
-    setToast: (props: T) => void;
+    setToast: (props: Omit<T, 'isVisible'>) => void;
   } => {
     const context = useContext(ToastContext);
 
     return useMemo(
       () => ({
-        setToast: (props: T): void => {
+        setToast: (props: Omit<T, 'isVisible'>): void => {
           const id = uniqueId('toast_');
           context.setToast({ ...props, id, component });
         },