diff --git a/packages/search/src/search.stories.tsx b/packages/search/src/search.stories.tsx
index 9d36642912a97a..ee623a0878af28 100644
--- a/packages/search/src/search.stories.tsx
+++ b/packages/search/src/search.stories.tsx
@@ -41,3 +41,19 @@ export const Pinned = () => ;
export const Compact = () => ;
export const CompactPinned = () => ;
+
+export const WithOverlayStyling = () => {
+ const overlayStyling = ( input: string ) => {
+ const tokens = input.split( /(\s+)/ );
+
+ return tokens
+ .filter( ( token ) => token.trim() )
+ .map( ( token, i ) => (
+
+ { token }
+
+ ) );
+ };
+
+ return ;
+};
diff --git a/packages/search/src/search.tsx b/packages/search/src/search.tsx
index a9f14a1ac30d4c..2cc2c1754bb291 100644
--- a/packages/search/src/search.tsx
+++ b/packages/search/src/search.tsx
@@ -311,23 +311,21 @@ class Search extends React.Component< Props, State > {
const searchValue = this.state.keyword;
const placeholder = this.props.placeholder || __( 'Search…' );
const inputLabel = this.props.inputLabel;
- const enableOpenIcon = this.props.pinned && ! this.state.isOpen;
const isOpenUnpinnedOrQueried = this.state.isOpen || ! this.props.pinned || searchValue;
- const autocorrect = this.props.disableAutocorrect && {
+ const autocorrectProps = this.props.disableAutocorrect && {
autoComplete: 'off',
autoCorrect: 'off',
spellCheck: 'false' as const,
};
- const searchClass = classNames( this.props.className, this.props.dir, {
+ const searchClass = classNames( 'search', this.props.className, this.props.dir, {
'is-expanded-to-container': this.props.fitsContainer,
'is-open': isOpenUnpinnedOrQueried,
'is-searching': this.props.searching,
'is-compact': this.props.compact,
'has-focus': this.state.hasFocus,
'has-open-icon': ! this.props.hideOpenIcon,
- search: true,
} );
const fadeDivClass = classNames( 'search__input-fade', this.props.dir );
@@ -336,18 +334,7 @@ class Search extends React.Component< Props, State > {
return (
-
+ { this.renderOpenIcon() }
{ this.renderStylingDiv() }
@@ -383,8 +370,27 @@ class Search extends React.Component< Props, State > {
);
}
+ renderOpenIcon() {
+ const enableOpenIcon = this.props.pinned && ! this.state.isOpen;
+
+ return (
+
+ );
+ }
+
renderStylingDiv() {
- if ( this.props.overlayStyling ) {
+ if ( typeof this.props.overlayStyling === 'function' ) {
return (
{ this.props.overlayStyling( this.state.keyword ) }