Added onDismiss option in createInfoNotice (#32338)

* Added onDismiss option in createInfoNotice

* Add onDismiss callback for notice

* Remove default null value for onDismiss on createInfoNotice

* Update notcies test for onDismiss

packages/components/src/notice/README.md

@@ -107,6 +107,7 @@ The following props are used to control the behavior of the component.
     -   A value of `'assertive'` is to be used for important, and usually time-sensitive, information. It will interrupt anything else the screen reader is announcing in that moment.
     -   A value of `'polite'` is to be used for advisory information. It should not interrupt what the screen reader is announcing in that moment (the "speech queue") or interrupt the current task.
 -   `isDismissible`: (boolean) defaults to true, whether the notice should be dismissible or not
+-   `onDismiss` : callback function which is executed when the notice is dismissed. It is distinct from onRemove, which _looks_ like a callback but is actually the function to call to remove the notice from the UI.
 -   `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function. A `className` property can be used to add custom classes to the button styles. The default appearance of the button is inferred based on whether `url` or `onClick` are provided, rendering the button as a link if appropriate. A `noDefaultClasses` property value of `true` will remove all default styling. You can denote a primary button action for a notice by passing the `variant` property with a value of `primary`.
 
 ## Related components

packages/components/src/notice/index.js

@@ -68,6 +68,10 @@ function Notice( {
 	actions = [],
 	politeness = getDefaultPoliteness( status ),
 	__unstableHTML,
+	// onDismiss is a callback executed when the notice is dismissed.
+	// It is distinct from onRemove, which _looks_ like a callback but is
+	// actually the function to call to remove the notice from the UI.
+	onDismiss = noop,
 } ) {
 	useSpokenMessage( spokenMessage, politeness );
 
@@ -84,6 +88,12 @@ function Notice( {
 		children = <RawHTML>{ children }</RawHTML>;
 	}
 
+	const onDismissNotice = ( event ) => {
+		event?.preventDefault?.();
+		onDismiss();
+		onRemove();
+	};
+
 	return (
 		<div className={ classes }>
 			<div className="components-notice__content">
@@ -136,7 +146,7 @@ function Notice( {
 					className="components-notice__dismiss"
 					icon={ close }
 					label={ __( 'Dismiss this notice' ) }
-					onClick={ onRemove }
+					onClick={ onDismissNotice }
 					showTooltip={ false }
 				/>
 			) }

packages/notices/src/store/actions.js

@@ -60,7 +60,7 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) {
 		__unstableHTML,
 		icon = null,
 		explicitDismiss = false,
-		onDismiss = null,
+		onDismiss,
 	} = options;
 
 	// The supported value shape of content is currently limited to plain text

packages/notices/src/store/test/actions.js

@@ -76,7 +76,7 @@ describe( 'actions', () => {
 					type: 'default',
 					icon: '🌮',
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 			} );
 		} );
@@ -107,7 +107,7 @@ describe( 'actions', () => {
 					type: 'default',
 					icon: null,
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 			} );
 		} );

packages/notices/src/store/test/reducer.js

@@ -35,7 +35,7 @@ describe( 'reducer', () => {
 					type: 'default',
 					icon: null,
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 			],
 		} );
@@ -60,7 +60,7 @@ describe( 'reducer', () => {
 					type: 'default',
 					icon: null,
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 			],
 		} );
@@ -86,7 +86,7 @@ describe( 'reducer', () => {
 					type: 'default',
 					icon: null,
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 				{
 					id: expect.any( String ),
@@ -99,7 +99,7 @@ describe( 'reducer', () => {
 					type: 'default',
 					icon: null,
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 			],
 		} );
@@ -165,7 +165,7 @@ describe( 'reducer', () => {
 					type: 'default',
 					icon: null,
 					explicitDismiss: false,
-					onDismiss: null,
+					onDismiss: undefined,
 				},
 			],
 		} );