Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
Albert Juhé Lluveras 2020-05-28 12:20:47 +02:00 committed by GitHub
parent b7430d2197
commit 0ba29d28d4
17 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/woocommerce-blocks/assets/css/editor.scss
View File

@ -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;
}

2
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
View File

@ -369,7 +369,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
>
<div className="wc-block-attribute-filter__selection">
{ renderAttributeControl() }
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

2
plugins/woocommerce-blocks/assets/js/blocks/featured-category/block.js
View File

@ -214,7 +214,7 @@ const FeaturedCategory = ( {
} }
isSingle
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

5
plugins/woocommerce-blocks/assets/js/blocks/featured-category/editor.scss
View File

@ -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;
}

2
plugins/woocommerce-blocks/assets/js/blocks/featured-product/block.js
View File

@ -112,7 +112,7 @@ const FeaturedProduct = ( {
triggerUrlUpdate();
} }
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

5
plugins/woocommerce-blocks/assets/js/blocks/featured-product/editor.scss
View File

@ -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;
}

2
plugins/woocommerce-blocks/assets/js/blocks/handpicked-products/block.js
View File

@ -145,7 +145,7 @@ class ProductsBlock extends Component {
setAttributes( { products: ids } );
} }
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

2
plugins/woocommerce-blocks/assets/js/blocks/product-category/block.js
View File

@ -219,7 +219,7 @@ class ProductByCategoryBlock extends Component {
this.setChangedAttributes( { catOperator: value } )
}
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
<Button

4
plugins/woocommerce-blocks/assets/js/blocks/product-category/editor.scss
View File

@ -1,9 +1,7 @@
.wc-block-products-category__selection {
width: 100%;
}
.wc-block-products-category__cancel-button.is-tertiary {
margin: 1em auto 0;
display: block;
text-align: center;
font-size: 1em;
}

2
plugins/woocommerce-blocks/assets/js/blocks/product-tag/block.js
View File

@ -202,7 +202,7 @@ class ProductsByTagBlock extends Component {
this.setChangedAttributes( { tagOperator: value } )
}
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
<Button

4
plugins/woocommerce-blocks/assets/js/blocks/product-tag/editor.scss
View File

@ -1,9 +1,7 @@
.wc-block-product-tag__selection {
width: 100%;
}
.wc-block-product-tag__cancel-button.is-tertiary {
margin: 1em auto 0;
display: block;
text-align: center;
font-size: 1em;
}

2
plugins/woocommerce-blocks/assets/js/blocks/products-by-attribute/block.js
View File

@ -145,7 +145,7 @@ class ProductsByAttributeBlock extends Component {
setAttributes( { attrOperator: value } )
}
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

2
plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-category/edit.js
View File

@ -155,7 +155,7 @@ const ReviewsByCategoryEditor = ( {
} }
showReviewCount={ true }
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

2
plugins/woocommerce-blocks/assets/js/blocks/reviews/reviews-by-product/edit.js
View File

@ -143,7 +143,7 @@ const ReviewsByProductEditor = ( {
} }
renderItem={ renderProductControlItem }
/>
<Button isDefault onClick={ onDone }>
<Button isPrimary onClick={ onDone }>
{ __( 'Done', 'woo-gutenberg-products-block' ) }
</Button>
</div>

5
plugins/woocommerce-blocks/assets/js/components/product-attribute-term-control/style.scss
View File

@ -2,6 +2,11 @@
.components-base-control__help {
@include visually-hidden;
}
.components-base-control__label {
margin-bottom: 0;
margin-right: 0.5em;
}
}
.components-panel {

5
plugins/woocommerce-blocks/assets/js/components/product-category-control/style.scss
View File

@ -2,6 +2,11 @@
.components-base-control__help {
@include visually-hidden;
}
.components-base-control__label {
margin-bottom: 0;
margin-right: 0.5em;
}
}
.components-panel {

5
plugins/woocommerce-blocks/assets/js/components/product-tag-control/style.scss
View File

@ -2,6 +2,11 @@
.components-base-control__help {
@include visually-hidden;
}
.components-base-control__label {
margin-bottom: 0;
margin-right: 0.5em;
}
}
.components-panel {