Add support for an explicit dismiss button to snackbar, as well as an onDismiss callback (https://github.com/woocommerce/woocommerce-admin/pull/5623)

* Add support for an explicit dismiss button to snackbar, as well as an onDismiss callback

* Fix effect dependencies

* Fix disabling auto-dismiss when explicit dismissing is on, fix cursor styles

* fix noops and dismiss on action

* refactor action click handler

* rename dismiss button class

* increase CES modal placeholder z index

* white. space.

Co-authored-by: Rebecca Scott <me@becdetat.com>

plugins/woocommerce-admin/client/layout/transient-notices/snackbar/index.js

@@ -40,19 +40,54 @@ function Snackbar(
 		actions = [],
 		onRemove = noop,
 		icon = null,
+		explicitDismiss = false,
+		// onDismiss is a callback executed when the snackbar is dismissed.
+		// It is distinct from onRemove, which _looks_ like a callback but is
+		// actually the function to call to remove the snackbar from the UI.
+		onDismiss = null,
 	},
 	ref
 ) {
+	onDismiss = onDismiss || noop;
+
+	function dismissMe( event ) {
+		if ( event && event.preventDefault ) {
+			event.preventDefault();
+		}
+
+		onDismiss();
+		onRemove();
+	}
+
+	function onActionClick( event, onClick ) {
+		event.stopPropagation();
+
+		if ( explicitDismiss ) {
+			onRemove();
+		}
+
+		if ( onClick ) {
+			onClick( event );
+		}
+	}
+
 	useSpokenMessage( spokenMessage, politeness );
+
+	// Only set up the timeout dismiss if we're not explicitly dismissing.
 	useEffect( () => {
 		const timeoutHandle = setTimeout( () => {
-			onRemove();
+			if ( ! explicitDismiss ) {
+				onDismiss();
+				onRemove();
+			}
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [] );
+	}, [ onDismiss, onRemove ] );
 
-	const classes = classnames( className, 'components-snackbar' );
+	const classes = classnames( className, 'components-snackbar', {
+		'components-snackbar-explicit-dismiss': !! explicitDismiss,
+	} );
 	if ( actions && actions.length > 1 ) {
 		// we need to inform developers that snackbar only accepts 1 action
 		warning(
@@ -73,11 +108,11 @@ function Snackbar(
 		<div
 			ref={ ref }
 			className={ classes }
-			onClick={ onRemove }
+			onClick={ ! explicitDismiss ? dismissMe : noop }
 			tabIndex="0"
-			role="button"
-			onKeyPress={ onRemove }
-			aria-label={ __( 'Dismiss this notice' ) }
+			role={ ! explicitDismiss ? 'button' : '' }
+			onKeyPress={ ! explicitDismiss ? dismissMe : noop }
+			aria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }
 		>
 			<div className={ snackbarContentClassnames }>
 				{ icon && (
@@ -90,18 +125,27 @@ function Snackbar(
 							key={ index }
 							href={ url }
 							isTertiary
-							onClick={ ( event ) => {
-								event.stopPropagation();
-								if ( onClick ) {
-									onClick( event );
-								}
-							} }
+							onClick={ ( event ) =>
+								onActionClick( event, onClick )
+							}
 							className="components-snackbar__action"
 						>
 							{ label }
 						</Button>
 					);
 				} ) }
+				{ explicitDismiss && (
+					<span
+						role="button"
+						aria-label="Dismiss this notice"
+						tabIndex="0"
+						className="components-snackbar__dismiss-button"
+						onClick={ dismissMe }
+						onKeyPress={ dismissMe }
+					>
+						&#x2715;
+					</span>
+				) }
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/layout/transient-notices/style.scss

@@ -25,6 +25,10 @@
 }
 
 .components-snackbar {
+	&.components-snackbar-explicit-dismiss {
+		cursor: default;
+	}
+
 	.components-snackbar__content-with-icon {
 		margin-left: 32px;
 	}
@@ -34,4 +38,9 @@
 		top: 24px;
 		left: 26px;
 	}
+
+	.components-snackbar__dismiss_button {
+		margin-left: 32px;
+		cursor: pointer;
+	}
 }

plugins/woocommerce-admin/packages/customer-effort-score/src/index.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
+import { noop } from 'lodash';
 
 /**
  * Use `CustomerEffortScore` to gather a customer effort score.
@@ -24,7 +25,7 @@ function CustomerEffortScore( {
 	trackCallback,
 	label,
 	createNotice,
-	openedCallback,
+	openedCallback = noop,
 	icon,
 } ) {
 	const [ score, setScore ] = useState( 0 );
@@ -39,13 +40,13 @@ function CustomerEffortScore( {
 					onClick: () => {
 						setVisible( true );
 
-						if ( openedCallback ) {
-							openedCallback();
-						}
+						openedCallback();
 					},
 				},
 			],
 			icon,
+			explicitDismiss: true,
+			onDismiss: openedCallback,
 		} );
 
 		setShouldCreateNotice( false );

plugins/woocommerce-admin/packages/notices/src/store/actions.js

@@ -41,6 +41,11 @@ import { DEFAULT_CONTEXT, DEFAULT_STATUS } from './constants';
  * @param {Array<WPNoticeAction>} [options.actions]            User actions to be
  *                                                             presented with notice.
  * @param {Object}                [options.icon]               An icon displayed with the notice.
+ * @param {boolean}               [options.explicitDismiss]    Whether the notice includes
+ *                                                             an explict dismiss button and
+ *                                                             can't be dismissed by clicking
+ *                                                             the body of the notice.
+ * @param {Function}              [options.onDismiss]          Called when the notice is dismissed.
  *
  * @return {Object} Action object.
  */
@@ -54,6 +59,8 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) {
 		type = 'default',
 		__unstableHTML,
 		icon = null,
+		explicitDismiss = false,
+		onDismiss = null,
 	} = options;
 
 	// The supported value shape of content is currently limited to plain text
@@ -74,6 +81,8 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) {
 			actions,
 			type,
 			icon,
+			explicitDismiss,
+			onDismiss,
 		},
 	};
 }