From 0ba29d28d4b5e34b32902942b0fe3edc514ad6c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 28 May 2020 12:20:47 +0200 Subject: [PATCH] Update placeholder styles (https://github.com/woocommerce/woocommerce-blocks/pull/2456) * Convert several default buttons to primary * Align primary and tertiary buttons * Align select controls of placeholders * Don't force a placeholder background color * Add border to placeholder lists * Add work-around for SearchListComponent compatibility with last version of @wordpress/components --- plugins/woocommerce-blocks/assets/css/editor.scss | 14 ++++++++++++++ .../assets/js/blocks/attribute-filter/edit.js | 2 +- .../assets/js/blocks/featured-category/block.js | 2 +- .../assets/js/blocks/featured-category/editor.scss | 5 ----- .../assets/js/blocks/featured-product/block.js | 2 +- .../assets/js/blocks/featured-product/editor.scss | 5 ----- .../assets/js/blocks/handpicked-products/block.js | 2 +- .../assets/js/blocks/product-category/block.js | 2 +- .../assets/js/blocks/product-category/editor.scss | 4 +--- .../assets/js/blocks/product-tag/block.js | 2 +- .../assets/js/blocks/product-tag/editor.scss | 4 +--- .../js/blocks/products-by-attribute/block.js | 2 +- .../js/blocks/reviews/reviews-by-category/edit.js | 2 +- .../js/blocks/reviews/reviews-by-product/edit.js | 2 +- .../product-attribute-term-control/style.scss | 5 +++++ .../components/product-category-control/style.scss | 5 +++++ .../js/components/product-tag-control/style.scss | 5 +++++ 17 files changed, 40 insertions(+), 25 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/css/editor.scss b/plugins/woocommerce-blocks/assets/css/editor.scss index aa0d1b872d2..95a22a8a714 100644 --- a/plugins/woocommerce-blocks/assets/css/editor.scss +++ b/plugins/woocommerce-blocks/assets/css/editor.scss @@ -46,3 +46,17 @@ margin: -$gap 0 $gap-small; } } + +// Adds border to placeholder lists, so they can be distinguished from the white background. +.components-placeholder .woocommerce-search-list__list { + border: 1px solid $core-grey-light-500; +} + +// Work-around to make the SearchList component work fine with the last versions of @wordpress/components. +// Ideally it should be possible to remove this once this issue is fixed in WC Admin: +// https://github.com/woocommerce/woocommerce-admin/issues/4349 +.components-placeholder .woocommerce-search-list__list .woocommerce-search-list__item { + border-radius: 0; + height: auto; + text-align: left; +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js index cc1319f85af..1a454238335 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js @@ -369,7 +369,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => { >
{ renderAttributeControl() } -
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js index 2eda08bc731..f22898510ae 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js @@ -214,7 +214,7 @@ const FeaturedCategory = ( { } } isSingle /> - diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/editor.scss index 1be6f4ba5d9..943703a21de 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-category/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-category/editor.scss @@ -1,9 +1,4 @@ .wc-block-featured-category { - &.components-placeholder { - // Reset the background for the placeholders. - background-color: rgba(139, 139, 150, 0.1); - } - .components-resizable-box__handle { z-index: 10; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js index a1e34efe8cc..7fce2490540 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js @@ -112,7 +112,7 @@ const FeaturedProduct = ( { triggerUrlUpdate(); } } /> - diff --git a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss index 1032bcd6c9a..64a0e852724 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss @@ -1,9 +1,4 @@ .wc-block-featured-product { - &.components-placeholder { - // Reset the background for the placeholders. - background-color: rgba(139, 139, 150, 0.1); - } - .components-resizable-box__handle { z-index: 10; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js index 83840b6dc64..cb26a3b717c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js @@ -145,7 +145,7 @@ class ProductsBlock extends Component { setAttributes( { products: ids } ); } } /> - diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js index 2de484b36c3..a8a7f334516 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js @@ -219,7 +219,7 @@ class ProductByCategoryBlock extends Component { this.setChangedAttributes( { catOperator: value } ) } /> - diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js index 288a535fecc..2855ebf877f 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js @@ -155,7 +155,7 @@ const ReviewsByCategoryEditor = ( { } } showReviewCount={ true } /> - diff --git a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js index b933a15dd26..f6d405e5d6e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js @@ -143,7 +143,7 @@ const ReviewsByProductEditor = ( { } } renderItem={ renderProductControlItem } /> - diff --git a/plugins/woocommerce-blocks/assets/js/components/product-attribute-term-control/style.scss b/plugins/woocommerce-blocks/assets/js/components/product-attribute-term-control/style.scss index 0918ad8ab09..7efa9688bb4 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-attribute-term-control/style.scss +++ b/plugins/woocommerce-blocks/assets/js/components/product-attribute-term-control/style.scss @@ -2,6 +2,11 @@ .components-base-control__help { @include visually-hidden; } + + .components-base-control__label { + margin-bottom: 0; + margin-right: 0.5em; + } } .components-panel { diff --git a/plugins/woocommerce-blocks/assets/js/components/product-category-control/style.scss b/plugins/woocommerce-blocks/assets/js/components/product-category-control/style.scss index c9bd3e799ae..60a17f5789d 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-category-control/style.scss +++ b/plugins/woocommerce-blocks/assets/js/components/product-category-control/style.scss @@ -2,6 +2,11 @@ .components-base-control__help { @include visually-hidden; } + + .components-base-control__label { + margin-bottom: 0; + margin-right: 0.5em; + } } .components-panel { diff --git a/plugins/woocommerce-blocks/assets/js/components/product-tag-control/style.scss b/plugins/woocommerce-blocks/assets/js/components/product-tag-control/style.scss index 9c44b131da5..f2b4bcd508c 100644 --- a/plugins/woocommerce-blocks/assets/js/components/product-tag-control/style.scss +++ b/plugins/woocommerce-blocks/assets/js/components/product-tag-control/style.scss @@ -2,6 +2,11 @@ .components-base-control__help { @include visually-hidden; } + + .components-base-control__label { + margin-bottom: 0; + margin-right: 0.5em; + } } .components-panel {