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

Category Selection: Always show "selected" section (https://github.com/woocommerce/woocommerce-blocks/pull/192) 

* Always show the selected tags section, with a min-height to prevent jumping when selecting tags

* Only show the “clear all” button if there are selected items

* Update snapshot tests

* Update height for sidebar category selection
This commit is contained in:
Kelly Dwan 2018-12-03 16:05:12 -05:00 committed by GitHub
parent 50aa551268
commit f0f62b5caa
4 changed files with 117 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,8 @@
margin: 0 0 $gap;
padding: 0;
border-top: none;
// 54px is the height of 1 row of tags in the sidebar.
min-height: 54px;
}
.woocommerce-search-list__search {
margin: 0 0 $gap;

28
plugins/woocommerce-blocks/assets/js/components/search-list-control/index.js
View File

@ -160,10 +160,10 @@ export class SearchListControl extends Component {
return (
<div className={ `woocommerce-search-list ${ className }` }>
{ selectedCount > 0 ? (
<div className="woocommerce-search-list__selected">
<div className="woocommerce-search-list__selected-header">
<strong>{ messages.selected( selectedCount ) }</strong>
<div className="woocommerce-search-list__selected">
<div className="woocommerce-search-list__selected-header">
<strong>{ messages.selected( selectedCount ) }</strong>
{ selectedCount > 0 ? (
<Button
isLink
isDestructive
@ -172,17 +172,17 @@ export class SearchListControl extends Component {
>
{ __( 'Clear all', 'woocommerce' ) }
</Button>
</div>
{ selected.map( ( item, i ) => (
<Tag
key={ i }
label={ item.name }
id={ item.id }
remove={ this.onRemove }
/>
) ) }
) : null }
</div>
) : null }
{ selected.map( ( item, i ) => (
<Tag
key={ i }
label={ item.name }
id={ item.id }
remove={ this.onRemove }
/>
) ) }
</div>
<div className="woocommerce-search-list__search">
<TextControl

2
plugins/woocommerce-blocks/assets/js/components/search-list-control/style.scss
View File

@ -7,6 +7,8 @@
.woocommerce-search-list__selected {
margin: $gap 0;
padding: $gap 0 0;
// 76px is the height of 1 row of tags.
min-height: 76px;
border-top: 1px solid $core-grey-light-500;
.woocommerce-search-list__selected-header {

99
plugins/woocommerce-blocks/assets/js/components/search-list-control/test/__snapshots__/index.js.snap
View File

@ -4,6 +4,17 @@ exports[`SearchListControl should render a search box and list of hierarchical o
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -382,6 +393,17 @@ exports[`SearchListControl should render a search box and list of options 1`] =
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -760,6 +782,17 @@ exports[`SearchListControl should render a search box and list of options with a
<div
className="woocommerce-search-list test-search"
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -1138,6 +1171,17 @@ exports[`SearchListControl should render a search box and list of options, with
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -1210,6 +1254,17 @@ exports[`SearchListControl should render a search box and list of options, with
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -1588,6 +1643,17 @@ exports[`SearchListControl should render a search box and no options 1`] = `
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -1619,6 +1685,17 @@ exports[`SearchListControl should render a search box with a search term, and no
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -1652,6 +1729,17 @@ exports[`SearchListControl should render a search box with a search term, and on
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>
@ -1811,6 +1899,17 @@ exports[`SearchListControl should render a search box with a search term, and on
<div
className="woocommerce-search-list "
>
<div
className="woocommerce-search-list__selected"
>
<div
className="woocommerce-search-list__selected-header"
>
<strong>
0 items selected
</strong>
</div>
</div>
<div
className="woocommerce-search-list__search"
>