Merge pull request woocommerce/woocommerce-admin#1223 from woocommerce/fix/search-css-tags

Fix/search css tags

plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss

@@ -107,11 +107,6 @@
 			display: block;
 		}
 	}
-
-	.woocommerce-tag {
-		margin-top: 1px;
-		margin-bottom: 1px;
-	}
 }
 
 .woocommerce-filters-advanced__rule {

plugins/woocommerce-admin/packages/components/src/search/index.js

@@ -158,7 +158,9 @@ class Search extends Component {
 		const shouldRenderTags = this.shouldRenderTags();
 
 		return (
-			<div className={ classnames( 'woocommerce-search', className ) }>
+			<div className={ classnames( 'woocommerce-search', className, {
+				'has-inline-tags': inlineTags,
+			} ) }>
 				<Gridicon className="woocommerce-search__icon" icon="search" size={ 18 } />
 				<Autocomplete
 					completer={ autocompleter }

plugins/woocommerce-admin/packages/components/src/search/style.scss

@@ -5,12 +5,26 @@
 
 	.woocommerce-search__icon {
 		position: absolute;
-		top: 50%;
+		top: 10px;
 		left: 10px;
 		fill: $core-grey-light-900;
+	}
+
+	.woocommerce-tag {
+		margin: 8px 6px 0 0;
+	}
+
+	&.has-inline-tags {
+		.woocommerce-search__icon {
+			top: 50%;
 			transform: translateY(-50%);
 		}
 
+		.woocommerce-tag {
+			margin: initial;
+		}
+	}
+
 	.woocommerce-search__inline-container {
 		width: 100%;
 		padding: 4px 2px 4px 36px;

plugins/woocommerce-admin/packages/components/src/tag/style.scss

@@ -2,7 +2,7 @@
 
 .woocommerce-tag {
 	display: inline-flex;
-	margin: 0 4px 0 0;
+	margin: 1px 4px 1px 0;
 	overflow: hidden;
 	vertical-align: middle;