useToast: Support dynamic dismiss timeout duration

.changeset/great-houses-grin.md

@@ -0,0 +1,13 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - useToast
+---
+
+**useToast**: Support dynamic dismiss timeout duration
+
+Previously, all toasts would automatically dismiss after 10 seconds.
+This update adjusts the timeout duration for toasts based on their content length, ensuring users have enough time to read the message, while minimising the time content is obscured the toast.

packages/braid-design-system/src/lib/components/useToast/Toast.tsx

@@ -16,13 +16,16 @@ import { lineHeightContainer } from '../../css/lineHeightContainer.css';
 import buildDataAttributes from '../private/buildDataAttributes';
 import * as styles from './Toast.css';
 
+const minimumToastDuration = 5 * 1000;
+const actionableToastDuration = 10 * 1000;
+
+const toastCharactersPerSecond = 120;
+
 const toneToIcon = {
   critical: IconCritical,
   positive: IconPositive,
 };
 
-export const toastDuration = 10000;
-
 const borderRadius = 'large';
 
 interface ActionProps extends ToastAction {
@@ -81,12 +84,19 @@ const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     },
     ref,
   ) => {
+    const toastCharacterCount =
+      message.length + (description ? description.length : 0);
+
+    const toastLength =
+      minimumToastDuration +
+      Math.ceil(toastCharacterCount / toastCharactersPerSecond) * 1000;
+
     const remove = useCallback(
       () => onClose(dedupeKey, id),
       [onClose, dedupeKey, id],
     );
     const { stopTimeout, startTimeout } = useTimeout({
-      duration: toastDuration,
+      duration: action ? actionableToastDuration : toastLength,
       onTimeout: remove,
     });
 

packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx

@@ -14,7 +14,7 @@ import {
 } from '..';
 import { useThemeSettings } from 'site/App/ThemeSetting';
 import Code from 'site/App/Code/Code';
-import Toast, { toastDuration } from './Toast';
+import Toast from './Toast';
 import source from '@braid-design-system/source.macro';
 
 const docs: ComponentDocs = {
@@ -428,9 +428,9 @@ const docs: ComponentDocs = {
       description: (
         <>
           <Text>
-            {`A toast message can be dismissed via the close button or automatically after ${
-              toastDuration / 1000
-            } seconds.`}
+            A toast message can be dismissed via the close button or
+            automatically after a timeout period depending on its content
+            length.
           </Text>
 
           <Text tone="promote" id="translations">