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

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

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

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

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

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

@@ -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 {

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

@@ -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"
   >