Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

IE11: Fix grid layout for advanced filters line items

This commit is contained in:
Tiago Noronha 2019-02-13 20:31:11 +00:00
parent 847b59246d
commit 5724aed4cb
6 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js
View File

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

6
plugins/woocommerce-admin/packages/components/src/filters/advanced/index.js
View File

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

2
plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
View File

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

2
plugins/woocommerce-admin/packages/components/src/filters/advanced/search-filter.js
View File

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

2
plugins/woocommerce-admin/packages/components/src/filters/advanced/select-filter.js
View File

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

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

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