From 443e2f9a557af4567315f71740ed2495b73e35bd Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Tue, 6 Oct 2020 23:27:38 +0300
Subject: [PATCH] Wrap search control selected items in list
 (https://github.com/woocommerce/woocommerce-admin/pull/5231)

* Wrap search control selected items in list

* Fix up snapshots
---
 .../src/search-list-control/index.js          |  21 +-
 .../src/search-list-control/style.scss        |   8 +
 .../test/__snapshots__/index.js.snap          | 238 +++++++++---------
 3 files changed, 145 insertions(+), 122 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js b/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js
index 9ae60ca51cd..be4b2e191a6 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/index.js
@@ -209,14 +209,19 @@ export class SearchListControl extends Component {
 						</Button>
 					) : null }
 				</div>
-				{ selected.map( ( item, i ) => (
-					<Tag
-						key={ i }
-						label={ item.name }
-						id={ item.id }
-						remove={ this.onRemove }
-					/>
-				) ) }
+				{ selectedCount > 0 ? (
+					<ul>
+						{ selected.map( ( item, i ) => (
+							<li key={ i }>
+								<Tag
+									label={ item.name }
+									id={ item.id }
+									remove={ this.onRemove }
+								/>
+							</li>
+						) ) }
+					</ul>
+				) : null }
 			</div>
 		);
 	}
diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
index 3863f1848b6..1c4e9e9e581 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
@@ -22,6 +22,14 @@
 	.woocommerce-tag__text {
 		max-width: 13em;
 	}
+
+	ul {
+		list-style: none;
+
+		li {
+			float: left;
+		}
+	}
 }
 
 .woocommerce-search-list__search {
diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap
index 50500bbc0ce..e3e99bca5ec 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/test/__snapshots__/index.js.snap
@@ -1676,47 +1676,51 @@ exports[`SearchListControl should render a search box, a list of options, and 1
         Clear all
       </button>
     </div>
-    <span
-      className="woocommerce-tag has-remove"
-    >
-      <span
-        className="woocommerce-tag__text"
-        id="woocommerce-tag__label-0"
-      >
+    <ul>
+      <li>
         <span
-          className="screen-reader-text"
+          className="woocommerce-tag has-remove"
         >
-          Clementine
+          <span
+            className="woocommerce-tag__text"
+            id="woocommerce-tag__label-0"
+          >
+            <span
+              className="screen-reader-text"
+            >
+              Clementine
+            </span>
+            <span
+              aria-hidden="true"
+            >
+              Clementine
+            </span>
+          </span>
+          <button
+            aria-describedby="woocommerce-tag__label-0"
+            aria-label="Remove Clementine"
+            className="components-button woocommerce-tag__remove"
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="dashicon dashicons-dismiss"
+              focusable={false}
+              height={20}
+              role="img"
+              viewBox="0 0 20 20"
+              width={20}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
+              />
+            </svg>
+          </button>
         </span>
-        <span
-          aria-hidden="true"
-        >
-          Clementine
-        </span>
-      </span>
-      <button
-        aria-describedby="woocommerce-tag__label-0"
-        aria-label="Remove Clementine"
-        className="components-button woocommerce-tag__remove"
-        onClick={[Function]}
-        type="button"
-      >
-        <svg
-          aria-hidden={true}
-          className="dashicon dashicons-dismiss"
-          focusable={false}
-          height={20}
-          role="img"
-          viewBox="0 0 20 20"
-          width={20}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
-          />
-        </svg>
-      </button>
-    </span>
+      </li>
+    </ul>
   </div>
   <div
     className="woocommerce-search-list__search"
@@ -2011,88 +2015,94 @@ exports[`SearchListControl should render a search box, a list of options, and 2
         Clear all
       </button>
     </div>
-    <span
-      className="woocommerce-tag has-remove"
-    >
-      <span
-        className="woocommerce-tag__text"
-        id="woocommerce-tag__label-1"
-      >
+    <ul>
+      <li>
         <span
-          className="screen-reader-text"
+          className="woocommerce-tag has-remove"
         >
-          Clementine
+          <span
+            className="woocommerce-tag__text"
+            id="woocommerce-tag__label-1"
+          >
+            <span
+              className="screen-reader-text"
+            >
+              Clementine
+            </span>
+            <span
+              aria-hidden="true"
+            >
+              Clementine
+            </span>
+          </span>
+          <button
+            aria-describedby="woocommerce-tag__label-1"
+            aria-label="Remove Clementine"
+            className="components-button woocommerce-tag__remove"
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="dashicon dashicons-dismiss"
+              focusable={false}
+              height={20}
+              role="img"
+              viewBox="0 0 20 20"
+              width={20}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
+              />
+            </svg>
+          </button>
         </span>
+      </li>
+      <li>
         <span
-          aria-hidden="true"
+          className="woocommerce-tag has-remove"
         >
-          Clementine
+          <span
+            className="woocommerce-tag__text"
+            id="woocommerce-tag__label-2"
+          >
+            <span
+              className="screen-reader-text"
+            >
+              Guava
+            </span>
+            <span
+              aria-hidden="true"
+            >
+              Guava
+            </span>
+          </span>
+          <button
+            aria-describedby="woocommerce-tag__label-2"
+            aria-label="Remove Guava"
+            className="components-button woocommerce-tag__remove"
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="dashicon dashicons-dismiss"
+              focusable={false}
+              height={20}
+              role="img"
+              viewBox="0 0 20 20"
+              width={20}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
+              />
+            </svg>
+          </button>
         </span>
-      </span>
-      <button
-        aria-describedby="woocommerce-tag__label-1"
-        aria-label="Remove Clementine"
-        className="components-button woocommerce-tag__remove"
-        onClick={[Function]}
-        type="button"
-      >
-        <svg
-          aria-hidden={true}
-          className="dashicon dashicons-dismiss"
-          focusable={false}
-          height={20}
-          role="img"
-          viewBox="0 0 20 20"
-          width={20}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
-          />
-        </svg>
-      </button>
-    </span>
-    <span
-      className="woocommerce-tag has-remove"
-    >
-      <span
-        className="woocommerce-tag__text"
-        id="woocommerce-tag__label-2"
-      >
-        <span
-          className="screen-reader-text"
-        >
-          Guava
-        </span>
-        <span
-          aria-hidden="true"
-        >
-          Guava
-        </span>
-      </span>
-      <button
-        aria-describedby="woocommerce-tag__label-2"
-        aria-label="Remove Guava"
-        className="components-button woocommerce-tag__remove"
-        onClick={[Function]}
-        type="button"
-      >
-        <svg
-          aria-hidden={true}
-          className="dashicon dashicons-dismiss"
-          focusable={false}
-          height={20}
-          role="img"
-          viewBox="0 0 20 20"
-          width={20}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm5 11l-3-3 3-3-2-2-3 3-3-3-2 2 3 3-3 3 2 2 3-3 3 3z"
-          />
-        </svg>
-      </button>
-    </span>
+      </li>
+    </ul>
   </div>
   <div
     className="woocommerce-search-list__search"