From 5724aed4cbdb86669433f03e13c44246eee0281e Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Wed, 13 Feb 2019 20:31:11 +0000
Subject: [PATCH 1/8] IE11: Fix grid layout for advanced filters line items

---
 .../components/src/filters/advanced/date-filter.js |  2 +-
 .../components/src/filters/advanced/index.js       |  6 +++++-
 .../src/filters/advanced/number-filter.js          |  2 +-
 .../src/filters/advanced/search-filter.js          |  2 +-
 .../src/filters/advanced/select-filter.js          |  2 +-
 .../components/src/filters/advanced/style.scss     | 14 +++++++++-----
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
index 98faedce7f7..264667bdc9d 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
@@ -215,7 +215,7 @@ class DateFilter extends Component {
 		} );
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
-			<fieldset tabIndex="0">
+			<fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
 				<legend className="screen-reader-text">{ labels.add || '' }</legend>
 				<div
 					className={ classnames( 'woocommerce-filters-advanced__fieldset', {
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
index 3893040d0a0..ae06d4e8ae1 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
@@ -9,6 +9,7 @@ import { partial, findIndex, difference, isEqual } from 'lodash';
 import PropTypes from 'prop-types';
 import Gridicon from 'gridicons';
 import interpolateComponents from 'interpolate-components';
+import classnames from 'classnames';
 
 /**
  * WooCommerce dependencies
@@ -234,7 +235,10 @@ class AdvancedFilters extends Component {
 									/>
 								) }
 								<IconButton
-									className="woocommerce-filters-advanced__remove"
+									className={ classnames(
+										'woocommerce-filters-advanced__line-item',
+										'woocommerce-filters-advanced__remove'
+									) }
 									label={ labels.remove }
 									onClick={ partial( this.removeFilter, key ) }
 									icon={ <Gridicon icon="cross-small" /> }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
index c16b98f4dd4..632abfad5ab 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
@@ -217,7 +217,7 @@ class NumberFilter extends Component {
 
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
-			<fieldset tabIndex="0">
+			<fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
 				<legend className="screen-reader-text">
 					{ labels.add || '' }
 				</legend>
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
index 92189a5b006..d1844a505f3 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
@@ -106,7 +106,7 @@ class SearchFilter extends Component {
 
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
-			<fieldset tabIndex="0">
+			<fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
 				<legend className="screen-reader-text">
 					{ labels.add || '' }
 				</legend>
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
index b967e6daf97..386eae3f7a2 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
@@ -98,7 +98,7 @@ class SelectFilter extends Component {
 
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
-			<fieldset tabIndex="0">
+			<fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
 				<legend className="screen-reader-text">
 					{ labels.add || '' }
 				</legend>
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
index a373997aaee..f729c0b03c0 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
@@ -45,18 +45,22 @@
 	padding: 0 $gap 0 0;
 	margin: 0;
 	display: grid;
-	grid-template-columns: auto 40px;
+	grid-template-columns: 1fr 40px;
 	background-color: $core-grey-light-100;
 	border-bottom: 1px solid $core-grey-light-700;
 
-	fieldset {
-		padding: $gap-smaller $gap-smaller $gap-smaller $gap;
-	}
-
 	&:hover {
 		background-color: $core-grey-light-200;
 	}
 
+	.woocommerce-filters-advanced__line-item {
+		@include set-grid-item-position( 2, 2 );
+	}
+
+	fieldset {
+		padding: $gap-smaller $gap-smaller $gap-smaller $gap;
+	}
+
 	.woocommerce-filters-advanced__remove {
 		width: 40px;
 		height: 38px;

From 3495ec74ddb7020485c4c85c64daa210b6f84317 Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Wed, 13 Feb 2019 23:56:50 +0000
Subject: [PATCH 2/8] IE11: Add custom CSS class to advanced filters controls

---
 .../packages/components/src/filters/advanced/date-filter.js | 6 +++---
 .../packages/components/src/filters/advanced/index.js       | 5 +++++
 .../components/src/filters/advanced/number-filter.js        | 6 +++---
 .../components/src/filters/advanced/search-filter.js        | 6 +++---
 .../components/src/filters/advanced/select-filter.js        | 6 +++---
 .../packages/components/src/filters/advanced/style.scss     | 6 +++++-
 6 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
index 264667bdc9d..8eabffc6145 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
@@ -186,7 +186,7 @@ class DateFilter extends Component {
 	}
 
 	render() {
-		const { config, filter, isEnglish } = this.props;
+		const { className, config, filter, isEnglish } = this.props;
 		const { rule } = filter;
 		const { labels, rules } = config;
 		const screenReaderText = this.getScreenReaderText( filter, config );
@@ -195,7 +195,7 @@ class DateFilter extends Component {
 			components: {
 				rule: (
 					<SelectControl
-						className="woocommerce-filters-advanced__rule"
+						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
 						options={ rules }
 						value={ rule }
 						onChange={ this.onRuleChange }
@@ -204,7 +204,7 @@ class DateFilter extends Component {
 				),
 				filter: (
 					<div
-						className={ classnames( 'woocommerce-filters-advanced__input-range', {
+						className={ classnames( className, 'woocommerce-filters-advanced__input-range', {
 							'is-between': 'between' === rule,
 						} ) }
 					>
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
index ae06d4e8ae1..eec938c8e3f 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
@@ -191,6 +191,7 @@ class AdvancedFilters extends Component {
 							<li className="woocommerce-filters-advanced__list-item" key={ key }>
 								{ 'SelectControl' === input.component && (
 									<SelectFilter
+										className="woocommerce-filters-advanced__fieldset-item"
 										filter={ filter }
 										config={ config.filters[ key ] }
 										onFilterChange={ this.onFilterChange }
@@ -199,6 +200,7 @@ class AdvancedFilters extends Component {
 								) }
 								{ 'Search' === input.component && (
 									<SearchFilter
+										className="woocommerce-filters-advanced__fieldset-item"
 										filter={ filter }
 										config={ config.filters[ key ] }
 										onFilterChange={ this.onFilterChange }
@@ -208,6 +210,7 @@ class AdvancedFilters extends Component {
 								) }
 								{ 'Number' === input.component && (
 									<NumberFilter
+										className="woocommerce-filters-advanced__fieldset-item"
 										filter={ filter }
 										config={ config.filters[ key ] }
 										onFilterChange={ this.onFilterChange }
@@ -217,6 +220,7 @@ class AdvancedFilters extends Component {
 								) }
 								{ 'Currency' === input.component && (
 									<NumberFilter
+										className="woocommerce-filters-advanced__fieldset-item"
 										filter={ filter }
 										config={ { ...config.filters[ key ], ...{ input: { type: 'currency', component: 'Currency' } } } }
 										onFilterChange={ this.onFilterChange }
@@ -226,6 +230,7 @@ class AdvancedFilters extends Component {
 								) }
 								{ 'Date' === input.component && (
 									<DateFilter
+										className="woocommerce-filters-advanced__fieldset-item"
 										filter={ filter }
 										config={ config.filters[ key ] }
 										onFilterChange={ this.onFilterChange }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
index 632abfad5ab..f696fa32872 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
@@ -185,7 +185,7 @@ class NumberFilter extends Component {
 	}
 
 	render() {
-		const { config, filter, onFilterChange, isEnglish } = this.props;
+		const { className, config, filter, onFilterChange, isEnglish } = this.props;
 		const { key, rule } = filter;
 		const { labels, rules } = config;
 
@@ -194,7 +194,7 @@ class NumberFilter extends Component {
 			components: {
 				rule: (
 					<SelectControl
-						className="woocommerce-filters-advanced__rule"
+						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
 						options={ rules }
 						value={ rule }
 						onChange={ partial( onFilterChange, key, 'rule' ) }
@@ -203,7 +203,7 @@ class NumberFilter extends Component {
 				),
 				filter: (
 					<div
-						className={ classnames( 'woocommerce-filters-advanced__input-range', {
+						className={ classnames( className, 'woocommerce-filters-advanced__input-range', {
 							'is-between': 'between' === rule,
 						} ) }
 					>
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
index d1844a505f3..48fc8df3753 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
@@ -72,7 +72,7 @@ class SearchFilter extends Component {
 	}
 
 	render() {
-		const { config, filter, onFilterChange, isEnglish } = this.props;
+		const { className, config, filter, onFilterChange, isEnglish } = this.props;
 		const { selected } = this.state;
 		const { key, rule } = filter;
 		const { input, labels, rules } = config;
@@ -81,7 +81,7 @@ class SearchFilter extends Component {
 			components: {
 				rule: (
 					<SelectControl
-						className="woocommerce-filters-advanced__rule"
+						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
 						options={ rules }
 						value={ rule }
 						onChange={ partial( onFilterChange, key, 'rule' ) }
@@ -90,7 +90,7 @@ class SearchFilter extends Component {
 				),
 				filter: (
 					<Search
-						className="woocommerce-filters-advanced__input"
+						className={ classnames( className, 'woocommerce-filters-advanced__input' ) }
 						onChange={ this.onSearchChange }
 						type={ input.type }
 						placeholder={ labels.placeholder }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
index 386eae3f7a2..3115f7d7a18 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
@@ -64,7 +64,7 @@ class SelectFilter extends Component {
 	}
 
 	render() {
-		const { config, filter, onFilterChange, isEnglish } = this.props;
+		const { className, config, filter, onFilterChange, isEnglish } = this.props;
 		const { options } = this.state;
 		const { key, rule, value } = filter;
 		const { labels, rules } = config;
@@ -73,7 +73,7 @@ class SelectFilter extends Component {
 			components: {
 				rule: (
 					<SelectControl
-						className="woocommerce-filters-advanced__rule"
+						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
 						options={ rules }
 						value={ rule }
 						onChange={ partial( onFilterChange, key, 'rule' ) }
@@ -82,7 +82,7 @@ class SelectFilter extends Component {
 				),
 				filter: options ? (
 					<SelectControl
-						className="woocommerce-filters-advanced__input"
+						className={ classnames( className, 'woocommerce-filters-advanced__input' ) }
 						options={ options }
 						value={ value }
 						onChange={ partial( onFilterChange, filter.key, 'value' ) }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
index f729c0b03c0..aa0580b6e51 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
@@ -129,7 +129,11 @@
 
 	&.is-english {
 		display: grid;
-		grid-template-columns: 100px 150px auto;
+		grid-template-columns: 100px 150px 1fr;
+
+		.woocommerce-filters-advanced__fieldset-item {
+			@include set-grid-item-position( 3, 3 );
+		}
 
 		@include breakpoint( '<782px' ) {
 			display: block;

From 9d8ed29ea348d08c36a0695c715ba862ea0144bd Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Thu, 14 Feb 2019 01:35:47 +0000
Subject: [PATCH 3/8] IE11: Move placeholders from config files to components
 and add span around title

---
 .../analytics/report/customers/config.js       | 18 +++++++++---------
 .../analytics/report/downloads/config.js       |  8 ++++----
 .../client/analytics/report/orders/config.js   |  8 ++++----
 .../src/filters/advanced/date-filter.js        |  8 ++++++--
 .../src/filters/advanced/number-filter.js      |  6 +++++-
 .../src/filters/advanced/search-filter.js      |  7 ++++++-
 .../src/filters/advanced/select-filter.js      |  7 ++++++-
 7 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/plugins/woocommerce-admin/client/analytics/report/customers/config.js b/plugins/woocommerce-admin/client/analytics/report/customers/config.js
index fe8bdc82b42..a6b2eaa70fb 100644
--- a/plugins/woocommerce-admin/client/analytics/report/customers/config.js
+++ b/plugins/woocommerce-admin/client/analytics/report/customers/config.js
@@ -39,7 +39,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer name filter', 'wc-admin' ),
 				rule: __( 'Select a customer name filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Name {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Name', 'wc-admin' ),
 				filter: __( 'Select customer name', 'wc-admin' ),
 			},
 			rules: [
@@ -70,7 +70,7 @@ export const advancedFilters = {
 				remove: __( 'Remove country filter', 'wc-admin' ),
 				rule: __( 'Select a country filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Country {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Country', 'wc-admin' ),
 				filter: __( 'Select country', 'wc-admin' ),
 			},
 			rules: [
@@ -111,7 +111,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer username filter', 'wc-admin' ),
 				rule: __( 'Select a customer username filter match', 'wc-admin' ),
 				/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Username {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Username', 'wc-admin' ),
 				filter: __( 'Select customer username', 'wc-admin' ),
 			},
 			rules: [
@@ -139,7 +139,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer email filter', 'wc-admin' ),
 				rule: __( 'Select a customer email filter match', 'wc-admin' ),
 				/* translators: A sentence describing a customer email filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Email {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Email', 'wc-admin' ),
 				filter: __( 'Select customer email', 'wc-admin' ),
 			},
 			rules: [
@@ -168,7 +168,7 @@ export const advancedFilters = {
 				add: __( 'No. of Orders', 'wc-admin' ),
 				remove: __( 'Remove order  filter', 'wc-admin' ),
 				rule: __( 'Select an order count filter match', 'wc-admin' ),
-				title: __( 'No. of Orders {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'No. of Orders', 'wc-admin' ),
 			},
 			rules: [
 				{
@@ -196,7 +196,7 @@ export const advancedFilters = {
 				add: __( 'Total Spend', 'wc-admin' ),
 				remove: __( 'Remove total spend filter', 'wc-admin' ),
 				rule: __( 'Select a total spend filter match', 'wc-admin' ),
-				title: __( 'Total Spend {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Total Spend', 'wc-admin' ),
 			},
 			rules: [
 				{
@@ -224,7 +224,7 @@ export const advancedFilters = {
 				add: __( 'AOV', 'wc-admin' ),
 				remove: __( 'Remove average older value filter', 'wc-admin' ),
 				rule: __( 'Select an average order value filter match', 'wc-admin' ),
-				title: __( 'AOV {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'AOV', 'wc-admin' ),
 			},
 			rules: [
 				{
@@ -254,7 +254,7 @@ export const advancedFilters = {
 				remove: __( 'Remove registered filter', 'wc-admin' ),
 				rule: __( 'Select a registered filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Registered {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Registered', 'wc-admin' ),
 				filter: __( 'Select registered date', 'wc-admin' ),
 			},
 			rules: [
@@ -284,7 +284,7 @@ export const advancedFilters = {
 				remove: __( 'Remove last active filter', 'wc-admin' ),
 				rule: __( 'Select a last active filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Last active {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Last active', 'wc-admin' ),
 				filter: __( 'Select registered date', 'wc-admin' ),
 			},
 			rules: [
diff --git a/plugins/woocommerce-admin/client/analytics/report/downloads/config.js b/plugins/woocommerce-admin/client/analytics/report/downloads/config.js
index 1ff8b49a39a..7ffdc54bd04 100644
--- a/plugins/woocommerce-admin/client/analytics/report/downloads/config.js
+++ b/plugins/woocommerce-admin/client/analytics/report/downloads/config.js
@@ -45,7 +45,7 @@ export const advancedFilters = {
 				remove: __( 'Remove product filter', 'wc-admin' ),
 				rule: __( 'Select a product filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'Product {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Product', 'wc-admin' ),
 				filter: __( 'Select product', 'wc-admin' ),
 			},
 			rules: [
@@ -73,7 +73,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer username filter', 'wc-admin' ),
 				rule: __( 'Select a customer username filter match', 'wc-admin' ),
 				/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'Username {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Username', 'wc-admin' ),
 				filter: __( 'Select customer username', 'wc-admin' ),
 			},
 			rules: [
@@ -101,7 +101,7 @@ export const advancedFilters = {
 				remove: __( 'Remove order number filter', 'wc-admin' ),
 				rule: __( 'Select a order number filter match', 'wc-admin' ),
 				/* translators: A sentence describing a order number filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'Order number {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Order number', 'wc-admin' ),
 				filter: __( 'Select order number', 'wc-admin' ),
 			},
 			rules: [
@@ -135,7 +135,7 @@ export const advancedFilters = {
 				remove: __( 'Remove IP address filter', 'wc-admin' ),
 				rule: __( 'Select an IP address filter match', 'wc-admin' ),
 				/* translators: A sentence describing a order number filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'IP Address {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'IP Address', 'wc-admin' ),
 				filter: __( 'Select IP address', 'wc-admin' ),
 			},
 			rules: [
diff --git a/plugins/woocommerce-admin/client/analytics/report/orders/config.js b/plugins/woocommerce-admin/client/analytics/report/orders/config.js
index 5712c0b4cb7..75a03663d46 100644
--- a/plugins/woocommerce-admin/client/analytics/report/orders/config.js
+++ b/plugins/woocommerce-admin/client/analytics/report/orders/config.js
@@ -61,7 +61,7 @@ export const advancedFilters = {
 				remove: __( 'Remove order status filter', 'wc-admin' ),
 				rule: __( 'Select an order status filter match', 'wc-admin' ),
 				/* translators: A sentence describing an Order Status filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Order Status {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Order Status', 'wc-admin' ),
 				filter: __( 'Select an order status', 'wc-admin' ),
 			},
 			rules: [
@@ -91,7 +91,7 @@ export const advancedFilters = {
 				remove: __( 'Remove products filter', 'wc-admin' ),
 				rule: __( 'Select a product filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Product {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Product', 'wc-admin' ),
 				filter: __( 'Select products', 'wc-admin' ),
 			},
 			rules: [
@@ -119,7 +119,7 @@ export const advancedFilters = {
 				remove: __( 'Remove coupon filter', 'wc-admin' ),
 				rule: __( 'Select a coupon filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Coupon filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Coupon Code {{rule /}} {{filter /}}', 'wc-admin' ),
+				title: __( 'Coupon Code', 'wc-admin' ),
 				filter: __( 'Select coupon codes', 'wc-admin' ),
 			},
 			rules: [
@@ -146,7 +146,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer filter', 'wc-admin' ),
 				rule: __( 'Select a customer filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Customer filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Customer is {{filter /}}', 'wc-admin' ),
+				title: __( 'Customer is', 'wc-admin' ),
 				filter: __( 'Select a customer type', 'wc-admin' ),
 			},
 			input: {
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
index 8eabffc6145..34b0598bbec 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
@@ -7,7 +7,7 @@ import interpolateComponents from 'interpolate-components';
 import { SelectControl } from '@wordpress/components';
 import { find, partial } from 'lodash';
 import classnames from 'classnames';
-import { __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x } from '@wordpress/i18n';
 
 /**
  * WooCommerce dependencies
@@ -191,8 +191,12 @@ class DateFilter extends Component {
 		const { labels, rules } = config;
 		const screenReaderText = this.getScreenReaderText( filter, config );
 		const children = interpolateComponents( {
-			mixedString: labels.title,
+			mixedString: sprintf(
+				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
+				labels.title
+			),
 			components: {
+				title: <span className={ className } />,
 				rule: (
 					<SelectControl
 						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
index f696fa32872..0cf98e8e61a 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
@@ -190,8 +190,12 @@ class NumberFilter extends Component {
 		const { labels, rules } = config;
 
 		const children = interpolateComponents( {
-			mixedString: labels.title,
+			mixedString: sprintf(
+				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
+				labels.title
+			),
 			components: {
+				title: <span className={ className } />,
 				rule: (
 					<SelectControl
 						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
index 48fc8df3753..4adee1a8741 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
@@ -8,6 +8,7 @@ import { find, isEqual, partial } from 'lodash';
 import PropTypes from 'prop-types';
 import interpolateComponents from 'interpolate-components';
 import classnames from 'classnames';
+import { sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -77,8 +78,12 @@ class SearchFilter extends Component {
 		const { key, rule } = filter;
 		const { input, labels, rules } = config;
 		const children = interpolateComponents( {
-			mixedString: labels.title,
+			mixedString: sprintf(
+				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
+				labels.title
+			),
 			components: {
+				title: <span className={ className } />,
 				rule: (
 					<SelectControl
 						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
index 3115f7d7a18..461b2186778 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
@@ -8,6 +8,7 @@ import { find, partial } from 'lodash';
 import PropTypes from 'prop-types';
 import interpolateComponents from 'interpolate-components';
 import classnames from 'classnames';
+import { sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -69,8 +70,12 @@ class SelectFilter extends Component {
 		const { key, rule, value } = filter;
 		const { labels, rules } = config;
 		const children = interpolateComponents( {
-			mixedString: labels.title,
+			mixedString: sprintf(
+				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
+				labels.title
+			),
 			components: {
+				title: <span className={ className } />,
 				rule: (
 					<SelectControl
 						className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }

From 2b12f2cebac6a6c90b4ed42aa78a977d0fcad53f Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Thu, 14 Feb 2019 01:38:23 +0000
Subject: [PATCH 4/8] IE11: Vertically center advanced filters title span

---
 .../packages/components/src/filters/advanced/style.scss      | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
index aa0580b6e51..2bd037813df 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss
@@ -133,6 +133,11 @@
 
 		.woocommerce-filters-advanced__fieldset-item {
 			@include set-grid-item-position( 3, 3 );
+
+			&:nth-child(1) {
+				display: flex;
+				align-items: center;
+			}
 		}
 
 		@include breakpoint( '<782px' ) {

From e6c811ae219ccf38b5f4f0cb5ae29e3e7463e36b Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Thu, 14 Feb 2019 19:27:13 +0000
Subject: [PATCH 5/8] Conditionally include `{{rule /}}` in select-filter
 `mixedString`

---
 .../packages/components/src/filters/advanced/select-filter.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
index 461b2186778..b7d30dfcf56 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
@@ -71,7 +71,7 @@ class SelectFilter extends Component {
 		const { labels, rules } = config;
 		const children = interpolateComponents( {
 			mixedString: sprintf(
-				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
+				'{{title}}%s{{/title}}' + ( rules ? ' {{rule /}}' : '' ) + ' {{filter /}}',
 				labels.title
 			),
 			components: {

From 816e122408351cc466fa67da6c5d9a61af7fdef8 Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Thu, 14 Feb 2019 19:57:27 +0000
Subject: [PATCH 6/8] Revert "Conditionally include `{{rule /}}` in
 select-filter `mixedString`"

This reverts commit e6c811ae219ccf38b5f4f0cb5ae29e3e7463e36b.
---
 .../packages/components/src/filters/advanced/select-filter.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
index b7d30dfcf56..461b2186778 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
@@ -71,7 +71,7 @@ class SelectFilter extends Component {
 		const { labels, rules } = config;
 		const children = interpolateComponents( {
 			mixedString: sprintf(
-				'{{title}}%s{{/title}}' + ( rules ? ' {{rule /}}' : '' ) + ' {{filter /}}',
+				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
 				labels.title
 			),
 			components: {

From db2ed027c48418beb3d326fb4c6b32e4f5756c23 Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Thu, 14 Feb 2019 20:53:08 +0000
Subject: [PATCH 7/8] Add strings back to config.js files with title
 placeholders

---
 .../analytics/report/customers/config.js       | 18 +++++++++---------
 .../analytics/report/downloads/config.js       |  8 ++++----
 .../client/analytics/report/orders/config.js   |  8 ++++----
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/plugins/woocommerce-admin/client/analytics/report/customers/config.js b/plugins/woocommerce-admin/client/analytics/report/customers/config.js
index a6b2eaa70fb..a4afdff0d8a 100644
--- a/plugins/woocommerce-admin/client/analytics/report/customers/config.js
+++ b/plugins/woocommerce-admin/client/analytics/report/customers/config.js
@@ -39,7 +39,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer name filter', 'wc-admin' ),
 				rule: __( 'Select a customer name filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Name', 'wc-admin' ),
+				title: __( '{{title}}Name{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select customer name', 'wc-admin' ),
 			},
 			rules: [
@@ -70,7 +70,7 @@ export const advancedFilters = {
 				remove: __( 'Remove country filter', 'wc-admin' ),
 				rule: __( 'Select a country filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Country', 'wc-admin' ),
+				title: __( '{{title}}Country{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select country', 'wc-admin' ),
 			},
 			rules: [
@@ -111,7 +111,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer username filter', 'wc-admin' ),
 				rule: __( 'Select a customer username filter match', 'wc-admin' ),
 				/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Username', 'wc-admin' ),
+				title: __( '{{title}}Username{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select customer username', 'wc-admin' ),
 			},
 			rules: [
@@ -139,7 +139,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer email filter', 'wc-admin' ),
 				rule: __( 'Select a customer email filter match', 'wc-admin' ),
 				/* translators: A sentence describing a customer email filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Email', 'wc-admin' ),
+				title: __( '{{title}}Email{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select customer email', 'wc-admin' ),
 			},
 			rules: [
@@ -168,7 +168,7 @@ export const advancedFilters = {
 				add: __( 'No. of Orders', 'wc-admin' ),
 				remove: __( 'Remove order  filter', 'wc-admin' ),
 				rule: __( 'Select an order count filter match', 'wc-admin' ),
-				title: __( 'No. of Orders', 'wc-admin' ),
+				title: __( '{{title}}No. of Orders{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 			},
 			rules: [
 				{
@@ -196,7 +196,7 @@ export const advancedFilters = {
 				add: __( 'Total Spend', 'wc-admin' ),
 				remove: __( 'Remove total spend filter', 'wc-admin' ),
 				rule: __( 'Select a total spend filter match', 'wc-admin' ),
-				title: __( 'Total Spend', 'wc-admin' ),
+				title: __( '{{title}}Total Spend{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 			},
 			rules: [
 				{
@@ -224,7 +224,7 @@ export const advancedFilters = {
 				add: __( 'AOV', 'wc-admin' ),
 				remove: __( 'Remove average older value filter', 'wc-admin' ),
 				rule: __( 'Select an average order value filter match', 'wc-admin' ),
-				title: __( 'AOV', 'wc-admin' ),
+				title: __( '{{title}}AOV{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 			},
 			rules: [
 				{
@@ -254,7 +254,7 @@ export const advancedFilters = {
 				remove: __( 'Remove registered filter', 'wc-admin' ),
 				rule: __( 'Select a registered filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Registered', 'wc-admin' ),
+				title: __( '{{title}}Registered{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select registered date', 'wc-admin' ),
 			},
 			rules: [
@@ -284,7 +284,7 @@ export const advancedFilters = {
 				remove: __( 'Remove last active filter', 'wc-admin' ),
 				rule: __( 'Select a last active filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
-				title: __( 'Last active', 'wc-admin' ),
+				title: __( '{{title}}Last active{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select registered date', 'wc-admin' ),
 			},
 			rules: [
diff --git a/plugins/woocommerce-admin/client/analytics/report/downloads/config.js b/plugins/woocommerce-admin/client/analytics/report/downloads/config.js
index 7ffdc54bd04..c510cf0aa65 100644
--- a/plugins/woocommerce-admin/client/analytics/report/downloads/config.js
+++ b/plugins/woocommerce-admin/client/analytics/report/downloads/config.js
@@ -45,7 +45,7 @@ export const advancedFilters = {
 				remove: __( 'Remove product filter', 'wc-admin' ),
 				rule: __( 'Select a product filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'Product', 'wc-admin' ),
+				title: __( '{{title}}Product{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select product', 'wc-admin' ),
 			},
 			rules: [
@@ -73,7 +73,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer username filter', 'wc-admin' ),
 				rule: __( 'Select a customer username filter match', 'wc-admin' ),
 				/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'Username', 'wc-admin' ),
+				title: __( '{{title}}Username{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select customer username', 'wc-admin' ),
 			},
 			rules: [
@@ -101,7 +101,7 @@ export const advancedFilters = {
 				remove: __( 'Remove order number filter', 'wc-admin' ),
 				rule: __( 'Select a order number filter match', 'wc-admin' ),
 				/* translators: A sentence describing a order number filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'Order number', 'wc-admin' ),
+				title: __( '{{title}}Order number{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select order number', 'wc-admin' ),
 			},
 			rules: [
@@ -135,7 +135,7 @@ export const advancedFilters = {
 				remove: __( 'Remove IP address filter', 'wc-admin' ),
 				rule: __( 'Select an IP address filter match', 'wc-admin' ),
 				/* translators: A sentence describing a order number filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
-				title: __( 'IP Address', 'wc-admin' ),
+				title: __( '{{title}}IP Address{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select IP address', 'wc-admin' ),
 			},
 			rules: [
diff --git a/plugins/woocommerce-admin/client/analytics/report/orders/config.js b/plugins/woocommerce-admin/client/analytics/report/orders/config.js
index 75a03663d46..a5ef938faf6 100644
--- a/plugins/woocommerce-admin/client/analytics/report/orders/config.js
+++ b/plugins/woocommerce-admin/client/analytics/report/orders/config.js
@@ -61,7 +61,7 @@ export const advancedFilters = {
 				remove: __( 'Remove order status filter', 'wc-admin' ),
 				rule: __( 'Select an order status filter match', 'wc-admin' ),
 				/* translators: A sentence describing an Order Status filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Order Status', 'wc-admin' ),
+				title: __( '{{title}}Order Status{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select an order status', 'wc-admin' ),
 			},
 			rules: [
@@ -91,7 +91,7 @@ export const advancedFilters = {
 				remove: __( 'Remove products filter', 'wc-admin' ),
 				rule: __( 'Select a product filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Product', 'wc-admin' ),
+				title: __( '{{title}}Product{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select products', 'wc-admin' ),
 			},
 			rules: [
@@ -119,7 +119,7 @@ export const advancedFilters = {
 				remove: __( 'Remove coupon filter', 'wc-admin' ),
 				rule: __( 'Select a coupon filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Coupon filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Coupon Code', 'wc-admin' ),
+				title: __( '{{title}}Coupon Code{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select coupon codes', 'wc-admin' ),
 			},
 			rules: [
@@ -146,7 +146,7 @@ export const advancedFilters = {
 				remove: __( 'Remove customer filter', 'wc-admin' ),
 				rule: __( 'Select a customer filter match', 'wc-admin' ),
 				/* translators: A sentence describing a Customer filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
-				title: __( 'Customer is', 'wc-admin' ),
+				title: __( '{{title}}Customer is{{/title}} {{filter /}}', 'wc-admin' ),
 				filter: __( 'Select a customer type', 'wc-admin' ),
 			},
 			input: {

From 40dd9b5f917bcc86291c08e0803157bc6595bd71 Mon Sep 17 00:00:00 2001
From: Tiago Noronha <hello@tiagonoronha.com>
Date: Thu, 14 Feb 2019 20:58:02 +0000
Subject: [PATCH 8/8] Remove placeholders from components

---
 .../components/src/filters/advanced/date-filter.js         | 7 ++-----
 .../components/src/filters/advanced/number-filter.js       | 5 +----
 .../components/src/filters/advanced/search-filter.js       | 6 +-----
 .../components/src/filters/advanced/select-filter.js       | 6 +-----
 4 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
index 34b0598bbec..35fd94c18d2 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
@@ -7,7 +7,7 @@ import interpolateComponents from 'interpolate-components';
 import { SelectControl } from '@wordpress/components';
 import { find, partial } from 'lodash';
 import classnames from 'classnames';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * WooCommerce dependencies
@@ -191,10 +191,7 @@ class DateFilter extends Component {
 		const { labels, rules } = config;
 		const screenReaderText = this.getScreenReaderText( filter, config );
 		const children = interpolateComponents( {
-			mixedString: sprintf(
-				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
-				labels.title
-			),
+			mixedString: labels.title,
 			components: {
 				title: <span className={ className } />,
 				rule: (
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
index 0cf98e8e61a..830e66cbfb3 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
@@ -190,10 +190,7 @@ class NumberFilter extends Component {
 		const { labels, rules } = config;
 
 		const children = interpolateComponents( {
-			mixedString: sprintf(
-				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
-				labels.title
-			),
+			mixedString: labels.title,
 			components: {
 				title: <span className={ className } />,
 				rule: (
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
index 4adee1a8741..88687f8e0f3 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
@@ -8,7 +8,6 @@ import { find, isEqual, partial } from 'lodash';
 import PropTypes from 'prop-types';
 import interpolateComponents from 'interpolate-components';
 import classnames from 'classnames';
-import { sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -78,10 +77,7 @@ class SearchFilter extends Component {
 		const { key, rule } = filter;
 		const { input, labels, rules } = config;
 		const children = interpolateComponents( {
-			mixedString: sprintf(
-				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
-				labels.title
-			),
+			mixedString: labels.title,
 			components: {
 				title: <span className={ className } />,
 				rule: (
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
index 461b2186778..d497f183e5a 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
@@ -8,7 +8,6 @@ import { find, partial } from 'lodash';
 import PropTypes from 'prop-types';
 import interpolateComponents from 'interpolate-components';
 import classnames from 'classnames';
-import { sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -70,10 +69,7 @@ class SelectFilter extends Component {
 		const { key, rule, value } = filter;
 		const { labels, rules } = config;
 		const children = interpolateComponents( {
-			mixedString: sprintf(
-				'{{title}}%s{{/title}} {{rule /}} {{filter /}}',
-				labels.title
-			),
+			mixedString: labels.title,
 			components: {
 				title: <span className={ className } />,
 				rule: (