Editor: Update behavior of consecutive snackbars (#13190)

GoogleForCreators · Apr 26, 2023 · b0ed419 · b0ed419
1 parent 8c11bc3
commit b0ed419
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 30 deletions.
diff --git a/packages/design-system/src/components/snackbar/snackbarContainer.tsx b/packages/design-system/src/components/snackbar/snackbarContainer.tsx
@@ -18,6 +18,7 @@
  */
 import type { FC, ComponentProps } from 'react';
 import {
+  createRef,
   useCallback,
   useEffect,
   useMemo,
@@ -76,25 +77,21 @@ function getSnackbarXPos({ placement }: { placement: SnackbarPlacement }) {
 
 const ChildContainer = styled.div`
   &.react-snackbar-alert__snackbar-container-enter {
-    max-height: 0px;
     opacity: 0;
-    transition: all 300ms ease-out;
   }
 
   &.react-snackbar-alert__snackbar-container-enter-active {
     opacity: 1;
-    max-height: 100px;
     transition: all 300ms ease-out;
   }
 
   &.react-snackbar-alert__snackbar-container-exit {
     opacity: 1;
-    transition: all 300ms ease-out;
   }
 
   &.react-snackbar-alert__snackbar-container-exit-active {
     opacity: 0;
-    transition: all 300ms ease-out;
+    transition: all 100ms ease-out;
   }
 `;
 
@@ -113,7 +110,7 @@ function SnackbarContainer({
   notifications = [],
   onRemove,
   placement = SnackbarPlacement.Bottom,
-  max = 10,
+  max = 1,
 }: SnackbarContainerProps) {
   const speak = useLiveRegion('assertive');
   const announcedNotifications = useRef(new Set());
@@ -134,10 +131,7 @@ function SnackbarContainer({
 
   useEffect(() => {
     if (typeof max === 'number' && notifications.length > max) {
-      const timeout = setTimeout(() => {
-        onRemove?.(notifications.slice(0, notifications.length - max));
-      }, 300);
-      return () => clearTimeout(timeout);
+      onRemove?.(notifications.slice(0, notifications.length - max));
     }
     return undefined;
   }, [max, notifications, onRemove]);
@@ -157,11 +151,10 @@ function SnackbarContainer({
       }
     });
   }, [notifications, speak]);
-  const nodeRefs = useRef<Record<string, HTMLElement>>({});
   return (
     <StyledContainer placement={placement}>
       <TransitionGroup>
-        {orderedNotifications.map((notification, index) => {
+        {orderedNotifications.map((notification) => {
           const {
             actionLabel,
             dismissible,
@@ -172,25 +165,18 @@ function SnackbarContainer({
             timeout,
             ...notificationProps
           } = notification;
-
-          const id = notification.id || ids[index];
-
+          const id = notification.id || ids[0];
+          const ref = createRef<HTMLDivElement>();
           return (
             <CSSTransition
               in
               key={id}
               timeout={300}
               unmountOnExit
-              nodeRef={{ current: nodeRefs.current?.[id] }}
+              nodeRef={ref}
               classNames="react-snackbar-alert__snackbar-container"
             >
-              <ChildContainer
-                ref={(el) => {
-                  if (el) {
-                    nodeRefs.current[id] = el;
-                  }
-                }}
-              >
+              <ChildContainer ref={ref}>
                 <Component
                   {...notificationProps}
                   aria-hidden

diff --git a/packages/design-system/src/components/snackbar/snackbarMessage.tsx b/packages/design-system/src/components/snackbar/snackbarMessage.tsx
@@ -59,6 +59,8 @@ const MessageContainer = styled.div<{
   border-radius: ${({ theme }) => theme.borders.radius.medium};
   z-index: ${({ customZIndex }) => customZIndex || DEFAULT_MESSAGE_Z_INDEX};
   pointer-events: auto;
+  position: absolute;
+  bottom: 0;
 `;
 
 const Message = styled(Text.Paragraph)<{

diff --git a/packages/design-system/src/components/snackbar/types.ts b/packages/design-system/src/components/snackbar/types.ts
@@ -49,6 +49,5 @@ export interface SnackbarNotification {
   preventAutoDismiss?: boolean;
   timeout?: number;
   thumbnail?: SnackbarNotificationThumbnail;
-  key?: string;
   id?: string;
 }
diff --git a/packages/design-system/src/contexts/snackbar/snackbarProvider.tsx b/packages/design-system/src/contexts/snackbar/snackbarProvider.tsx
@@ -42,15 +42,15 @@ function SnackbarProvider({
   const remove = useCallback(
     (
       toRemove:
-        | Pick<SnackbarNotification, 'key'>
-        | Pick<SnackbarNotification, 'key'>[]
+        | Pick<SnackbarNotification, 'id'>
+        | Pick<SnackbarNotification, 'id'>[]
     ) => {
       setNotifications((currentNotifications) =>
         currentNotifications.filter((item) => {
           if (Array.isArray(toRemove)) {
-            return !toRemove.find(({ key }) => key === item.key);
+            return !toRemove.find(({ id }) => id === item.id);
           }
-          return item.key !== toRemove.key;
+          return item.id !== toRemove.id;
         })
       );
     },

diff --git a/packages/story-editor/src/app/media/useUploadMedia.js b/packages/story-editor/src/app/media/useUploadMedia.js
@@ -107,11 +107,11 @@ function useUploadMedia({
       showSnackbar({
         message: __('Optimizing file…', 'web-stories'),
         dismissible: true,
-        key: 'video-optimization',
+        id: 'video-optimization',
       });
     } else {
       removeSnack({
-        key: 'video-optimization',
+        id: 'video-optimization',
       });
     }
   }, [isTranscoding, showSnackbar, removeSnack]);