Add theme-level global styles to Cart and Checkout block (#8809)

* Dummy commit to open a PR * Revert the last change * Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (#8844) * Add GS support for button colors in Checkout block * Sync button hover effect with GB * Fix link margin/padding (#8908) * Replace <AddToCartButton /> with <ProductButton /> (#8914) * Add GS support for button typography in Checkout block (#8918) * Ensure Checkout block supports the theme-level global styles for Typography » Buttons (#8892) * Remove classname from cart image to avoid conflicts (#8898) Co-authored-by: Niels Lange <[email protected]> * Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (#9065) * Allow button height to adjust * Ensure to display full width heading background * Inherit font style and font weight for headings * Inherit font style and font weight for textarea * Inherit font family and font weight for buttons --------- Co-authored-by: Niels Lange <[email protected]> Co-authored-by: Mike Jolley <[email protected]>
woocommerce · Apr 21, 2023 · b0f94b8 · b0f94b8
1 parent 17e234d
commit b0f94b8
Show file tree

Hide file tree

Showing 23 changed files with 120 additions and 141 deletions.
diff --git a/assets/css/abstracts/_mixins.scss b/assets/css/abstracts/_mixins.scss
@@ -123,8 +123,11 @@ $fontSizes: (
 	vertical-align: baseline;
 }
 
-@mixin reset-typography() {
+@mixin reset-color() {
 	color: inherit;
+}
+
+@mixin reset-typography() {
 	font-family: inherit;
 	font-size: inherit;
 	font-style: inherit;
@@ -138,6 +141,7 @@ $fontSizes: (
 // Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
 @mixin text-heading() {
 	@include reset-box();
+	@include reset-color();
 	@include reset-typography();
 	box-shadow: none;
 	display: inline;
@@ -148,6 +152,7 @@ $fontSizes: (
 // Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
 @mixin text-button() {
 	@include reset-box();
+	@include reset-color();
 	@include reset-typography();
 	background: transparent;
 	box-shadow: none;

diff --git a/assets/js/atomic/blocks/product-elements/button/style.scss b/assets/js/atomic/blocks/product-elements/button/style.scss
@@ -5,8 +5,6 @@
 	.wc-block-components-product-button__button {
 		border-style: none;
 		display: inline-flex;
-		font-family: inherit;
-		font-weight: inherit;
 		justify-content: center;
 		margin-right: auto;
 		margin-left: auto;

diff --git a/assets/js/base/components/button/style.scss b/assets/js/base/components/button/style.scss
@@ -2,6 +2,7 @@
 	align-items: center;
 	display: inline-flex;
 	min-height: 3em;
+	height: auto;
 	justify-content: center;
 	text-align: center;
 	position: relative;
@@ -57,12 +58,7 @@
 }
 
 body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
-	@include reset-typography();
-	font-weight: bold;
-	line-height: 1;
 	padding: 0 em($gap);
-	text-decoration: none;
-	text-transform: none;
 
 	&:focus {
 		box-shadow: 0 0 0 2px $studio-blue;
@@ -77,21 +73,4 @@ body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button
 			opacity: 0.9;
 		}
 	}
-
-	&.contained {
-		background-color: $gray-900;
-		color: $white;
-
-		&:disabled,
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: $gray-900;
-			color: $white;
-		}
-
-		&:hover {
-			opacity: 0.9;
-		}
-	}
 }
diff --git a/assets/js/base/components/cart-checkout/form-step/style.scss b/assets/js/base/components/cart-checkout/form-step/style.scss
@@ -21,6 +21,11 @@
 
 .wc-block-components-checkout-step__container {
 	position: relative;
+
+	textarea {
+		font-style: inherit;
+		font-weight: inherit;
+	}
 }
 
 .wc-block-components-checkout-step__content > * {
@@ -32,14 +37,8 @@
 }
 
 .wc-block-components-checkout-step__heading {
-	display: flex;
-	justify-content: space-between;
-	align-content: center;
-	flex-wrap: wrap;
 	margin: em($gap-small) 0 em($gap);
 	position: relative;
-	align-items: center;
-	gap: em($gap);
 
 	.wc-block-components-express-payment-continue-rule + .wc-block-components-checkout-step & {
 		margin-top: 0;

diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -35,7 +35,6 @@ const OrderSummary = ( {
 					{ __( 'Order summary', 'woo-gutenberg-products-block' ) }
 				</span>
 			}
-			titleTag="h2"
 		>
 			<div className="wc-block-components-order-summary__content">
 				{ cartItems.map( ( cartItem ) => {

diff --git a/assets/js/base/components/cart-checkout/order-summary/style.scss b/assets/js/base/components/cart-checkout/order-summary/style.scss
@@ -8,97 +8,97 @@
 	.wc-block-components-panel__content {
 		margin-bottom: 0;
 	}
-}
 
-.wc-block-components-order-summary__content {
-	display: table;
-	width: 100%;
-}
+	.wc-block-components-order-summary__content {
+		display: table;
+		width: 100%;
+	}
 
-.wc-block-components-order-summary-item {
-	@include with-translucent-border(0 0 1px);
-	@include font-size(small);
-	display: flex;
-	padding-bottom: 1px;
-	padding-top: $gap;
-	width: 100%;
+	.wc-block-components-order-summary-item {
+		@include with-translucent-border(0 0 1px);
+		@include font-size(small);
+		display: flex;
+		padding-bottom: 1px;
+		padding-top: $gap;
+		width: 100%;
 
-	&:first-child {
-		padding-top: 0;
-	}
+		&:first-child {
+			padding-top: 0;
+		}
 
-	&:last-child {
-		> div {
-			padding-bottom: 0;
+		&:last-child {
+			> div {
+				padding-bottom: 0;
+			}
+
+			&::after {
+				display: none;
+			}
 		}
 
-		&::after {
-			display: none;
+		.wc-block-components-product-metadata {
+			@include font-size(regular);
 		}
 	}
 
-	.wc-block-components-product-metadata {
-		@include font-size(regular);
+	.wc-block-components-order-summary-item__image,
+	.wc-block-components-order-summary-item__description {
+		display: table-cell;
+		vertical-align: top;
 	}
-}
-
-.wc-block-components-order-summary-item__image,
-.wc-block-components-order-summary-item__description {
-	display: table-cell;
-	vertical-align: top;
-}
-
-.wc-block-components-order-summary-item__image {
-	width: #{$gap-large * 2};
-	padding-bottom: $gap;
-	position: relative;
 
-	> img {
+	.wc-block-components-order-summary-item__image {
 		width: #{$gap-large * 2};
-		max-width: #{$gap-large * 2};
+		padding-bottom: $gap;
+		position: relative;
+
+		> img {
+			width: #{$gap-large * 2};
+			max-width: #{$gap-large * 2};
+		}
 	}
-}
 
-.wc-block-components-order-summary-item__quantity {
-	align-items: center;
-	background: #fff;
-	border: 2px solid;
-	border-radius: 1em;
-	box-shadow: 0 0 0 2px #fff;
-	color: #000;
-	display: flex;
-	line-height: 1;
-	min-height: 20px;
-	padding: 0 0.4em;
-	position: absolute;
-	justify-content: center;
-	min-width: 20px;
-	right: 0;
-	top: 0;
-	transform: translate(50%, -50%);
-	white-space: nowrap;
-	z-index: 1;
-}
+	.wc-block-components-order-summary-item__quantity {
+		align-items: center;
+		background: #fff;
+		border: 2px solid;
+		border-radius: 1em;
+		box-shadow: 0 0 0 2px #fff;
+		color: #000;
+		display: flex;
+		line-height: 1;
+		min-height: 20px;
+		padding: 0 0.4em;
+		position: absolute;
+		justify-content: center;
+		min-width: 20px;
+		right: 0;
+		top: 0;
+		transform: translate(50%, -50%);
+		white-space: nowrap;
+		z-index: 1;
+	}
 
-.wc-block-components-order-summary-item__description {
-	padding-left: $gap-large;
-	padding-right: $gap-small;
-	padding-bottom: $gap;
+	.wc-block-components-order-summary-item__description {
+		padding-left: $gap-large;
+		padding-right: $gap-small;
+		padding-bottom: $gap;
 
-	p,
-	.wc-block-components-product-metadata {
-		line-height: 1.375;
-		margin-top: #{ ($gap-large - $gap) * 0.5 };
+		p,
+		.wc-block-components-product-metadata {
+			line-height: 1.375;
+			margin-top: #{ ($gap-large - $gap) * 0.5 };
+		}
 	}
-}
 
-.wc-block-components-order-summary-item__total-price {
-	font-weight: bold;
-	margin-left: auto;
-	text-align: right;
-}
+	.wc-block-components-order-summary-item__total-price {
+		font-weight: bold;
+		margin-left: auto;
+		text-align: right;
+	}
 
 
-.wc-block-components-order-summary-item__individual-prices {
-	display: block;
+	.wc-block-components-order-summary-item__individual-prices {
+		display: block;
+	}
 }
diff --git a/assets/js/base/components/cart-checkout/product-image/index.tsx b/assets/js/base/components/cart-checkout/product-image/index.tsx
@@ -4,11 +4,6 @@
 import { decodeEntities } from '@wordpress/html-entities';
 import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
 
-/**
- * Internal dependencies
- */
-import './style.scss';
-
 interface ProductImageProps {
 	image: { alt?: string; thumbnail?: string };
 	fallbackAlt: string;
@@ -37,13 +32,7 @@ const ProductImage = ( {
 				alt: '',
 		  };
 
-	return (
-		<img
-			className="wc-block-components-product-image"
-			{ ...imageProps }
-			alt={ imageProps.alt }
-		/>
-	);
+	return <img { ...imageProps } alt={ imageProps.alt } />;
 };
 
 export default ProductImage;
diff --git a/assets/js/base/components/cart-checkout/product-image/style.scss b/assets/js/base/components/cart-checkout/product-image/style.scss
diff --git a/assets/js/base/components/radio-control/style.scss b/assets/js/base/components/radio-control/style.scss
@@ -1,4 +1,5 @@
 .wc-block-components-radio-control__option {
+	@include reset-color();
 	@include reset-typography();
 	display: block;
 	margin: em($gap) 0;

diff --git a/assets/js/base/components/sidebar-layout/style.scss b/assets/js/base/components/sidebar-layout/style.scss
@@ -49,11 +49,14 @@
 .is-large {
 	.wc-block-components-sidebar {
 		.wc-block-components-totals-item,
-		.wc-block-components-totals-coupon-link,
 		.wc-block-components-panel {
 			padding-left: $gap;
 			padding-right: $gap;
 		}
+		.wc-block-components-totals-coupon-link {
+			margin-left: $gap;
+			margin-right: $gap;
+		}
 
 		.wc-block-components-panel {
 			.wc-block-components-totals-item {

diff --git a/assets/js/base/components/title/style.scss b/assets/js/base/components/title/style.scss
@@ -3,6 +3,13 @@
 	@include reset-box();
 	@include font-size(large);
 	word-break: break-word;
+
+	textarea {
+		letter-spacing: inherit;
+		text-transform: inherit;
+		font-weight: inherit;
+		font-style: inherit;
+	}
 }
 
 // For Twenty Twenty we need to increase specificity a bit more.

diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss b/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
@@ -59,6 +59,7 @@
 	}
 
 	label {
+		@include reset-color();
 		@include reset-typography();
 		@include font-size(regular);
 		line-height: 1.375; // =22px when font-size is 16px.

diff --git a/assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx b/assets/js/blocks/cart/cart-cross-sells-product-list/cart-cross-sells-product.tsx
@@ -16,7 +16,6 @@ import { Block as ProductRating } from '../../../atomic/blocks/product-elements/
 import { Block as ProductSaleBadge } from '../../../atomic/blocks/product-elements/sale-badge/block';
 import { Block as ProductPrice } from '../../../atomic/blocks/product-elements/price/block';
 import { Block as ProductButton } from '../../../atomic/blocks/product-elements/button/block';
-import AddToCartButton from '../../../atomic/blocks/product-elements/add-to-cart/block';
 import { ImageSizing } from '../../../atomic/blocks/product-elements/image/types';
 
 interface CrossSellsProductProps {
@@ -60,11 +59,7 @@ const CartCrossSellsProduct = ( {
 						/>
 						<ProductPrice />
 					</div>
-					{ product.is_in_stock ? (
-						<AddToCartButton />
-					) : (
-						<ProductButton />
-					) }
+					<ProductButton />
 				</ProductDataContextProvider>
 			</InnerBlockLayoutContextProvider>
 		</div>