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

Merge pull request woocommerce/woocommerce-admin#1533 from woocommerce/fix/1511-advanced-filters-ie11 

Advanced filters alignment in IE11
This commit is contained in:
Tiago Noronha 2019-02-14 21:23:29 +00:00 committed by GitHub
parent 86f3da4e9c 40dd9b5f91
commit 75ee8d600b
9 changed files with 66 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/woocommerce-admin/client/analytics/report/customers/config.js
View File

@ -39,7 +39,7 @@ export const advancedFilters = {
remove: __( 'Remove customer name filter', 'wc-admin' ), remove: __( 'Remove customer name filter', 'wc-admin' ),
rule: __( 'Select a customer name filter match', '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 */ /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __( 'Name {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Name{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select customer name', 'wc-admin' ), filter: __( 'Select customer name', 'wc-admin' ),
}, },
rules: [ rules: [
@ -70,7 +70,7 @@ export const advancedFilters = {
remove: __( 'Remove country filter', 'wc-admin' ), remove: __( 'Remove country filter', 'wc-admin' ),
rule: __( 'Select a country filter match', '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 */ /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __( 'Country {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Country{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select country', 'wc-admin' ), filter: __( 'Select country', 'wc-admin' ),
}, },
rules: [ rules: [
@ -111,7 +111,7 @@ export const advancedFilters = {
remove: __( 'Remove customer username filter', 'wc-admin' ), remove: __( 'Remove customer username filter', 'wc-admin' ),
rule: __( 'Select a customer username filter match', '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 */ /* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __( 'Username {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Username{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select customer username', 'wc-admin' ), filter: __( 'Select customer username', 'wc-admin' ),
}, },
rules: [ rules: [
@ -139,7 +139,7 @@ export const advancedFilters = {
remove: __( 'Remove customer email filter', 'wc-admin' ), remove: __( 'Remove customer email filter', 'wc-admin' ),
rule: __( 'Select a customer email filter match', '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 */ /* translators: A sentence describing a customer email filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __( 'Email {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Email{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select customer email', 'wc-admin' ), filter: __( 'Select customer email', 'wc-admin' ),
}, },
rules: [ rules: [
@ -168,7 +168,7 @@ export const advancedFilters = {
add: __( 'No. of Orders', 'wc-admin' ), add: __( 'No. of Orders', 'wc-admin' ),
remove: __( 'Remove order filter', 'wc-admin' ), remove: __( 'Remove order filter', 'wc-admin' ),
rule: __( 'Select an order count filter match', 'wc-admin' ), rule: __( 'Select an order count filter match', 'wc-admin' ),
title: __( 'No. of Orders {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}No. of Orders{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
}, },
rules: [ rules: [
{ {
@ -196,7 +196,7 @@ export const advancedFilters = {
add: __( 'Total Spend', 'wc-admin' ), add: __( 'Total Spend', 'wc-admin' ),
remove: __( 'Remove total spend filter', 'wc-admin' ), remove: __( 'Remove total spend filter', 'wc-admin' ),
rule: __( 'Select a total spend filter match', 'wc-admin' ), rule: __( 'Select a total spend filter match', 'wc-admin' ),
title: __( 'Total Spend {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Total Spend{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
}, },
rules: [ rules: [
{ {
@ -224,7 +224,7 @@ export const advancedFilters = {
add: __( 'AOV', 'wc-admin' ), add: __( 'AOV', 'wc-admin' ),
remove: __( 'Remove average older value filter', 'wc-admin' ), remove: __( 'Remove average older value filter', 'wc-admin' ),
rule: __( 'Select an average order value filter match', 'wc-admin' ), rule: __( 'Select an average order value filter match', 'wc-admin' ),
title: __( 'AOV {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}AOV{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
}, },
rules: [ rules: [
{ {
@ -254,7 +254,7 @@ export const advancedFilters = {
remove: __( 'Remove registered filter', 'wc-admin' ), remove: __( 'Remove registered filter', 'wc-admin' ),
rule: __( 'Select a registered filter match', '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 */ /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __( 'Registered {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Registered{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select registered date', 'wc-admin' ), filter: __( 'Select registered date', 'wc-admin' ),
}, },
rules: [ rules: [
@ -284,7 +284,7 @@ export const advancedFilters = {
remove: __( 'Remove last active filter', 'wc-admin' ), remove: __( 'Remove last active filter', 'wc-admin' ),
rule: __( 'Select a last active filter match', '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 */ /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __( 'Last active {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Last active{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select registered date', 'wc-admin' ), filter: __( 'Select registered date', 'wc-admin' ),
}, },
rules: [ rules: [

8
plugins/woocommerce-admin/client/analytics/report/downloads/config.js
View File

@ -45,7 +45,7 @@ export const advancedFilters = {
remove: __( 'Remove product filter', 'wc-admin' ), remove: __( 'Remove product filter', 'wc-admin' ),
rule: __( 'Select a product filter match', '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 */ /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
title: __( 'Product {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Product{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select product', 'wc-admin' ), filter: __( 'Select product', 'wc-admin' ),
}, },
rules: [ rules: [
@ -73,7 +73,7 @@ export const advancedFilters = {
remove: __( 'Remove customer username filter', 'wc-admin' ), remove: __( 'Remove customer username filter', 'wc-admin' ),
rule: __( 'Select a customer username filter match', '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 */ /* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
title: __( 'Username {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Username{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select customer username', 'wc-admin' ), filter: __( 'Select customer username', 'wc-admin' ),
}, },
rules: [ rules: [
@ -101,7 +101,7 @@ export const advancedFilters = {
remove: __( 'Remove order number filter', 'wc-admin' ), remove: __( 'Remove order number filter', 'wc-admin' ),
rule: __( 'Select a order number filter match', '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 */ /* 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: __( '{{title}}Order number{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select order number', 'wc-admin' ), filter: __( 'Select order number', 'wc-admin' ),
}, },
rules: [ rules: [
@ -135,7 +135,7 @@ export const advancedFilters = {
remove: __( 'Remove IP address filter', 'wc-admin' ), remove: __( 'Remove IP address filter', 'wc-admin' ),
rule: __( 'Select an IP address filter match', '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 */ /* 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: __( '{{title}}IP Address{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select IP address', 'wc-admin' ), filter: __( 'Select IP address', 'wc-admin' ),
}, },
rules: [ rules: [

8
plugins/woocommerce-admin/client/analytics/report/orders/config.js
View File

@ -61,7 +61,7 @@ export const advancedFilters = {
remove: __( 'Remove order status filter', 'wc-admin' ), remove: __( 'Remove order status filter', 'wc-admin' ),
rule: __( 'Select an order status filter match', '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 */ /* 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: __( '{{title}}Order Status{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select an order status', 'wc-admin' ), filter: __( 'Select an order status', 'wc-admin' ),
}, },
rules: [ rules: [
@ -91,7 +91,7 @@ export const advancedFilters = {
remove: __( 'Remove products filter', 'wc-admin' ), remove: __( 'Remove products filter', 'wc-admin' ),
rule: __( 'Select a product filter match', '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 */ /* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __( 'Product {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Product{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select products', 'wc-admin' ), filter: __( 'Select products', 'wc-admin' ),
}, },
rules: [ rules: [
@ -119,7 +119,7 @@ export const advancedFilters = {
remove: __( 'Remove coupon filter', 'wc-admin' ), remove: __( 'Remove coupon filter', 'wc-admin' ),
rule: __( 'Select a coupon filter match', '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 */ /* translators: A sentence describing a Coupon filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __( 'Coupon Code {{rule /}} {{filter /}}', 'wc-admin' ), title: __( '{{title}}Coupon Code{{/title}} {{rule /}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select coupon codes', 'wc-admin' ), filter: __( 'Select coupon codes', 'wc-admin' ),
}, },
rules: [ rules: [
@ -146,7 +146,7 @@ export const advancedFilters = {
remove: __( 'Remove customer filter', 'wc-admin' ), remove: __( 'Remove customer filter', 'wc-admin' ),
rule: __( 'Select a customer filter match', '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 */ /* translators: A sentence describing a Customer filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __( 'Customer is {{filter /}}', 'wc-admin' ), title: __( '{{title}}Customer is{{/title}} {{filter /}}', 'wc-admin' ),
filter: __( 'Select a customer type', 'wc-admin' ), filter: __( 'Select a customer type', 'wc-admin' ),
}, },
input: { input: {

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

@ -186,16 +186,17 @@ class DateFilter extends Component {
} }
render() { render() {
const { config, filter, isEnglish } = this.props; const { className, config, filter, isEnglish } = this.props;
const { rule } = filter; const { rule } = filter;
const { labels, rules } = config; const { labels, rules } = config;
const screenReaderText = this.getScreenReaderText( filter, config ); const screenReaderText = this.getScreenReaderText( filter, config );
const children = interpolateComponents( { const children = interpolateComponents( {
mixedString: labels.title, mixedString: labels.title,
components: { components: {
title: <span className={ className } />,
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ this.onRuleChange } onChange={ this.onRuleChange }
@ -204,7 +205,7 @@ class DateFilter extends Component {
), ),
filter: ( filter: (
<div <div
className={ classnames( 'woocommerce-filters-advanced__input-range', { className={ classnames( className, 'woocommerce-filters-advanced__input-range', {
'is-between': 'between' === rule, 'is-between': 'between' === rule,
} ) } } ) }
> >
@ -215,7 +216,7 @@ class DateFilter extends Component {
} ); } );
/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/ /*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
return ( return (
<fieldset tabIndex="0"> <fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
<legend className="screen-reader-text">{ labels.add || '' }</legend> <legend className="screen-reader-text">{ labels.add || '' }</legend>
<div <div
className={ classnames( 'woocommerce-filters-advanced__fieldset', { className={ classnames( 'woocommerce-filters-advanced__fieldset', {

11
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 PropTypes from 'prop-types';
import Gridicon from 'gridicons'; import Gridicon from 'gridicons';
import interpolateComponents from 'interpolate-components'; import interpolateComponents from 'interpolate-components';
import classnames from 'classnames';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
@ -190,6 +191,7 @@ class AdvancedFilters extends Component {
<li className="woocommerce-filters-advanced__list-item" key={ key }> <li className="woocommerce-filters-advanced__list-item" key={ key }>
{ 'SelectControl' === input.component && ( { 'SelectControl' === input.component && (
<SelectFilter <SelectFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -198,6 +200,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Search' === input.component && ( { 'Search' === input.component && (
<SearchFilter <SearchFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -207,6 +210,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Number' === input.component && ( { 'Number' === input.component && (
<NumberFilter <NumberFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -216,6 +220,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Currency' === input.component && ( { 'Currency' === input.component && (
<NumberFilter <NumberFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ { ...config.filters[ key ], ...{ input: { type: 'currency', component: 'Currency' } } } } config={ { ...config.filters[ key ], ...{ input: { type: 'currency', component: 'Currency' } } } }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -225,6 +230,7 @@ class AdvancedFilters extends Component {
) } ) }
{ 'Date' === input.component && ( { 'Date' === input.component && (
<DateFilter <DateFilter
className="woocommerce-filters-advanced__fieldset-item"
filter={ filter } filter={ filter }
config={ config.filters[ key ] } config={ config.filters[ key ] }
onFilterChange={ this.onFilterChange } onFilterChange={ this.onFilterChange }
@ -234,7 +240,10 @@ class AdvancedFilters extends Component {
/> />
) } ) }
<IconButton <IconButton
className="woocommerce-filters-advanced__remove" className={ classnames(
'woocommerce-filters-advanced__line-item',
'woocommerce-filters-advanced__remove'
) }
label={ labels.remove } label={ labels.remove }
onClick={ partial( this.removeFilter, key ) } onClick={ partial( this.removeFilter, key ) }
icon={ <Gridicon icon="cross-small" /> } icon={ <Gridicon icon="cross-small" /> }

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

@ -185,16 +185,17 @@ class NumberFilter extends Component {
} }
render() { render() {
const { config, filter, onFilterChange, isEnglish } = this.props; const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { key, rule } = filter; const { key, rule } = filter;
const { labels, rules } = config; const { labels, rules } = config;
const children = interpolateComponents( { const children = interpolateComponents( {
mixedString: labels.title, mixedString: labels.title,
components: { components: {
title: <span className={ className } />,
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ partial( onFilterChange, key, 'rule' ) } onChange={ partial( onFilterChange, key, 'rule' ) }
@ -203,7 +204,7 @@ class NumberFilter extends Component {
), ),
filter: ( filter: (
<div <div
className={ classnames( 'woocommerce-filters-advanced__input-range', { className={ classnames( className, 'woocommerce-filters-advanced__input-range', {
'is-between': 'between' === rule, 'is-between': 'between' === rule,
} ) } } ) }
> >
@ -217,7 +218,7 @@ class NumberFilter extends Component {
/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/ /*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
return ( return (
<fieldset tabIndex="0"> <fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
<legend className="screen-reader-text"> <legend className="screen-reader-text">
{ labels.add || '' } { labels.add || '' }
</legend> </legend>

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

@ -77,16 +77,17 @@ class SearchFilter extends Component {
} }
render() { render() {
const { config, filter, onFilterChange, isEnglish } = this.props; const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { selected } = this.state; const { selected } = this.state;
const { key, rule } = filter; const { key, rule } = filter;
const { input, labels, rules } = config; const { input, labels, rules } = config;
const children = interpolateComponents( { const children = interpolateComponents( {
mixedString: labels.title, mixedString: labels.title,
components: { components: {
title: <span className={ className } />,
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ partial( onFilterChange, key, 'rule' ) } onChange={ partial( onFilterChange, key, 'rule' ) }
@ -95,7 +96,7 @@ class SearchFilter extends Component {
), ),
filter: ( filter: (
<Search <Search
className="woocommerce-filters-advanced__input" className={ classnames( className, 'woocommerce-filters-advanced__input' ) }
onChange={ this.onSearchChange } onChange={ this.onSearchChange }
type={ input.type } type={ input.type }
placeholder={ labels.placeholder } placeholder={ labels.placeholder }
@ -111,7 +112,7 @@ class SearchFilter extends Component {
/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/ /*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
return ( return (
<fieldset tabIndex="0"> <fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
<legend className="screen-reader-text"> <legend className="screen-reader-text">
{ labels.add || '' } { labels.add || '' }
</legend> </legend>

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

@ -64,16 +64,17 @@ class SelectFilter extends Component {
} }
render() { render() {
const { config, filter, onFilterChange, isEnglish } = this.props; const { className, config, filter, onFilterChange, isEnglish } = this.props;
const { options } = this.state; const { options } = this.state;
const { key, rule, value } = filter; const { key, rule, value } = filter;
const { labels, rules } = config; const { labels, rules } = config;
const children = interpolateComponents( { const children = interpolateComponents( {
mixedString: labels.title, mixedString: labels.title,
components: { components: {
title: <span className={ className } />,
rule: ( rule: (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__rule" className={ classnames( className, 'woocommerce-filters-advanced__rule' ) }
options={ rules } options={ rules }
value={ rule } value={ rule }
onChange={ partial( onFilterChange, key, 'rule' ) } onChange={ partial( onFilterChange, key, 'rule' ) }
@ -82,7 +83,7 @@ class SelectFilter extends Component {
), ),
filter: options ? ( filter: options ? (
<SelectControl <SelectControl
className="woocommerce-filters-advanced__input" className={ classnames( className, 'woocommerce-filters-advanced__input' ) }
options={ options } options={ options }
value={ value } value={ value }
onChange={ partial( onFilterChange, filter.key, 'value' ) } onChange={ partial( onFilterChange, filter.key, 'value' ) }
@ -98,7 +99,7 @@ class SelectFilter extends Component {
/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/ /*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
return ( return (
<fieldset tabIndex="0"> <fieldset className="woocommerce-filters-advanced__line-item" tabIndex="0">
<legend className="screen-reader-text"> <legend className="screen-reader-text">
{ labels.add || '' } { labels.add || '' }
</legend> </legend>

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

@ -45,18 +45,22 @@
padding: 0 $gap 0 0; padding: 0 $gap 0 0;
margin: 0; margin: 0;
display: grid; display: grid;
grid-template-columns: auto 40px; grid-template-columns: 1fr 40px;
background-color: $core-grey-light-100; background-color: $core-grey-light-100;
border-bottom: 1px solid $core-grey-light-700; border-bottom: 1px solid $core-grey-light-700;
fieldset {
padding: $gap-smaller $gap-smaller $gap-smaller $gap;
}
&:hover { &:hover {
background-color: $core-grey-light-200; 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 { .woocommerce-filters-advanced__remove {
width: 40px; width: 40px;
height: 38px; height: 38px;
@ -125,7 +129,16 @@
&.is-english { &.is-english {
display: grid; 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 );
&:nth-child(1) {
display: flex;
align-items: center;
}
}
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
display: block; display: block;