Editor: Limit visible Snackbars from the consumers (#58598)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
WordPress · Feb 2, 2024 · edb8779 · edb8779
1 parent 05d5475
commit edb8779
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -7,7 +7,6 @@
 
 -   `Button`: Update secondary variant to show the border even in a disabled state. ([#58606](https://github.com/WordPress/gutenberg/pull/58606)).
 -   `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)).
--   `SnackbarList`: Allow limiting the number of maximum visible Snackbars ([#58559](https://github.com/WordPress/gutenberg/pull/58559)).
 -   `Snackbar`: Update the warning message ([#58591](https://github.com/WordPress/gutenberg/pull/58591)).
 -   `Composite`: Implementing `useCompositeState` with Ariakit ([#57304](https://github.com/WordPress/gutenberg/pull/57304))
 

diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
@@ -62,14 +62,12 @@ const SNACKBAR_VARIANTS = {
  */
 export function SnackbarList( {
 	notices,
-	maxVisible,
 	className,
 	children,
 	onRemove,
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
 	const listRef = useRef< HTMLDivElement | null >( null );
 	const isReducedMotion = useReducedMotion();
-	const visibleNotices = maxVisible ? notices.slice( -maxVisible ) : notices;
 	className = classnames( 'components-snackbar-list', className );
 	const removeNotice =
 		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
@@ -78,7 +76,7 @@ export function SnackbarList( {
 		<div className={ className } tabIndex={ -1 } ref={ listRef }>
 			{ children }
 			<AnimatePresence>
-				{ visibleNotices.map( ( notice ) => {
+				{ notices.map( ( notice ) => {
 					const { content, ...restNotice } = notice;
 
 					return (

diff --git a/packages/components/src/snackbar/types.ts b/packages/components/src/snackbar/types.ts
@@ -38,7 +38,6 @@ export type SnackbarListProps = {
 			content: string;
 		}
 	>;
-	maxVisible?: number;
 	onRemove: ( id: string ) => void;
 	children?: NoticeChildren | Array< NoticeChildren >;
 };
diff --git a/packages/edit-widgets/src/components/notices/index.js b/packages/edit-widgets/src/components/notices/index.js
@@ -5,6 +5,9 @@ import { NoticeList, SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
 function Notices() {
 	const { removeNotice } = useDispatch( noticesStore );
 	const { notices } = useSelect( ( select ) => {
@@ -19,9 +22,9 @@ function Notices() {
 	const nonDismissibleNotices = notices.filter(
 		( { isDismissible, type } ) => ! isDismissible && type === 'default'
 	);
-	const snackbarNotices = notices.filter(
-		( { type } ) => type === 'snackbar'
-	);
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
 
 	return (
 		<>
@@ -36,7 +39,6 @@ function Notices() {
 			/>
 			<SnackbarList
 				notices={ snackbarNotices }
-				maxVisible={ 3 }
 				className="edit-widgets-notices__snackbar"
 				onRemove={ removeNotice }
 			/>

diff --git a/packages/editor/src/components/editor-snackbars/index.js b/packages/editor/src/components/editor-snackbars/index.js
@@ -5,20 +5,22 @@ import { SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
 export default function EditorSnackbars() {
 	const notices = useSelect(
 		( select ) => select( noticesStore ).getNotices(),
 		[]
 	);
 	const { removeNotice } = useDispatch( noticesStore );
-	const snackbarNotices = notices.filter(
-		( { type } ) => type === 'snackbar'
-	);
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
 
 	return (
 		<SnackbarList
 			notices={ snackbarNotices }
-			maxVisible={ 3 }
 			className="components-editor-notices__snackbar"
 			onRemove={ removeNotice }
 		/>