@automattic/jetpack-components 0.53.0 → 0.53.2

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.53.2] - 2024-05-13
+### Added
+- Added --jp-gray-5 as an alias of --jp-gray to the theme [#37327]
+
+### Fixed
+- Fixed notices z-index for global notices when modal is open [#37196]
+
+## [0.53.1] - 2024-05-09
+### Added
+- Added GlobalNotices component and useGlobalNotices hook [#37286]
+
 ## [0.53.0] - 2024-05-08
 ### Added
 - Social: Added add connection modal [#37211]
@@ -1019,6 +1030,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.53.2]: https://github.com/Automattic/jetpack-components/compare/0.53.1...0.53.2
+[0.53.1]: https://github.com/Automattic/jetpack-components/compare/0.53.0...0.53.1
 [0.53.0]: https://github.com/Automattic/jetpack-components/compare/0.52.1...0.53.0
 [0.52.1]: https://github.com/Automattic/jetpack-components/compare/0.52.0...0.52.1
 [0.52.0]: https://github.com/Automattic/jetpack-components/compare/0.51.0...0.52.0

package/components/global-notices/global-notices.tsx

@@ -0,0 +1,31 @@
+import { SnackbarList } from '@wordpress/components';
+import styles from './styles.module.scss';
+import { useGlobalNotices } from './use-global-notices';
+
+export type GlobalNoticesProps = {
+	maxVisibleNotices?: number;
+};
+
+/**
+ * Renders the global notices.
+ *
+ * @param {GlobalNoticesProps} props - Component props.
+ *
+ * @returns {import('react').ReactNode} The rendered notices list.
+ */
+export function GlobalNotices( { maxVisibleNotices = 3 }: GlobalNoticesProps ) {
+	const { getNotices, removeNotice } = useGlobalNotices();
+
+	const snackbarNotices = getNotices()
+		.filter( ( { type } ) => type === 'snackbar' )
+		// Slices from the tail end of the list.
+		.slice( -maxVisibleNotices );
+
+	return (
+		<SnackbarList
+			notices={ snackbarNotices }
+			className={ styles[ 'global-notices' ] }
+			onRemove={ removeNotice }
+		/>
+	);
+}

package/components/global-notices/index.ts

@@ -0,0 +1,3 @@
+export * from './global-notices';
+export * from './use-global-notices';
+export { store as globalNoticesStore } from '@wordpress/notices';

package/components/global-notices/styles.module.scss

@@ -0,0 +1,23 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
+.global-notices {
+	&:global(.components-snackbar-list) {
+		position: fixed;
+		inset-block-start: auto; // top
+		inset-block-end: 0; // bottom
+		inset-inline: 0; // left and right
+		// Modals have 100000, so this needs to be above them
+		z-index: 100001;
+
+		@include break-small {
+			width: auto;
+			inset-inline: unset; // left and right
+			inset-block-start: 4rem;
+			inset-inline-end: 1rem;
+		}
+
+		@include break-medium {
+			inset-block-start: 3rem;
+		}
+	}
+}

package/components/global-notices/use-global-notices.ts

@@ -0,0 +1,37 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+type NoticesStore = ReturnType< ( typeof noticesStore )[ 'instantiate' ] >;
+
+export type TGlobalNotices = ReturnType< NoticesStore[ 'getActions' ] > &
+	ReturnType< NoticesStore[ 'getSelectors' ] >;
+
+/**
+ * The global notices hook.
+ *
+ * @returns {TGlobalNotices} The global notices selectors and actions.
+ */
+export function useGlobalNotices(): TGlobalNotices {
+	const actionCreators = useDispatch( noticesStore );
+	const notices = useSelect( select => select( noticesStore ).getNotices(), [] );
+
+	return {
+		...actionCreators,
+		createNotice( status, content, options ) {
+			return actionCreators.createNotice( status, content, { type: 'snackbar', ...options } );
+		},
+		createErrorNotice( content, options ) {
+			return actionCreators.createErrorNotice( content, { type: 'snackbar', ...options } );
+		},
+		createInfoNotice( content, options ) {
+			return actionCreators.createInfoNotice( content, { type: 'snackbar', ...options } );
+		},
+		createSuccessNotice( content, options ) {
+			return actionCreators.createSuccessNotice( content, { type: 'snackbar', ...options } );
+		},
+		createWarningNotice( content, options ) {
+			return actionCreators.createWarningNotice( content, { type: 'snackbar', ...options } );
+		},
+		getNotices: () => notices,
+	};
+}

package/components/theme-provider/index.tsx

@@ -25,6 +25,7 @@ export const colors = {
 	// Gray
 	'--jp-gray': '#dcdcde',
 	'--jp-gray-0': '#F6F7F7',
+	'--jp-gray-5': 'var(--jp-gray)',
 	'--jp-gray-10': '#C3C4C7',
 	'--jp-gray-20': '#A7AAAD',
 	'--jp-gray-40': '#787C82',

package/index.ts

@@ -75,3 +75,4 @@ export { default as ProgressBar } from './components/progress-bar';
 export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';
 export { default as RadioControl } from './components/radio-control';
+export * from './components/global-notices';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.53.0",
+	"version": "0.53.2",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -25,6 +25,7 @@
 		"@wordpress/element": "5.33.0",
 		"@wordpress/i18n": "4.56.0",
 		"@wordpress/icons": "9.47.0",
+		"@wordpress/notices": "4.24.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",