From fb3c2bd29acc719b24cec802480d2168d0916417 Mon Sep 17 00:00:00 2001 From: Kev Date: Fri, 5 Jul 2024 09:55:06 -0400 Subject: [PATCH] Admin search: update close button behaviour (#38204) * Admin search: update close button behaviour * Remove projects/plugins/jetpack/_inc/client/components/search/index.jsx from eslint-excludelist.json --------- Co-authored-by: Karen Attfield --- .../client/components/search/clear-btn.jsx | 15 +++++ .../client/components/search/close-btn.jsx | 19 ++++++ .../_inc/client/components/search/index.jsx | 60 ++++++++----------- .../_inc/client/components/search/style.scss | 29 ++++++++- .../changelog/fix-jetpack-search-clear-btn | 4 ++ tools/eslint-excludelist.json | 1 - 6 files changed, 91 insertions(+), 37 deletions(-) create mode 100644 projects/plugins/jetpack/_inc/client/components/search/clear-btn.jsx create mode 100644 projects/plugins/jetpack/_inc/client/components/search/close-btn.jsx create mode 100644 projects/plugins/jetpack/changelog/fix-jetpack-search-clear-btn diff --git a/projects/plugins/jetpack/_inc/client/components/search/clear-btn.jsx b/projects/plugins/jetpack/_inc/client/components/search/clear-btn.jsx new file mode 100644 index 0000000000000..6f1dab9583b5e --- /dev/null +++ b/projects/plugins/jetpack/_inc/client/components/search/clear-btn.jsx @@ -0,0 +1,15 @@ +import { __ } from '@wordpress/i18n'; + +const SearchClearButton = ( { onClick } ) => { + return ( + + ); +}; + +export default SearchClearButton; diff --git a/projects/plugins/jetpack/_inc/client/components/search/close-btn.jsx b/projects/plugins/jetpack/_inc/client/components/search/close-btn.jsx new file mode 100644 index 0000000000000..e783b6e205216 --- /dev/null +++ b/projects/plugins/jetpack/_inc/client/components/search/close-btn.jsx @@ -0,0 +1,19 @@ +import Gridicon from 'components/gridicon'; + +const SearchCloseButton = ( { instanceId, closeSearch, closeListener } ) => { + return ( +
+ +
+ ); +}; + +export default SearchCloseButton; diff --git a/projects/plugins/jetpack/_inc/client/components/search/index.jsx b/projects/plugins/jetpack/_inc/client/components/search/index.jsx index 7bb3dbe7107ab..761f6b52edbe7 100644 --- a/projects/plugins/jetpack/_inc/client/components/search/index.jsx +++ b/projects/plugins/jetpack/_inc/client/components/search/index.jsx @@ -5,6 +5,8 @@ import analytics from 'lib/analytics'; import { debounce, noop } from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; +import SearchClearButton from './clear-btn'; +import SearchCloseButton from './close-btn'; import './style.scss'; @@ -13,6 +15,12 @@ import './style.scss'; */ const SEARCH_DEBOUNCE_MS = 300; +/** + * Listener for key events + * + * @param {Function} methodToCall - Method to call + * @param {Event} event - Event + */ function keyListener( methodToCall, event ) { switch ( event.key ) { case ' ': @@ -36,7 +44,6 @@ class Search extends React.Component { onSearch: PropTypes.func.isRequired, onSearchChange: PropTypes.func, onSearchOpen: PropTypes.func, - onSearchClose: PropTypes.func, analyticsGroup: PropTypes.string, overlayStyling: PropTypes.func, autoFocus: PropTypes.bool, @@ -61,7 +68,6 @@ class Search extends React.Component { disabled: false, onSearchChange: noop, onSearchOpen: noop, - onSearchClose: noop, onKeyDown: noop, onClick: noop, //undefined value for overlayStyling is an optimization that will @@ -104,10 +110,6 @@ class Search extends React.Component { : this.props.onSearch; } - if ( nextProps.isOpen ) { - this.setState( { isOpen: nextProps.isOpen } ); - } - if ( nextProps.initialValue !== this.props.initialValue && ( this.state.keyword === this.props.initialValue || this.state.keyword === '' ) @@ -237,25 +239,23 @@ class Search extends React.Component { return; } - const input = this.searchInputRef.current; - this.setState( { keyword: '', - isOpen: this.props.isOpen || false, + isOpen: false, } ); - input.value = ''; // will not trigger onChange - input.blur(); - if ( this.props.pinned ) { this.openIconRef.current.focus(); } - this.props.onSearchClose( event ); - analytics.ga.recordEvent( this.props.analyticsGroup, 'Clicked Close Search' ); }; + clearSearch = () => { + this.clear(); + this.focus(); + }; + keyUp = event => { if ( event.key === 'Enter' && isMobile() ) { //dismiss soft keyboards @@ -320,6 +320,8 @@ class Search extends React.Component { const fadeDivClass = clsx( 'dops-search__input-fade', this.props.dir ); const inputClass = clsx( 'dops-search__input', this.props.dir ); + const showCloseButton = ! this.props.hideClose && ( this.state.keyword || this.state.isOpen ); + const showClearButton = showCloseButton && searchValue; return (
@@ -343,6 +345,7 @@ class Search extends React.Component { className={ inputClass } placeholder={ placeholder } role="searchbox" + tabIndex={ isOpenUnpinnedOrQueried ? '0' : '-1' } value={ searchValue } ref={ this.searchInputRef } onKeyUp={ this.keyUp } @@ -359,7 +362,14 @@ class Search extends React.Component { /> { this.props.overlayStyling && this.renderStylingDiv() }
- { this.closeButton() } + { showClearButton && } + { showCloseButton && ( + + ) } ); } @@ -371,26 +381,6 @@ class Search extends React.Component { ); }; - - closeButton = () => { - if ( ! this.props.hideClose && ( this.state.keyword || this.state.isOpen ) ) { - return ( -
- -
- ); - } - - return null; - }; } export default Search; diff --git a/projects/plugins/jetpack/_inc/client/components/search/style.scss b/projects/plugins/jetpack/_inc/client/components/search/style.scss index 9538ff8f16e65..fa387a1dc26e9 100644 --- a/projects/plugins/jetpack/_inc/client/components/search/style.scss +++ b/projects/plugins/jetpack/_inc/client/components/search/style.scss @@ -27,6 +27,31 @@ background-color: $white; border-radius: inherit; height: 100%; + + &:focus-visible { + outline-offset: -2px; + } + } + + .dops-search__clear-btn { + min-width: 48px; + padding: 0.25em; + + background: none; + border: solid 1px currentColor; + border-radius: 4px; + color: var(--jp-gray-50); + + &:focus-visible { + outline-offset: 2px; + } + } + + .dops-search__icon-navigation, + .dops-search__clear-btn { + &:focus-visible { + outline: solid 2px var(--jp-green-50); + } } .dops-search__open-icon, @@ -68,7 +93,9 @@ top: 0; right: 0; overflow: hidden; - + gap: 0.25rem; + background-color: var(--jp-white); + .dops-search__input-fade { position: relative; flex: 1 1 auto; diff --git a/projects/plugins/jetpack/changelog/fix-jetpack-search-clear-btn b/projects/plugins/jetpack/changelog/fix-jetpack-search-clear-btn new file mode 100644 index 0000000000000..d7d13ec06df07 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-jetpack-search-clear-btn @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Update search close button behaviour diff --git a/tools/eslint-excludelist.json b/tools/eslint-excludelist.json index 88596c607a4ed..e4b17c2718378 100644 --- a/tools/eslint-excludelist.json +++ b/tools/eslint-excludelist.json @@ -10,7 +10,6 @@ "projects/plugins/jetpack/_inc/client/components/popover/index.jsx", "projects/plugins/jetpack/_inc/client/components/popover/util.js", "projects/plugins/jetpack/_inc/client/components/root-child/index.jsx", - "projects/plugins/jetpack/_inc/client/components/search/index.jsx", "projects/plugins/jetpack/_inc/client/components/section-nav/index.jsx", "projects/plugins/jetpack/_inc/client/components/section-nav/item.jsx", "projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx",