Components: Fix responsive across elements with box-sizing removal (#…

…28489) * My Jetpack: Remove local box-sizing * Components: Add box-sizing at ThemeProvider * changelog * Bump version * Components: Rename class from theme to global
Automattic · Jan 20, 2023 · 5ce8b66 · 5ce8b66
1 parent ddd89e2
commit 5ce8b66
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 12 deletions.
diff --git a/projects/js-packages/components/changelog/fix-my-jetpack-responsive b/projects/js-packages/components/changelog/fix-my-jetpack-responsive
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Components: Fix usage of box-sizing across the elements
diff --git a/projects/js-packages/components/components/theme-provider/globals.module.scss b/projects/js-packages/components/components/theme-provider/globals.module.scss
@@ -0,0 +1,6 @@
+/* DO NOT USE THIS TO OVERRIDE STYLES */
+.global {
+	& * {
+		box-sizing: border-box;
+	}
+}
diff --git a/projects/js-packages/components/components/theme-provider/index.tsx b/projects/js-packages/components/components/theme-provider/index.tsx
@@ -1,4 +1,5 @@
 import React, { useLayoutEffect, useRef } from 'react';
+import styles from './globals.module.scss';
 import { ThemeInstance, ThemeProviderProps } from './types';
 
 export const typography = {
@@ -85,12 +86,16 @@ export const spacing = {
 
 const globalThemeInstances: Record< string, ThemeInstance > = {};
 
-const setup = ( root: HTMLElement, id: string ) => {
+const setup = ( root: HTMLElement, id: string, withGlobalStyles?: boolean ) => {
 	const tokens = { ...typography, ...colors, ...borders, ...spacing };
 	for ( const key in tokens ) {
 		root.style.setProperty( key, tokens[ key ] );
 	}
 
+	if ( withGlobalStyles ) {
+		root.classList.add( styles.global );
+	}
+
 	if ( ! id ) {
 		return;
 	}
@@ -108,7 +113,12 @@ const setup = ( root: HTMLElement, id: string ) => {
  * @param {ThemeProviderProps} props           - Component properties.
  * @returns {React.ReactNode}        ThemeProvider component.
  */
-const ThemeProvider: React.FC< ThemeProviderProps > = ( { children = null, targetDom, id } ) => {
+const ThemeProvider: React.FC< ThemeProviderProps > = ( {
+	children = null,
+	targetDom,
+	id,
+	withGlobalStyles = true,
+} ) => {
 	const themeWrapperRef = useRef< HTMLDivElement >();
 
 	// Check whether the theme provider instance is already registered.
@@ -120,15 +130,15 @@ const ThemeProvider: React.FC< ThemeProviderProps > = ( { children = null, targe
 		}
 
 		if ( targetDom ) {
-			return setup( targetDom, id );
+			return setup( targetDom, id, withGlobalStyles );
 		}
 
 		if ( ! themeWrapperRef?.current ) {
 			return;
 		}
 
-		setup( themeWrapperRef.current, id );
-	}, [ targetDom, themeWrapperRef, isAlreadyProvided, id ] );
+		setup( themeWrapperRef.current, id, withGlobalStyles );
+	}, [ targetDom, themeWrapperRef, isAlreadyProvided, id, withGlobalStyles ] );
 
 	// Do not wrap when the DOM element target is defined.
 	if ( targetDom ) {

diff --git a/projects/js-packages/components/components/theme-provider/types.ts b/projects/js-packages/components/components/theme-provider/types.ts
@@ -13,6 +13,10 @@ export type ThemeProviderProps = {
 	 * Content
 	 */
 	children?: React.ReactElement;
+	/**
+	 * Inser global/reset styles
+	 */
+	withGlobalStyles?: boolean;
 };
 
 export type ThemeInstance = {

diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.27.0",
+	"version": "0.27.1-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss
@@ -3,7 +3,6 @@
 }
 
 .notice {
-	box-sizing: border-box;
 	margin: 0;
     padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 ) calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 ); // 16px | 24px | 16px | 24px
 	font-size: 16px;

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-card/style.module.scss
@@ -10,7 +10,6 @@
 	display: flex;
 	flex-direction: column;
 	box-shadow: 0 0 0 1px var( --jp-gray-10 ) inset;
-	box-sizing: border-box;
 
 	&.is-link {
 		background: none;

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-detail-card/style.module.scss
@@ -3,7 +3,6 @@
 	height: 100%;
 	padding: calc( var( --spacing-base ) * 8 );
 	position: relative;
-	box-sizing: border-box;
 }
 
 .container {
@@ -72,7 +71,7 @@
 		height: auto;
 		white-space: normal;
 	}
-	
+
 	&:global(.is-secondary):hover:not(:disabled) {
 		background-color: var( --jp-black );
 		color: var( --jp-white );

diff --git a/projects/packages/my-jetpack/changelog/fix-my-jetpack-responsive b/projects/packages/my-jetpack/changelog/fix-my-jetpack-responsive
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Components: Fix usage of box-sizing across the elements
diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "2.7.4",
+	"version": "2.7.5-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/my-jetpack/#readme",
 	"bugs": {

diff --git a/projects/packages/my-jetpack/src/class-initializer.php b/projects/packages/my-jetpack/src/class-initializer.php
@@ -30,7 +30,7 @@ class Initializer {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '2.7.4';
+	const PACKAGE_VERSION = '2.7.5-alpha';
 
 	/**
 	 * Initialize My Jetpack