Product preview: Update "Add to cart" button to inherit theme's button styles (https://github.com/woocommerce/woocommerce-blocks/pull/223)

* Remove button styling & add classes to inherit style from core button

* Update to CSS grid

* Prevent warnings when running autoprefixer

* Update spacing in preview

* Update snapshots to reflect button markup change

* Switch to flexbox for IE 11 support

* Remove CSS grid autoprefixer support

* Fix spacing on preview items

* Fix stylelint issue

* Remove unnecessary rule

plugins/woocommerce-blocks/assets/css/product-category-block.scss

@@ -9,6 +9,28 @@
 
 .wc-block-products-category {
 	overflow: hidden;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+
+	&.is-loading,
+	&.is-not-found,
+	&.cols-1 {
+		display: block;
+	}
+
+	.wc-product-preview {
+		flex: 1;
+		padding: $gap/2;
+	}
+
+	@for $i from 2 to 7 {
+		&.cols-#{$i} .wc-product-preview {
+			max-width: calc(#{ 100% / $i });
+			min-width: calc(#{ 100% / $i });
+			flex: 1;
+		}
+	}
 
 	&.components-placeholder {
 		padding: 2em 1em;
@@ -17,26 +39,10 @@
 	.editor-block-preview & {
 		min-width: 5em;
 
-		.wc-product-preview__title,
+		@for $i from 1 to 7 {
-		.wc-product-preview__price,
+			&.cols-#{$i} {
-		.wc-product-preview__add-to-cart {
+				min-width: $i * 5em;
-			font-size: 0.6em;
+			}
-		}
-
-		&.cols-2 {
-			min-width: 2 * 5em;
-		}
-		&.cols-3 {
-			min-width: 3 * 5em;
-		}
-		&.cols-4 {
-			min-width: 4 * 5em;
-		}
-		&.cols-5 {
-			min-width: 5 * 5em;
-		}
-		&.cols-6 {
-			min-width: 6 * 5em;
 		}
 
 		&.is-loading,

plugins/woocommerce-blocks/assets/js/components/product-preview/index.js

@@ -26,8 +26,10 @@ const ProductPreview = ( { product } ) => {
 				className="wc-product-preview__price"
 				dangerouslySetInnerHTML={ { __html: product.price_html } }
 			/>
-			<span className="wc-product-preview__add-to-cart">
+			<span className="wp-block-button">
-				{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
+				<span className="wc-product-preview__add-to-cart wp-block-button__link">
+					{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
+				</span>
 			</span>
 		</div>
 	);

plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss

@@ -1,90 +1,47 @@
 .wc-product-preview {
-	float: left;
 	text-align: center;
-	margin-right: 3.8%;
+	margin-bottom: $gap;
 
-	.cols-1 & {
+	.wc-product-preview__title,
-		float: none;
+	.wc-product-preview__price {
-		margin-right: 0;
+		margin-top: $gap-smallest;
 	}
 
-	.cols-2 & {
+	.wp-block-button {
-		width: 48%;
+		margin-bottom: 0;
-
-		&:nth-of-type(2n) {
-			margin-right: 0;
-		}
-
-		&:nth-of-type(2n+1) {
-			clear: both;
-		}
 	}
 
-	.cols-3 & {
+	.wc-product-preview__add-to-cart {
-		width: 30.75%;
+		cursor: text;
-
+		margin: $gap-small 0 0;
-		&:nth-of-type(3n) {
-			margin-right: 0;
-		}
-
-		&:nth-of-type(3n+1) {
-			clear: both;
-		}
-	}
-
-	.cols-4 & {
-		width: 22.05%;
-
-		&:nth-of-type(4n) {
-			margin-right: 0;
-		}
-
-		&:nth-of-type(4n+1) {
-			clear: both;
-		}
-	}
-
-	.cols-5 & {
-		width: 16.9%;
-
-		&:nth-of-type(5n) {
-			margin-right: 0;
-		}
-
-		&:nth-of-type(5n+1) {
-			clear: both;
-		}
-
-		.wc-product-preview__add-to-cart {
-			font-size: 0.75em;
-		}
 	}
 
+	.cols-4 &,
+	.cols-5 &,
 	.cols-6 & {
-		width: 13.5%;
+		.wc-product-preview__title {
-
+			font-size: 0.9em;
-		&:nth-of-type(6n) {
+			line-height: 1.2;
-			margin-right: 0;
 		}
-
+		.wc-product-preview__price {
-		&:nth-of-type(6n+1) {
+			font-size: 0.8em;
-			clear: both;
 		}
-
 		.wc-product-preview__add-to-cart {
-			font-size: 0.75em;
+			font-size: 0.7em !important;
+			line-height: 1.4 !important;
+		}
+	}
+
+	.editor-block-preview & {
+		.wc-product-preview__title {
+			font-size: 0.7em;
+			line-height: 1.2;
+		}
+		.wc-product-preview__price {
+			font-size: 0.6em;
+		}
+		.wc-product-preview__add-to-cart {
+			font-size: 0.6em !important;
 		}
 	}
 }
-
-.wc-product-preview__add-to-cart {
-	display: inline-block;
-	background: #ababab;
-	border-radius: 1.5em;
-	color: #fff;
-	cursor: pointer;
-	padding: 0.75em 1.25em;
-	line-height: 1.2em;
-	margin-top: 0.5em;
-	margin-bottom: 1em;
-}

plugins/woocommerce-blocks/assets/js/components/product-preview/test/__snapshots__/index.js.snap

@@ -22,9 +22,13 @@ exports[`ProductPreview should render a single product preview with an image 1`]
     }
   />
   <span
-    className="wc-product-preview__add-to-cart"
+    className="wp-block-button"
   >
-    Add to cart
+    <span
+      className="wc-product-preview__add-to-cart wp-block-button__link"
+    >
+      Add to cart
+    </span>
   </span>
 </div>
 `;
@@ -47,9 +51,13 @@ exports[`ProductPreview should render a single product preview without an image
     }
   />
   <span
-    className="wc-product-preview__add-to-cart"
+    className="wp-block-button"
   >
-    Add to cart
+    <span
+      className="wc-product-preview__add-to-cart wp-block-button__link"
+    >
+      Add to cart
+    </span>
   </span>
 </div>
 `;

plugins/woocommerce-blocks/postcss.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-	plugins: [
+	plugins: [ require( 'autoprefixer' )( { browsers: [ '>1%' ] } ) ],
-		require( 'autoprefixer' )( { grid: true } ),
+};
-	]
-}