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