feat: Add progress bars to expiring toasts

Author: cephalization

app/src/components/toast/Toast.tsx

@@ -11,6 +11,7 @@ import { Button } from "@phoenix/components/button";
 import { Text } from "@phoenix/components/content";
 import { Icon, Icons } from "@phoenix/components/icon";
 import { toastCss, toastRegionCss } from "@phoenix/components/toast/styles";
+import { useTimeoutRemainingPercentage } from "@phoenix/components/toast/useTimeoutRemainingPercentage";
 import { NotificationParams, useTheme } from "@phoenix/contexts";
 
 export const ToastRegion = <Q extends AriaToastQueue<NotificationParams>>({
@@ -54,15 +55,20 @@ export const Toast = <
   toast: T;
   queue?: Q;
 }) => {
+  const { timePercentageRemaining, pauseTimer, unpauseTimer } =
+    useTimeoutRemainingPercentage(toast.timeout);
   const { theme } = useTheme();
   return (
     <AriaToast
       toast={toast}
       css={toastCss}
       className="react-aria-Toast"
+      onPointerEnter={pauseTimer}
+      onPointerLeave={unpauseTimer}
       style={{
         viewTransitionName: toast.key,
-        // @ts-expect-error incorrect react types
+        // @ts-expect-error css vars are not typed properly by react
+        "--toast-timeout-percent": timePercentageRemaining,
         "--ac-internal-token-color": colorFromVariant(toast.content.variant),
       }}
       data-variant={toast.content.variant}

app/src/components/toast/styles.ts

@@ -52,6 +52,21 @@ export const toastCss = css`
   background-color: var(--toast-background-color);
   border: var(--toast-border);
   color: var(--toast-color);
+  position: relative;
+  overflow: hidden;
+
+  &:after {
+    transition: width 500ms linear;
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 0;
+    background: var(--toast-color);
+    border-radius: 2px 0 2px 0;
+    border-top: var(--toast-border);
+    height: 1px;
+    width: calc(var(--toast-timeout-percent) * 1%);
+  }
 
   &[data-focus-visible] {
     outline: 2px solid slateblue;

app/src/components/toast/useTimeoutRemainingPercentage.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const INTERVAL_MS = 250;
+
+export const useTimeoutRemainingPercentage = (
+  timeout: number | undefined | null
+) => {
+  const [pauseTimer, setPauseTimer] = useState(false);
+  const [timeRemaining, setTimeRemaining] = useState<number | null>(() => {
+    if (timeout) {
+      return Math.max(timeout - INTERVAL_MS * 2, 0);
+    }
+
+    return null;
+  });
+  const initialTimeRemaining = useRef(timeRemaining);
+  // update initial time remaining when the toast timeout definition changes
+  useEffect(() => {
+    if (timeout) {
+      setTimeRemaining(Math.max(timeout - INTERVAL_MS * 2, 0));
+    }
+  }, [timeout]);
+  // count down from timeRemaining, if set by the toast timeout
+  useEffect(() => {
+    if (initialTimeRemaining.current === null) return;
+    if (pauseTimer) {
+      return;
+    }
+    const interval = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev === null) return null;
+        if (prev <= INTERVAL_MS) {
+          clearInterval(interval);
+          return 0;
+        }
+        return prev - INTERVAL_MS;
+      });
+    }, INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [pauseTimer]);
+
+  const timePercentageRemaining =
+    timeRemaining !== null ? (timeRemaining / (timeout || 1)) * 100 : undefined;
+
+  const pauseTimerCallback = useCallback(() => {
+    setPauseTimer(true);
+  }, []);
+
+  const unpauseTimer = useCallback(() => {
+    setPauseTimer(false);
+  }, []);
+
+  return {
+    timePercentageRemaining,
+    pauseTimer: pauseTimerCallback,
+    unpauseTimer,
+  };
+};

app/stories/ToastRegion.stories.tsx

@@ -65,7 +65,7 @@ const TriggerToasts = () => {
           notifySuccess({
             title: "Expiring Toast",
             message: "This toast will expire soon.",
-            expireMs: 3000,
+            expireMs: 5_000,
           })
         }
       >