- { ! options &&
}
- { options && (
-
- ) }
+ ),
+ filter: options ? (
+
+ ) : (
+
+ ),
+ },
+ } );
+ /*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
+ return (
+
);
+ /*eslint-enable jsx-a11y/no-noninteractive-tabindex*/
}
}
@@ -87,6 +108,7 @@ SelectFilter.propTypes = {
labels: PropTypes.shape( {
rule: PropTypes.string,
title: PropTypes.string,
+ filter: PropTypes.string,
} ),
rules: PropTypes.arrayOf( PropTypes.object ),
input: PropTypes.object,
@@ -105,4 +127,4 @@ SelectFilter.propTypes = {
onFilterChange: PropTypes.func.isRequired,
};
-export default withInstanceId( SelectFilter );
+export default SelectFilter;
diff --git a/plugins/woocommerce-admin/client/components/filters/advanced/style.scss b/plugins/woocommerce-admin/client/components/filters/advanced/style.scss
index 14ad6a56405..842c2cd1613 100644
--- a/plugins/woocommerce-admin/client/components/filters/advanced/style.scss
+++ b/plugins/woocommerce-admin/client/components/filters/advanced/style.scss
@@ -41,17 +41,13 @@
border-bottom: 1px solid $core-grey-light-700;
fieldset {
- padding: $gap-smaller $gap;
+ padding: $gap-smaller $gap-smaller $gap-smaller $gap;
}
&:hover {
background-color: $core-grey-light-200;
}
- .components-base-control {
- margin: 0;
- }
-
.woocommerce-filters-advanced__remove {
width: 40px;
height: 38px;
@@ -85,22 +81,41 @@
}
.woocommerce-filters-advanced__fieldset {
- display: grid;
- grid-template-columns: 100px 150px auto;
+ & > div {
+ padding: 0 $gap-smallest;
+
+ @include breakpoint( '<782px' ) {
+ display: block;
+ margin: 0;
+ width: 100%;
+ padding: $gap-smallest 0;
+ }
+ }
+
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
@include breakpoint( '<782px' ) {
- display: flex;
- flex-direction: column;
+ display: block;
+ }
+
+ &.is-english {
+ display: grid;
+ grid-template-columns: 100px 150px auto;
+
+ @include breakpoint( '<782px' ) {
+ display: block;
+ }
}
}
-.woocommerce-filters-advanced__fieldset-legend {
- align-self: center;
+.woocommerce-filters-advanced__rule {
+ width: 150px;
+}
- @include breakpoint( '<782px' ) {
- align-self: initial;
- padding: $gap-smallest 0;
- }
+.woocommerce-filters-advanced__input {
+ width: 100%;
}
.woocommerce-filters-advanced__add-filter-dropdown {
@@ -156,35 +171,3 @@
}
}
}
-
-.woocommerce-filters-advanced__list-selector {
- @include breakpoint( '<782px' ) {
- padding: $gap-smallest 0;
- }
-
- .components-spinner {
- margin: auto;
- display: block;
- float: none;
- top: 50%;
- transform: translateY(-50%);
-
- @include breakpoint( '<782px' ) {
- transform: none;
- }
- }
-}
-
-.woocommerce-filters-advanced__list-specifier {
- @include breakpoint( '<782px' ) {
- padding: $gap-smallest 0;
- }
-
- & + .woocommerce-filters-advanced__list-selector {
- padding: 0 0 0 $gap-smaller;
-
- @include breakpoint( '<782px' ) {
- padding: $gap-smallest 0;
- }
- }
-}
diff --git a/plugins/woocommerce-admin/client/components/filters/index.js b/plugins/woocommerce-admin/client/components/filters/index.js
index a196b80ccf8..8f679513d3d 100644
--- a/plugins/woocommerce-admin/client/components/filters/index.js
+++ b/plugins/woocommerce-admin/client/components/filters/index.js
@@ -45,12 +45,7 @@ class ReportFilters extends Component {
if ( 'advanced' === query.filter ) {
return (
);
}
diff --git a/plugins/woocommerce-admin/client/components/filters/style.scss b/plugins/woocommerce-admin/client/components/filters/style.scss
index a00f82a032f..2858f405fa4 100644
--- a/plugins/woocommerce-admin/client/components/filters/style.scss
+++ b/plugins/woocommerce-admin/client/components/filters/style.scss
@@ -17,6 +17,10 @@
}
}
}
+
+ .components-base-control__field {
+ margin-bottom: 0;
+ }
}
.woocommerce-filters-date,
diff --git a/plugins/woocommerce-admin/client/components/search/index.js b/plugins/woocommerce-admin/client/components/search/index.js
index 72534a00ee5..50f04aa6236 100644
--- a/plugins/woocommerce-admin/client/components/search/index.js
+++ b/plugins/woocommerce-admin/client/components/search/index.js
@@ -113,14 +113,14 @@ class Search extends Component {
render() {
const autocompleter = this.getAutocompleter();
- const { placeholder, inlineTags, selected, instanceId } = this.props;
+ const { placeholder, inlineTags, selected, instanceId, className } = this.props;
const { value = '', isActive } = this.state;
const aria = {
'aria-labelledby': this.props[ 'aria-labelledby' ],
'aria-label': this.props[ 'aria-label' ],
};
return (
-
+
{ ( { listBoxId, activeId, onChange } ) =>
@@ -186,6 +186,10 @@ class Search extends Component {
}
Search.propTypes = {
+ /**
+ * Class name applied to parent div.
+ */
+ className: PropTypes.string,
/**
* Function called when selected results change, passed result list.
*/
diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json
index 08ceb984a8a..9f8719e0dec 100755
--- a/plugins/woocommerce-admin/package.json
+++ b/plugins/woocommerce-admin/package.json
@@ -78,8 +78,8 @@
"history": "^4.7.2",
"html-to-react": "^1.3.3",
"husky": "^0.14.3",
- "interpolate-components": "1.1.1",
"marked": "^0.5.0",
+ "interpolate-components": "^1.1.1",
"node-sass": "^4.9.3",
"postcss-color-function": "^4.0.1",
"postcss-loader": "^3.0.0",