From a5d9f20b086082801bcc4573b325dc550688e1bd Mon Sep 17 00:00:00 2001 From: Jason Moon Date: Fri, 7 Feb 2020 16:49:46 -0700 Subject: [PATCH 1/5] Add Jetpack Search gridicon --- .../components/gridicon/index.jsx | 12 +++++-- .../instant-search/components/search-app.jsx | 1 + .../instant-search/components/search-box.jsx | 5 +++ .../instant-search/components/search-box.scss | 33 +++++++++++++++++++ .../instant-search/components/search-form.jsx | 5 +-- .../components/search-results.jsx | 1 + 6 files changed, 53 insertions(+), 4 deletions(-) diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx index 3e71d4e985f1..fe2b9c0d8211 100644 --- a/modules/search/instant-search/components/gridicon/index.jsx +++ b/modules/search/instant-search/components/gridicon/index.jsx @@ -140,6 +140,13 @@ class Gridicon extends Component { ); + case 'gridicons-jetpack-search': + return ( + + + + + ); } } @@ -159,10 +166,11 @@ class Gridicon extends Component { { this.getSVGTitle( icon ) } { this.renderIcon( icon ) } diff --git a/modules/search/instant-search/components/search-app.jsx b/modules/search/instant-search/components/search-app.jsx index 15a0a314017a..ef0cc95c2731 100644 --- a/modules/search/instant-search/components/search-app.jsx +++ b/modules/search/instant-search/components/search-app.jsx @@ -256,6 +256,7 @@ class SearchApp extends Component { query={ getSearchQuery() } response={ this.state.response } resultFormat={ getResultFormatQuery() } + showLogo={ this.state.overlayOptions.showLogo } showPoweredBy={ this.state.overlayOptions.showPoweredBy } widgets={ this.props.options.widgets } /> diff --git a/modules/search/instant-search/components/search-box.jsx b/modules/search/instant-search/components/search-box.jsx index cc673599c592..4b270f3ddbe7 100644 --- a/modules/search/instant-search/components/search-box.jsx +++ b/modules/search/instant-search/components/search-box.jsx @@ -44,6 +44,11 @@ const SearchBox = props => { + { props.showLogo && ( +
+ +
+ ) } { this.state.showFilters && ( diff --git a/modules/search/instant-search/components/search-results.jsx b/modules/search/instant-search/components/search-results.jsx index 1fb11b01e571..8277ce0a1a27 100644 --- a/modules/search/instant-search/components/search-results.jsx +++ b/modules/search/instant-search/components/search-results.jsx @@ -65,6 +65,7 @@ class SearchResults extends Component { locale={ this.props.locale } postTypes={ this.props.postTypes } response={ this.props.response } + showLogo={ this.props.showLogo } widgets={ this.props.widgets } /> From 326696c350c5b1581e50a49bb7e1a88671e105fa Mon Sep 17 00:00:00 2001 From: Filipe Varela Date: Wed, 12 Feb 2020 16:18:31 +0000 Subject: [PATCH 2/5] Update search icon --- modules/search/instant-search/components/gridicon/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx index fe2b9c0d8211..475798737d54 100644 --- a/modules/search/instant-search/components/gridicon/index.jsx +++ b/modules/search/instant-search/components/gridicon/index.jsx @@ -143,8 +143,7 @@ class Gridicon extends Component { case 'gridicons-jetpack-search': return ( - - + ); } From 544fc7d20c5b155bd92455d5b75dd21e61c298ce Mon Sep 17 00:00:00 2001 From: Filipe Varela Date: Wed, 12 Feb 2020 16:18:57 +0000 Subject: [PATCH 3/5] Pass size variables to all SVG params --- modules/search/instant-search/components/gridicon/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx index 475798737d54..cfebf579dd64 100644 --- a/modules/search/instant-search/components/gridicon/index.jsx +++ b/modules/search/instant-search/components/gridicon/index.jsx @@ -166,8 +166,8 @@ class Gridicon extends Component { className={ iconClass } height={ size } onClick={ this.props.onClick } - style={ { height: 24, width: 24 } } - viewBox="0 0 24 24" + style={ { height: size, width: size } } + viewBox={ '0 0 ' + size + ' ' + size } width={ size } xmlns="http://www.w3.org/2000/svg" > From 2ac9ebc82a2dbadf232c53789f698bc8b6ae8503 Mon Sep 17 00:00:00 2001 From: Filipe Varela Date: Wed, 12 Feb 2020 16:19:10 +0000 Subject: [PATCH 4/5] Increase icon size to 28px --- modules/search/instant-search/components/search-box.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/search/instant-search/components/search-box.jsx b/modules/search/instant-search/components/search-box.jsx index 4b270f3ddbe7..2e4911c64445 100644 --- a/modules/search/instant-search/components/search-box.jsx +++ b/modules/search/instant-search/components/search-box.jsx @@ -46,7 +46,7 @@ const SearchBox = props => { { props.showLogo && (
- +
) } Date: Wed, 12 Feb 2020 16:19:24 +0000 Subject: [PATCH 5/5] Adjust padding around the icon --- modules/search/instant-search/components/search-box.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss index 3c6992cbc499..a9fd01651a06 100644 --- a/modules/search/instant-search/components/search-box.scss +++ b/modules/search/instant-search/components/search-box.scss @@ -24,7 +24,7 @@ input.jetpack-instant-search__box-input.search-field, border-color: lightgray; border-right: none; border-top-right-radius: 0; - padding: 1.2rem 1rem; + padding: 1rem 1.5rem; } input.jetpack-instant-search__box-input.search-field {