diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 53faff98213..794b94f6e38 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ - Chart component: format numbers and prices using store currency settings. - Make `href`/linking optional in SummaryNumber. - Fix SummaryNumber example code. +- New `` prop named `showClearButton`, that will display a 'Clear' button when the search box contains one or more tags. # 1.4.0 - Add download log ip address autocompleter to search component diff --git a/plugins/woocommerce-admin/packages/components/src/search/index.js b/plugins/woocommerce-admin/packages/components/src/search/index.js index 68fb305ba91..12427a04705 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/index.js +++ b/plugins/woocommerce-admin/packages/components/src/search/index.js @@ -4,6 +4,7 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { Component, createRef, Fragment } from '@wordpress/element'; +import { Button, Icon } from '@wordpress/components'; import { withInstanceId } from '@wordpress/compose'; import { findIndex, noop } from 'lodash'; import Gridicon from 'gridicons'; @@ -44,6 +45,7 @@ class Search extends Component { this.input = createRef(); this.selectResult = this.selectResult.bind( this ); + this.removeAll = this.removeAll.bind( this ); this.removeResult = this.removeResult.bind( this ); this.updateSearch = this.updateSearch.bind( this ); this.onFocus = this.onFocus.bind( this ); @@ -60,6 +62,11 @@ class Search extends Component { } } + removeAll() { + const { onChange } = this.props; + onChange( [] ); + } + removeResult( id ) { return () => { const { selected, onChange } = this.props; @@ -149,7 +156,16 @@ class Search extends Component { render() { const autocompleter = this.getAutocompleter(); - const { allowFreeTextSearch, placeholder, inlineTags, selected, instanceId, className, staticResults } = this.props; + const { + allowFreeTextSearch, + className, + inlineTags, + instanceId, + placeholder, + selected, + showClearButton, + staticResults, + } = this.props; const { value = '', isActive } = this.state; const aria = { 'aria-labelledby': this.props[ 'aria-labelledby' ], @@ -232,6 +248,16 @@ class Search extends Component { } { ! inlineTags && this.renderTags() } + { showClearButton && shouldRenderTags ? ( + + ) : null } ); /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ @@ -289,6 +315,10 @@ Search.propTypes = { * Render tags inside input, otherwise render below input. */ inlineTags: PropTypes.bool, + /** + * Render a 'Clear' button next to the input box to remove its contents. + */ + showClearButton: PropTypes.bool, /** * Render results list positioned statically instead of absolutely. */ @@ -300,6 +330,7 @@ Search.defaultProps = { onChange: noop, selected: [], inlineTags: false, + showClearButton: false, staticResults: false, }; diff --git a/plugins/woocommerce-admin/packages/components/src/search/style.scss b/plugins/woocommerce-admin/packages/components/src/search/style.scss index 008f48390fe..6ed6c70fd43 100644 --- a/plugins/woocommerce-admin/packages/components/src/search/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/search/style.scss @@ -127,3 +127,13 @@ .woocommerce-search__result-name { text-decoration: underline; // @todo Not actually a link, should underline? } + +.woocommerce-search__clear { + position: absolute; + right: 10px; + top: calc( 50% - 10px ); + + & > .dashicon { + color: #c9c9c9; + } +} diff --git a/plugins/woocommerce-admin/packages/components/src/table/index.js b/plugins/woocommerce-admin/packages/components/src/table/index.js index c323e712c8d..2b2cc205917 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/index.js +++ b/plugins/woocommerce-admin/packages/components/src/table/index.js @@ -287,6 +287,7 @@ class TableCard extends Component { onChange={ this.onSearch } placeholder={ labels.placeholder || __( 'Search by item name', 'wc-admin' ) } selected={ searchedLabels } + showClearButton={ true } type={ searchBy } /> ),