From e3dab1cbcc81fe9836a7f73b568a5a7ae70efbf5 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 13 Dec 2018 12:19:06 -0500 Subject: [PATCH] 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 --- .../assets/css/product-category-block.scss | 46 ++++---- .../js/components/product-preview/index.js | 6 +- .../js/components/product-preview/style.scss | 105 ++++++------------ .../test/__snapshots__/index.js.snap | 16 ++- plugins/woocommerce-blocks/postcss.config.js | 6 +- 5 files changed, 75 insertions(+), 104 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/css/product-category-block.scss b/plugins/woocommerce-blocks/assets/css/product-category-block.scss index e2b90068192..870066e57e2 100644 --- a/plugins/woocommerce-blocks/assets/css/product-category-block.scss +++ b/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, - .wc-product-preview__price, - .wc-product-preview__add-to-cart { - 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; + @for $i from 1 to 7 { + &.cols-#{$i} { + min-width: $i * 5em; + } } &.is-loading, diff --git a/plugins/woocommerce-blocks/assets/js/components/product-preview/index.js b/plugins/woocommerce-blocks/assets/js/components/product-preview/index.js index f8f9b86c204..465eb758672 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-preview/index.js +++ b/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 } } /> - - { __( 'Add to cart', 'woo-gutenberg-products-block' ) } + + + { __( 'Add to cart', 'woo-gutenberg-products-block' ) } + ); diff --git a/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss b/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss index a5a840d681b..033cbbf4776 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-preview/style.scss +++ b/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 & { - float: none; - margin-right: 0; + .wc-product-preview__title, + .wc-product-preview__price { + margin-top: $gap-smallest; } - .cols-2 & { - width: 48%; - - &:nth-of-type(2n) { - margin-right: 0; - } - - &:nth-of-type(2n+1) { - clear: both; - } + .wp-block-button { + margin-bottom: 0; } - .cols-3 & { - width: 30.75%; - - &: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; - } + .wc-product-preview__add-to-cart { + cursor: text; + margin: $gap-small 0 0; } + .cols-4 &, + .cols-5 &, .cols-6 & { - width: 13.5%; - - &:nth-of-type(6n) { - margin-right: 0; + .wc-product-preview__title { + font-size: 0.9em; + line-height: 1.2; } - - &:nth-of-type(6n+1) { - clear: both; + .wc-product-preview__price { + font-size: 0.8em; } - .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; -} diff --git a/plugins/woocommerce-blocks/assets/js/components/product-preview/test/__snapshots__/index.js.snap b/plugins/woocommerce-blocks/assets/js/components/product-preview/test/__snapshots__/index.js.snap index 59afa33e8a7..ca7b1a22854 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-preview/test/__snapshots__/index.js.snap +++ b/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`] } /> - Add to cart + + Add to cart + `; @@ -47,9 +51,13 @@ exports[`ProductPreview should render a single product preview without an image } /> - Add to cart + + Add to cart + `; diff --git a/plugins/woocommerce-blocks/postcss.config.js b/plugins/woocommerce-blocks/postcss.config.js index e3e9da5c7db..1c3e0653184 100644 --- a/plugins/woocommerce-blocks/postcss.config.js +++ b/plugins/woocommerce-blocks/postcss.config.js @@ -1,5 +1,3 @@ module.exports = { - plugins: [ - require( 'autoprefixer' )( { grid: true } ), - ] -} \ No newline at end of file + plugins: [ require( 'autoprefixer' )( { browsers: [ '>1%' ] } ) ], +};