Merge pull request #1739 from woocommerce/fix/1736-visually-hidden-style

WP 6.1 Compatibility: Fix the giant icons in the `DatePicker` component

js/src/components/app-modal/index.js

@@ -42,6 +42,9 @@ const AppModal = ( {
 	...rest
 } ) => {
 	const modalClassName = classnames(
+		// gla-admin-page is for scoping particular styles to components that are used by
+		// a GLA admin page and are rendered via ReactDOM.createPortal.
+		'gla-admin-page',
 		'app-modal',
 		overflowStyleName[ overflow ],
 		className

js/src/components/withAdminPageShell.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * A higher-order component for wrapping the app shell on top of the GLA admin page.
+ * Cross-page shared things could be handled here.
+ *
+ * @param {JSX.Element} Page Top-level admin page component to be wrapped by app shell.
+ */
+const withAdminPageShell = createHigherOrderComponent(
+	( Page ) => ( props ) => {
+		return (
+			// gla-admin-page is for scoping particular styles to a GLA admin page.
+			<div className="gla-admin-page">
+				<Page { ...props } />;
+			</div>
+		);
+	},
+	'withAdminPageShell'
+);
+
+export default withAdminPageShell;

js/src/css/shared/_gutenberg-components.scss

@@ -2,6 +2,16 @@
 @import "node_modules/@wordpress/components/src/button/style"; // required for tab-panel
 @import "node_modules/@wordpress/components/src/panel/style";
 
+// Scope the old styles of core components to GLA pages to avoid styling conflicts with other non-GLA pages.
+.gla-admin-page {
+	// WP 6.1 Compatibility (@wordpress/components 21.0.6 imported by @woocommerce/components)
+	// The style of `DatePicker` component was significantly changed as per the new implementations.
+	// This import could be removed after:
+	// - It's fixed from @woocommerce/components
+	// - or @wordpress/components is changed to be imported via (WC)DEWP
+	@import "node_modules/@wordpress/components/src/date-time/datepicker"; /* stylelint-disable-line no-invalid-position-at-import-rule */
+}
+
 .components-button {
 	// Hack to show correct font color for disabled primary destructive button.
 	// The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72

js/src/index.js

@@ -11,6 +11,7 @@ import { getSetting } from '@woocommerce/settings'; // eslint-disable-line impor
  * Internal dependencies
  */
 import './css/index.scss';
+import withAdminPageShell from '.~/components/withAdminPageShell';
 import GetStartedPage from './get-started-page';
 import SetupMC from './setup-mc';
 import SetupAds from './setup-ads';
@@ -48,8 +49,7 @@ addFilter(
 			__( 'Google Listings & Ads', 'google-listings-and-ads' )
 		);
 
-		return [
-			...pages,
+		const pluginAdminPages = [
 			{
 				breadcrumbs: [ ...initialBreadcrumbs ],
 				container: GetStartedPage,
@@ -124,5 +124,11 @@ addFilter(
 				},
 			},
 		];
+
+		pluginAdminPages.forEach( ( page ) => {
+			page.container = withAdminPageShell( page.container );
+		} );
+
+		return pages.concat( pluginAdminPages );
 	}
 );

package.json

@@ -133,7 +133,7 @@
 			},
 			{
 				"path": "./js/build/index.css",
-				"maxSize": "12 kB"
+				"maxSize": "15.4 kB"
 			},
 			{
 				"path": "./google-listings-and-ads.zip",