diff --git a/.changeset/perfect-sheep-develop.md b/.changeset/perfect-sheep-develop.md new file mode 100644 index 0000000000..aced5d3b47 --- /dev/null +++ b/.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. diff --git a/.changeset/small-cars-walk.md b/.changeset/small-cars-walk.md new file mode 100644 index 0000000000..fd4a0be88e --- /dev/null +++ b/.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. diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx index 9b09de8bc8..e235543efd 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx @@ -159,7 +159,7 @@ describe('NotificationToast', () => { () => { expect(baseNotificationToast.onClose).toHaveBeenCalledTimes(1); }, - { timeout: 3000 }, + { timeout: 6000 }, ); }); }); diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx index d029c65576..f639a9e485 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx @@ -61,7 +61,7 @@ export type NotificationToastProps = HTMLAttributes & /** * 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 diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx index aac72dfc74..272fdf1a29 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/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 & StackItem & { component: ToastComponent }; @@ -120,8 +122,8 @@ export function ToastProvider({ 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); diff --git a/packages/circuit-ui/components/ToastContext/createUseToast.ts b/packages/circuit-ui/components/ToastContext/createUseToast.ts index c287aa8bf3..a2ba3c1287 100644 --- a/packages/circuit-ui/components/ToastContext/createUseToast.ts +++ b/packages/circuit-ui/components/ToastContext/createUseToast.ts @@ -24,13 +24,13 @@ export function createUseToast( component: ToastComponent, ) { return (): { - setToast: (props: T) => void; + setToast: (props: Omit) => void; } => { const context = useContext(ToastContext); return useMemo( () => ({ - setToast: (props: T): void => { + setToast: (props: Omit): void => { const id = uniqueId('toast_'); context.setToast({ ...props, id, component }); },