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
2020-12-21 14:43:39 -05:00 · 2020-12-21 14:43:39 -05:00 · da239f6bb7
parent a6c109e032
commit da239f6bb7
6 changed files with 159 additions and 161 deletions
--- 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 (
-			<Card
-				className="woocommerce-filters-advanced woocommerce-analytics__card"
-				title={ this.getTitle() }
-			>
-				<ul
-					className="woocommerce-filters-advanced__list"
-					ref={ this.filterListRef }
-				>
-					{ activeFilters
-						.sort( this.orderFilters )
-						.map( ( filter, idx ) => {
-							const { instance, key } = filter;
-							return (
-								<AdvancedFilterItem
-									key={ key + ( instance || '' ) }
-									config={ config }
-									currency={ currency }
-									filter={ filter }
-									isEnglish={ isEnglish }
-									onFilterChange={ partial(
-										this.onFilterChange,
-										idx
-									) }
-									query={ query }
-									removeFilter={ () =>
-										this.removeFilter( idx )
-									}
-								/>
-							);
-						} ) }
-				</ul>
-				{ availableFilterKeys.length > 0 && (
-					<div className="woocommerce-filters-advanced__add-filter">
-						<Dropdown
-							className="woocommerce-filters-advanced__add-filter-dropdown"
-							position="bottom center"
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<Button
-									className="woocommerce-filters-advanced__add-button"
-									onClick={ onToggle }
-									aria-expanded={ isOpen }
-								>
-									<AddOutlineIcon />
-									{ __(
-										'Add a Filter',
-										'woocommerce-admin'
-									) }
-								</Button>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<ul className="woocommerce-filters-advanced__add-dropdown">
-									{ availableFilterKeys.map( ( key ) => (
-										<li key={ key }>
-											<Button
-												onClick={ partial(
-													this.addFilter,
-													key,
-													onClose
-												) }
-											>
-												{
-													config.filters[ key ].labels
-														.add
-												}
-											</Button>
-										</li>
-									) ) }
-								</ul>
-							) }
-						/>
-					</div>
+			<Card className="woocommerce-filters-advanced" size="small">
+				<CardHeader justify="flex-start">
+					<Text variant="subtitle.small">{ this.getTitle() }</Text>
+				</CardHeader>
+				{ !! activeFilters.length && (
+					<CardBody size={ null }>
+						<ul
+							className="woocommerce-filters-advanced__list"
+							ref={ this.filterListRef }
+						>
+							{ activeFilters
+								.sort( this.orderFilters )
+								.map( ( filter, idx ) => {
+									const { instance, key } = filter;
+									return (
+										<AdvancedFilterItem
+											key={ key + ( instance || '' ) }
+											config={ config }
+											currency={ currency }
+											filter={ filter }
+											isEnglish={ isEnglish }
+											onFilterChange={ partial(
+												this.onFilterChange,
+												idx
+											) }
+											query={ query }
+											removeFilter={ () =>
+												this.removeFilter( idx )
+											}
+										/>
+									);
+								} ) }
+						</ul>
+					</CardBody>
 				) }
-
-				<div className="woocommerce-filters-advanced__controls">
-					{ updateDisabled && (
-						<Button isPrimary disabled>
-							{ __( 'Filter', 'woocommerce-admin' ) }
-						</Button>
-					) }
-					{ ! updateDisabled && (
-						<Link
-							className="components-button is-primary is-button"
-							type="wc-admin"
-							href={ updateHref }
-							onClick={ this.onFilter }
-						>
-							{ __( 'Filter', 'woocommerce-admin' ) }
-						</Link>
-					) }
-					{ activeFilters.length > 0 && (
-						<Link
-							type="wc-admin"
-							href={ this.getUpdateHref( [] ) }
-							onClick={ this.clearFilters }
-						>
-							{ __( 'Clear all filters', 'woocommerce-admin' ) }
-						</Link>
-					) }
-				</div>
+				{ availableFilterKeys.length > 0 && (
+					<CardBody>
+						<div className="woocommerce-filters-advanced__add-filter">
+							<Dropdown
+								className="woocommerce-filters-advanced__add-filter-dropdown"
+								position="bottom center"
+								renderToggle={ ( { isOpen, onToggle } ) => (
+									<Button
+										className="woocommerce-filters-advanced__add-button"
+										onClick={ onToggle }
+										aria-expanded={ isOpen }
+									>
+										<AddOutlineIcon />
+										{ __(
+											'Add a Filter',
+											'woocommerce-admin'
+										) }
+									</Button>
+								) }
+								renderContent={ ( { onClose } ) => (
+									<ul className="woocommerce-filters-advanced__add-dropdown">
+										{ availableFilterKeys.map( ( key ) => (
+											<li key={ key }>
+												<Button
+													onClick={ partial(
+														this.addFilter,
+														key,
+														onClose
+													) }
+												>
+													{
+														config.filters[ key ]
+															.labels.add
+													}
+												</Button>
+											</li>
+										) ) }
+									</ul>
+								) }
+							/>
+						</div>
+					</CardBody>
+				) }
+				<CardFooter align="center">
+					<div className="woocommerce-filters-advanced__controls">
+						{ updateDisabled && (
+							<Button isPrimary disabled>
+								{ __( 'Filter', 'woocommerce-admin' ) }
+							</Button>
+						) }
+						{ ! updateDisabled && (
+							<Link
+								className="components-button is-primary is-button"
+								type="wc-admin"
+								href={ updateHref }
+								onClick={ this.onFilter }
+							>
+								{ __( 'Filter', 'woocommerce-admin' ) }
+							</Link>
+						) }
+						{ activeFilters.length > 0 && (
+							<Link
+								type="wc-admin"
+								href={ this.getUpdateHref( [] ) }
+								onClick={ this.clearFilters }
+							>
+								{ __(
+									'Clear all filters',
+									'woocommerce-admin'
+								) }
+							</Link>
+						) }
+					</div>
+				</CardFooter>
 			</Card>
 		);
 	}
--- 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;
 	}
--- 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 (
-			<Card
-				title={ labels.title }
-				className="woocommerce-filters__compare woocommerce-analytics__card"
-			>
-				<div className="woocommerce-filters__compare-body">
+			<Card className="woocommerce-filters__compare">
+				<CardHeader>
+					<Text variant="subtitle.small">{ labels.title }</Text>
+				</CardHeader>
+				<CardBody>
 					<Search
 						type={ type }
 						selected={ selected }
@ -102,8 +108,8 @@ export class CompareFilter extends Component {
 							this.setState( { selected: value } );
 						} }
 					/>
-				</div>
-				<div className="woocommerce-filters__compare-footer">
+				</CardBody>
+				<CardFooter justify="flex-start">
 					<CompareButton
 						count={ selected.length }
 						helpText={ labels.helpText }
@ -116,7 +122,7 @@ export class CompareFilter extends Component {
 							{ __( 'Clear all', 'woocommerce-admin' ) }
 						</Button>
 					) }
-				</div>
+				</CardFooter>
 			</Card>
 		);
 	}
--- 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;
--- 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;
 	}
--- 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;