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

IE11: Add custom CSS class to advanced filters controls

This commit is contained in:
Tiago Noronha 2019-02-13 23:56:50 +00:00
parent 5724aed4cb
commit 3495ec74dd
6 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,
} ) }
>

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

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

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

@ -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,
} ) }
>

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

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

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

@ -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' ) }

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

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