fade out toasts that are centered, and not the last one

adobe · Jan 30, 2025 · ed3a0c8 · ed3a0c8
1 parent b7140b6
commit ed3a0c8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/@react-spectrum/toast/src/ToastContainer.tsx b/packages/@react-spectrum/toast/src/ToastContainer.tsx
@@ -106,24 +106,32 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   let activeToastContainer = useActiveToastContainer();
   let state = useToastQueue(getGlobalToastQueue());
 
-  let placement = useMemo(() => {
-    let placements = props.placement?.split(' ');
-    return placements?.[placements.length - 1] || 'bottom';
+  let {placement, isCentered} = useMemo(() => {
+    let placements = (props.placement ?? 'bottom').split(' ');
+    let placement = placements[placements.length - 1];
+    let isCentered = placements.length === 1;
+    return {placement, isCentered};
   }, [props.placement]);
 
   if (ref === activeToastContainer && state.visibleToasts.length > 0) {
     return (
       <Toaster state={state} {...props}>
         <ol className={classNames(toastContainerStyles, 'spectrum-ToastContainer-list')}>
-          {state.visibleToasts.slice().reverse().map((toast) => {
+          {state.visibleToasts.slice().reverse().map((toast, index) => {
+            let shouldFade = isCentered && index !== 0;
             return (
               <li
                 key={toast.key}
                 className={classNames(toastContainerStyles, 'spectrum-ToastContainer-listitem')}
                 style={{
                   // @ts-expect-error
                   viewTransitionName: `_${toast.key.slice(2)}`,
-                  viewTransitionClass: classNames(toastContainerStyles, 'toast', placement)
+                  viewTransitionClass: classNames(
+                    toastContainerStyles,
+                    'toast',
+                    placement,
+                    {'fadeOnly': shouldFade}
+                  )
                 }}>
                 <Toast
                   toast={toast}

diff --git a/packages/@react-spectrum/toast/src/toastContainer.css b/packages/@react-spectrum/toast/src/toastContainer.css
@@ -111,6 +111,12 @@
   }
 }
 
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
 ::view-transition-group(.toast) {
   animation-duration: 300ms;
 }
@@ -142,3 +148,7 @@
 ::view-transition-old(.toast):only-child {
   animation-name: slide-out;
 }
+
+::view-transition-old(.toast.fadeOnly):only-child {
+  animation-name: fade-out;
+}