From da239f6bb78bac3f1c00f1191473bf66c83e1bc1 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Mon, 21 Dec 2020 14:43:39 -0500 Subject: [PATCH] Update filters to use wp card component (https://github.com/woocommerce/woocommerce-admin/pull/5903) * Use cards in advanced filters * Use wp card for compare filters * Fix scss lint errors --- .../components/src/advanced-filters/index.js | 218 ++++++++++-------- .../src/advanced-filters/style.scss | 39 +--- .../components/src/compare-filter/index.js | 26 ++- .../components/src/filters/style.scss | 32 +-- .../packages/components/src/search/style.scss | 3 +- .../components/src/select-control/style.scss | 2 +- 6 files changed, 159 insertions(+), 161 deletions(-) diff --git a/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js b/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js index c16fb5dcca2..5702422df44 100644 --- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js +++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js @@ -2,8 +2,17 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; +import { + Button, + Card, + CardBody, + CardFooter, + CardHeader, + Dropdown, + SelectControl, + __experimentalText as Text, +} from '@wordpress/components'; import { Component, createRef } from '@wordpress/element'; -import { SelectControl, Button, Dropdown } from '@wordpress/components'; import { partial, difference, isEqual } from 'lodash'; import PropTypes from 'prop-types'; import AddOutlineIcon from 'gridicons/dist/add-outline'; @@ -20,7 +29,6 @@ import { /** * Internal dependencies */ -import Card from '../card'; import Link from '../link'; import AdvancedFilterItem from './item'; @@ -265,105 +273,115 @@ class AdvancedFilters extends Component { activeFilters.length === 0; const isEnglish = this.isEnglish(); return ( - - - { availableFilterKeys.length > 0 && ( -
- ( - - ) } - renderContent={ ( { onClose } ) => ( -
    - { availableFilterKeys.map( ( key ) => ( -
  • - -
    • - ) ) } -
- ) } - /> -
+ + + { this.getTitle() } + + { !! activeFilters.length && ( + +
    + { activeFilters + .sort( this.orderFilters ) + .map( ( filter, idx ) => { + const { instance, key } = filter; + return ( + + this.removeFilter( idx ) + } + /> + ); + } ) } +
+ ) } - -
- { updateDisabled && ( - - ) } - { ! updateDisabled && ( - - { __( 'Filter', 'woocommerce-admin' ) } - - ) } - { activeFilters.length > 0 && ( - - { __( 'Clear all filters', 'woocommerce-admin' ) } - - ) } -
+ { availableFilterKeys.length > 0 && ( + +
+ ( + + ) } + renderContent={ ( { onClose } ) => ( +
    + { availableFilterKeys.map( ( key ) => ( +
  • + +
    • + ) ) } +
+ ) } + /> +
+ + ) } + +
+ { updateDisabled && ( + + ) } + { ! updateDisabled && ( + + { __( 'Filter', 'woocommerce-admin' ) } + + ) } + { activeFilters.length > 0 && ( + + { __( + 'Clear all filters', + 'woocommerce-admin' + ) } + + ) } +
+ ); } diff --git a/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss b/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss index 484584fa005..4aadeb7b900 100644 --- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss @@ -1,12 +1,13 @@ .woocommerce-filters-advanced { margin: $gap-large 0; - .woocommerce-card__header { - padding: $gap-smaller $gap; - } + .components-card__body { + background-color: $gray-100; - .woocommerce-card__body { - padding: 0; + &.is-size-small:hover, + ul li:hover { + background-color: $gray-200; + } } .components-select-control__input { @@ -15,8 +16,10 @@ margin: 0; } - .components-base-control__field { - margin-bottom: 0; + .components-card__header { + .components-base-control__field { + margin-bottom: 0; + } } @include breakpoint( '<782px' ) { @@ -43,7 +46,6 @@ margin: 0; display: grid; grid-template-columns: 1fr 40px; - background-color: $gray-100; border-bottom: 1px solid $gray-400; &:hover { @@ -84,16 +86,8 @@ } .woocommerce-filters-advanced__add-filter { - padding: $gap-small; margin: 0; - color: $studio-woocommerce-purple; display: block; - background-color: $gray-100; - border-bottom: 1px solid $gray-400; - - &:hover { - background-color: $gray-200; - } div div { display: inline-block; @@ -180,22 +174,9 @@ fill: currentColor; margin: 0 6px 0 0; } - - &.components-icon-button:not(:disabled):not([aria-disabled='true']):not(.is-default):hover { - color: $studio-woocommerce-purple-30; - } - - &:not(:disabled):not([aria-disabled='true']):focus { - color: $studio-woocommerce-purple; - background-color: transparent; - } } .woocommerce-filters-advanced__controls { - padding: $gap-smaller $gap; - display: flex; - align-items: center; - .components-button { margin-right: $gap; } diff --git a/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js b/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js index 98f0eb19499..ee9cfb25000 100644 --- a/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js +++ b/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js @@ -3,7 +3,14 @@ */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { Button } from '@wordpress/components'; +import { + Button, + Card, + CardBody, + CardFooter, + CardHeader, + __experimentalText as Text, +} from '@wordpress/components'; import { isEqual, isFunction } from 'lodash'; import PropTypes from 'prop-types'; @@ -12,7 +19,6 @@ import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation'; /** * Internal dependencies */ -import Card from '../card'; import CompareButton from './button'; import Search from '../search'; @@ -89,11 +95,11 @@ export class CompareFilter extends Component { const { labels, type } = this.props; const { selected } = this.state; return ( - -
+ + + { labels.title } + + -
-
+ + ) } -
+ ); } diff --git a/plugins/woocommerce-admin/packages/components/src/filters/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/style.scss index b1afc4fb117..1c648799d76 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/filters/style.scss @@ -22,6 +22,18 @@ } } +.woocommerce-filters__advanced-filters { + .components-card__body { + background-color: $gray-100; + } + + .components-card__footer { + .components-button { + margin-right: $gap; + } + } +} + .woocommerce-filters-filter { width: 25%; padding: 0 $gap-small; @@ -83,26 +95,6 @@ } } -.woocommerce-filters__compare .woocommerce-card__body { - padding: 0; -} - -.woocommerce-filters__compare-body { - padding: $gap; - background-color: $gray-100; - border-bottom: 1px solid $gray-100; -} - -.woocommerce-filters__compare-footer { - padding: $gap; - display: flex; - align-items: center; - - .components-button { - margin-right: $gap; - } -} - .woocommerce-filters-filter__search { .woocommerce-search__autocomplete-results { position: static; diff --git a/plugins/woocommerce-admin/packages/components/src/search/style.scss b/plugins/woocommerce-admin/packages/components/src/search/style.scss index 324f128622c..623a9540066 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/search/style.scss @@ -3,8 +3,9 @@ i.material-icons-outlined { position: absolute; - top: 9px; + top: 50%; left: 10px; + transform: translateY(-50%); color: $gray-400; font-size: 20px; } diff --git a/plugins/woocommerce-admin/packages/components/src/select-control/style.scss b/plugins/woocommerce-admin/packages/components/src/select-control/style.scss index 3b4cf880d4a..78c186a0c06 100644 --- a/plugins/woocommerce-admin/packages/components/src/select-control/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/select-control/style.scss @@ -83,7 +83,7 @@ .woocommerce-select-control__tags { position: relative; - margin: $gap-small 0; + margin: $gap-small 0 0 0; &.has-clear { padding-right: $gap-large;