Instant Search: updates behavior and styling of filtering options (#1…

…4711)

Sorting buttons and "Filter" button drop down on mobile.

Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com>
Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com>

modules/search/instant-search/components/gridicon/index.jsx

@@ -40,6 +40,8 @@ class Gridicon extends Component {
 				return <title>{ __( 'Is an event.', 'jetpack' ) }</title>;
 			case 'gridicons-cart':
 				return <title>{ __( 'Is a product.', 'jetpack' ) }</title>;
+			case 'chevron-down':
+				return <title>{ __( 'Show filters', 'jetpack' ) }</title>;
 			case 'gridicons-comment':
 				return <title>{ __( 'Matching comment.', 'jetpack' ) }</title>;
 			case 'gridicons-cross':
@@ -86,6 +88,12 @@ class Gridicon extends Component {
 						<path d="M9 20c0 1.1-.9 2-2 2s-1.99-.9-1.99-2S5.9 18 7 18s2 .9 2 2zm8-2c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm.396-5c.937 0 1.75-.65 1.952-1.566L21 5H7V4c0-1.105-.895-2-2-2H3v2h2v11c0 1.105.895 2 2 2h12c0-1.105-.895-2-2-2H7v-2h10.396z" />
 					</g>
 				);
+			case 'gridicons-chevron-down':
+				return (
+					<g>
+						<path d="M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586" />
+					</g>
+				);
 			case 'gridicons-comment':
 				return (
 					<g>

modules/search/instant-search/components/search-box.jsx

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import { __ } from '@wordpress/i18n';
 // eslint-disable-next-line lodash/import-scope
@@ -13,6 +13,8 @@ import uniqueId from 'lodash/uniqueId';
  * Internal dependencies
  */
 import Gridicon from './gridicon';
+import SearchSort from './search-sort';
+import { getSortQuery } from '../lib/query-string';
 
 let initiallyFocusedElement = null;
 
@@ -47,42 +49,54 @@ const SearchBox = props => {
 	}, [] );
 
 	return (
-		<div className="jetpack-instant-search__box">
-			{ /* TODO: Add support for preserving label text */ }
-			<label className="jetpack-instant-search__box-label" htmlFor={ inputId }>
-				<span className="screen-reader-text">{ __( 'Site Search', 'jetpack' ) }</span>
-				<div className="jetpack-instant-search__box-gridicon">
-					<Gridicon icon="search" size={ 24 } />
-				</div>
-				<input
-					id={ inputId }
-					className="search-field jetpack-instant-search__box-input"
-					onInput={ props.onChangeQuery }
-					ref={ inputRef }
-					placeholder={ __( 'Search…', 'jetpack' ) }
-					type="search"
-					value={ props.query }
-				/>
-			</label>
+		<Fragment>
+			<div className="jetpack-instant-search__box">
+				{ /* TODO: Add support for preserving label text */ }
+				<label className="jetpack-instant-search__box-label" htmlFor={ inputId }>
+					<span className="screen-reader-text">{ __( 'Site Search', 'jetpack' ) }</span>
+					<div className="jetpack-instant-search__box-gridicon">
+						<Gridicon icon="search" size={ 24 } />
+					</div>
+					<input
+						id={ inputId }
+						className="search-field jetpack-instant-search__box-input"
+						onInput={ props.onChangeQuery }
+						ref={ inputRef }
+						placeholder={ __( 'Search…', 'jetpack' ) }
+						type="search"
+						value={ props.query }
+					/>
+
+					<button className="screen-reader-text">{ __( 'Search', 'jetpack' ) }</button>
+				</label>
+			</div>
+
 			{ props.enableFilters && ! props.widget && (
-				/* Using role='button' rather than button element so we retain control over styling */
-				<div
-					role="button"
-					onClick={ props.toggleFilters }
-					onKeyDown={ props.toggleFilters }
-					tabIndex="0"
-					className="jetpack-instant-search__box-filter-icon"
-				>
-					<Gridicon icon="filter" alt="Search filter icon" aria-hidden="true" />
-					<span class="screen-reader-text">
-						{ props.showFilters
-							? __( 'Hide filters', 'jetpack' )
-							: __( 'Show filters', 'jetpack' ) }
-					</span>
+				<div className="jetpack-instant-search__box-filter-area">
+					<div
+						role="button"
+						onClick={ props.toggleFilters }
+						onKeyDown={ props.toggleFilters }
+						tabIndex="0"
+						className="jetpack-instant-search__box-filter-button"
+					>
+						{ __( 'Filters', 'jetpack' ) }
+						<Gridicon
+							icon="chevron-down"
+							size={ 16 }
+							alt="Show search filters"
+							aria-hidden="true"
+						/>
+						<span className="screen-reader-text">
+							{ props.showFilters
+								? __( 'Hide filters', 'jetpack' )
+								: __( 'Show filters', 'jetpack' ) }
+						</span>
+					</div>
+					<SearchSort onChange={ props.onChangeSort } value={ getSortQuery() } />
 				</div>
 			) }
-			<button className="screen-reader-text">{ __( 'Search', 'jetpack' ) }</button>
-		</div>
+		</Fragment>
 	);
 };
 

modules/search/instant-search/components/search-box.scss

@@ -42,13 +42,116 @@ input.jetpack-instant-search__box-input.search-field {
 	}
 }
 
-.jetpack-instant-search__box-filter-icon {
-	margin: 0 16px;
+.jetpack-instant-search__box-filter-area {
+	display: flex;
+	align-items: center;
+	margin-top: 12px;
+}
+
+.jetpack-instant-search__box-filter-button,
+.jetpack-instant-search__box-filter-option {
+	padding: 8px;
+	font-size: 12px;
+	border: 1px solid #8e8e8e;
+	text-decoration: none;
+	transition: background-color 0.25s ease-in-out;
+
+	@include break-small() {
+		padding: 10px 14px;
+		font-size: 13px;
+	}
+
+	.jetpack-instant-search__overlay--light & {
+		color: #000;
+	}
+
+	.jetpack-instant-search__overlay--dark & {
+		color: #fff;
+	}
+}
+
+.jetpack-instant-search__box-filter-button {
+	display: flex;
+	align-items: center;
+	margin-right: 6px;
+	border-radius: 5px;
 	cursor: pointer;
 
+	@include break-small() {
+		margin-right: 16px;
+	}
+
 	@include break-medium() {
 		display: none;
 	}
+
+	&:hover,
+	&:focus {
+		.jetpack-instant-search__overlay--light & {
+			background-color: #d2d2d2;
+		}
+
+		.jetpack-instant-search__overlay--dark & {
+			background-color: #4f4f4f;
+		}
+	}
+
+	.gridicon {
+		margin-left: 4px;
+	}
+}
+
+.jetpack-instant-search__box-filter-order {
+	display: flex;
+}
+
+.jetpack-instant-search__box-filter-option {
+	border: 1px solid #8e8e8e;
+	border-right-width: 0;
+	cursor: pointer;
+
+	&:first-of-type {
+		border-top-left-radius: 5px;
+		border-bottom-left-radius: 5px;
+	}
+
+	&:last-of-type {
+		border-right-width: 1px;
+		border-top-right-radius: 5px;
+		border-bottom-right-radius: 5px;
+	}
+
+	&.is-selected,
+	&:hover,
+	&:focus {
+		.jetpack-instant-search__overlay--light & {
+			background-color: #d2d2d2;
+		}
+
+		.jetpack-instant-search__overlay--dark & {
+			background-color: #4f4f4f;
+		}
+	}
+
+	&.is-selected {
+		.jetpack-instant-search__overlay--light & {
+			border-color: #000;
+		}
+
+		.jetpack-instant-search__overlay--dark & {
+			border-color: #d4d4d4;
+		}
+
+		& + .jetpack-instant-search__box-filter-option {
+			.jetpack-instant-search__overlay--light & {
+				border-left: 1px solid #000;
+			}
+
+			.jetpack-instant-search__overlay--dark & {
+				border-left: 1px solid #d4d4d4;
+			}
+		}
+	}
 }
 
 /* apply to all the inputs to try and pick up any theme styling */

modules/search/instant-search/components/search-form.jsx

@@ -11,15 +11,8 @@ import { Component, h } from 'preact';
 import JetpackColophon from './jetpack-colophon';
 import SearchBox from './search-box';
 import SearchFilters from './search-filters';
-import SearchSort from './search-sort';
 
-import {
-	getFilterQuery,
-	getSearchQuery,
-	getSortQuery,
-	setSearchQuery,
-	setSortQuery,
-} from '../lib/query-string';
+import { getFilterQuery, getSearchQuery, setSearchQuery, setSortQuery } from '../lib/query-string';
 
 const noop = event => event.preventDefault();
 
@@ -51,10 +44,11 @@ class SearchForm extends Component {
 	render() {
 		return (
 			<form onSubmit={ noop } role="search" className={ this.props.className }>
-				<div className="search-form jetpack-instant-search__search-form">
+				<div className="jetpack-instant-search__search-form">
 					<SearchBox
 						enableFilters
 						onChangeQuery={ this.onChangeQuery }
+						onChangeSort={ this.onChangeSort }
 						query={ getSearchQuery() }
 						showFilters={ this.state.showFilters }
 						toggleFilters={ this.toggleFilters }
@@ -64,7 +58,6 @@ class SearchForm extends Component {
 				{ this.state.showFilters && (
 					<div className="jetpack-instant-search__search-form-filters">
 						<div className="jetpack-instant-search__search-form-filters-arrow" />
-						<SearchSort onChange={ this.onChangeSort } value={ getSortQuery() } />
 						{ this.props.widgets.map( widget => (
 							<SearchFilters
 								filters={ getFilterQuery() }

modules/search/instant-search/components/search-form.scss

@@ -2,8 +2,8 @@ $arrow-height: 10px;
 
 .jetpack-instant-search__search-form-filters {
 	position: absolute;
-	top: 52px;
-	right: 0;
+	top: 96px;
+	left: 0;
 	z-index: 10;
 	width: 100%;
 	margin: 12px 0 32px;
@@ -43,7 +43,7 @@ $arrow-height: 10px;
 .jetpack-instant-search__search-form-filters-arrow {
 	position: absolute;
 	top: ( $arrow-height + 1px ) * -1;
-	right: 16px;
+	left: 52px;
 	width: $arrow-height * 2;
 	height: $arrow-height;
 

modules/search/instant-search/components/search-results.scss

@@ -4,7 +4,7 @@
 	z-index: 10;
 	max-width: 1080px;
 	margin: 0 auto;
-	padding: 0 0.5em;
+	padding: 0.125em 0.5em;
 	text-align: left;
 
 	mark {

modules/search/instant-search/components/search-sort.jsx

@@ -4,40 +4,45 @@
  * External dependencies
  */
 import { h, Component } from 'preact';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getSortOptions } from '../lib/sort';
 
 export default class SearchSort extends Component {
-	handleChange = event => {
-		if ( this.props.value === event.target.value ) {
-			return;
+	handleKeyPress = event => {
+		if ( this.props.value !== event.target.value && event.key === 'Enter' ) {
+			event.preventDefault();
+			this.props.onChange( event.target.dataset.value );
+		}
+	};
+	handleClick = event => {
+		if ( this.props.value !== event.target.value ) {
+			event.preventDefault();
+			this.props.onChange( event.target.dataset.value );
 		}
-
-		this.props.onChange( event.target.value );
 	};
 
 	render() {
 		const sortOptions = getSortOptions();
 		return (
-			<div className="jetpack-instant-search__sort">
-				<label>
-					<span>{ __( 'Sort by', 'jetpack' ) }</span>
-					<select
-						className="jetpack-instant-search__sort-select"
-						onBlur={ this.handleChange }
-						onChange={ this.handleChange }
+			<div className="jetpack-instant-search__box-filter-order">
+				{ Object.keys( sortOptions ).map( sortKey => (
+					<a
+						class={ `jetpack-instant-search__box-filter-option ${
+							this.props.value === sortKey ? 'is-selected' : ''
+						}` }
+						data-value={ sortKey }
+						key={ sortKey }
+						onClick={ this.handleClick }
+						onKeyPress={ this.handleKeyPress }
+						role="button"
+						tabIndex={ 0 }
 					>
-						{ Object.keys( sortOptions ).map( sortKey => (
-							<option value={ sortKey } selected={ this.props.value === sortKey }>
-								{ sortOptions[ sortKey ].label }
-							</option>
-						) ) }
-					</select>
-				</label>
+						{ sortOptions[ sortKey ].label }
+					</a>
+				) ) }
 			</div>
 		);
 	}