Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Instant Search: Integrate customizer options #14427

Merged
merged 3 commits into from
Jan 22, 2020
Merged

Instant Search: Integrate customizer options #14427

merged 3 commits into from
Jan 22, 2020

Conversation

jsnmoon
Copy link
Member

@jsnmoon jsnmoon commented Jan 21, 2020 •
edited
Loading

Changes proposed in this Pull Request:

  • Injects server-side values into JavaScript via wp_add_inline_script instead of wp_localize_script (reason)
  • Fixes value casting for overlay options in PHP
  • Fixes infinite scroll functionality with overlay
  • Integrates applicable customizer values into the instant search application. (showLogo, showPoweredBy have not yet been integrated. colorTheme has been partially integrated.)

Is this a new feature or does it add/remove features to an existing part of Jetpack?

  • Not applicable.

Testing instructions

  1. Follow these setup instructions to set up Jetpack Instant Search on your site.
  2. Go to the Customizer (/wp-admin/customize.php) and navigate to Jetpack Search.
  3. Try changing various values present in this section (e.g. Background Opacity, Close Button Color, Infinite Scroll, etc.).

Proposed changelog entry for your changes:

  • None

@jsnmoon jsnmoon self-assigned this Jan 21, 2020
@jsnmoon jsnmoon force-pushed the add/instant-search-customizer-integration branch 2 times, most recently from fa7e4d0 to bdd88d9 Compare January 21, 2020 23:42
@jsnmoon jsnmoon force-pushed the add/instant-search-customizer-integration branch from bdd88d9 to 8567cb6 Compare January 21, 2020 23:44
@jsnmoon jsnmoon added [Status] Needs Review To request a review from Crew. Label will be renamed soon. Instant Search [Feature] Search For all things related to Search labels Jan 22, 2020
@jsnmoon jsnmoon marked this pull request as ready for review January 22, 2020 00:30
@jsnmoon jsnmoon requested a review from a team as a code owner January 22, 2020 00:30
@jsnmoon jsnmoon removed the request for review from a team January 22, 2020 00:30
@bluefuton
Copy link
Contributor

Code looks good 👍

colorTheme has been partially integrated

Is this for light/dark? Do we just need to define styles for the dark version?

On the opacity front, should we offer a restricted range for opacity rather than letting the user set any value? The overlay is hard to use at anything below about 75% on the current slider.

Screen Shot 2020-01-22 at 14 33 50

@keoshi
Copy link
Contributor

keoshi commented Jan 22, 2020

This is so awesome! I'll test this morning and will create a separate PR to add the dark theme styling.

On the opacity front, should we offer a restricted range for opacity rather than letting the user set any value? The overlay is hard to use at anything below about 75% on the current slider.

That's a really great point. I'd even restrict it above that value — say at the 100%-90/85% range — to ensure accessibility is not impacted on customers' sites.

keoshi
keoshi approved these changes Jan 22, 2020
View reviewed changes
Copy link
Contributor

@keoshi keoshi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works beautifully in my testing!

@keoshi keoshi mentioned this pull request Jan 22, 2020
Merged
@keoshi
Copy link
Contributor

keoshi commented Jan 22, 2020

will create a separate PR to add the dark theme styling

PR for dark theme styles created here: #14429

@gibrown
Copy link
Member

gibrown commented Jan 22, 2020

@jsnmoon you can add an adjustment to the range at this line: https://github.com/Automattic/jetpack/blob/instant-search-master/modules/search/class-jetpack-search-customize.php#L90

@jsnmoon jsnmoon added this to the InstantSearchLaunch milestone Jan 22, 2020
@jsnmoon jsnmoon merged commit 92a6169 into instant-search-master Jan 22, 2020
@jsnmoon jsnmoon deleted the add/instant-search-customizer-integration branch January 22, 2020 22:28
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Jan 22, 2020
@jsnmoon jsnmoon added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it and removed [Status] Needs Changelog labels Jan 22, 2020
jsnmoon added a commit that referenced this pull request Feb 12, 2020
@jsnmoon @bluefuton
@gibrown @keoshi
Instant Search: Update prototype with overlay design (#14550)
9aee29d 
* Instant Search: add label and button to search box (#13875)
* Add label and button to search box and convert to functional component
* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)
* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)
* Add product search result component
* Refactor renderResult into component
* Convert SearchResult to stateless functional component
* Move comments to new shared component
* Move Tracks out to common SearchResult
* Request additional fields for product results
* Correct field names and remove ratings for now
* Basic styling of cards with images
* Add price where available
* Read result_format from the query string
* Use ordered list
* Style cleanup
* Minor cleanup
* Remove resultFormat from component state
* SearchResults component cleanup
* Standardise class names
* Validate result format before using as CSS class

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)
* Add PhotonImage component
* Bump default dimensions to 300x300
* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: add label and button to search box (#13875)

* Add label and button to search box and convert to functional component

* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)

* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)
* Add product search result component
* Refactor renderResult into component
* Convert SearchResult to stateless functional component
* Move comments to new shared component
* Move Tracks out to common SearchResult
* Request additional fields for product results
* Correct field names and remove ratings for now
* Basic styling of cards with images
* Add price where available
* Read result_format from the query string
* Use ordered list
* Style cleanup
* Remove resultFormat from component state
* SearchResults component cleanup
* Standardise class names
* Validate result format before using as CSS class

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)
* Add PhotonImage component
* Bump default dimensions to 300x300
* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: default to query string in `getResults()` (#13995)
* Instant Search: use default values for getting results to avoid duplication
* getResults: default to empty object

* Instant Search: add search form to main content area (#14142)
* Split search form out of widget component so it can be reused in the main search area
* Include search form in main content area
* Move sort wrapper into component and improve class name
* Give sort component a more sensible name
* Keep search form in place when there are no results
* Just return null when there isn't a query
* Combine pagination conditionals into one clause
* Drop SearchResultsEmpty component
* Tidy pagination logic
* Pass all props down to SearchForm

* Instant Search: add filter icon toggle (#14176)
* Add filter icon
* Simple show/hide toggle
* Make it an interactive element
* Add aria-hidden to gridicon

* Instant Search: Improve UX for offline network state (#14189)
* Fix invisible space breaking date layout
* Restore info Gridicon
* Add warning notice component
* Check offline state before using short term cache
* Inject cache state variables into response data
* Show “cached results” notice when the user is offline
* Catch connectivity error and notify the user
* Show correct number of results when offline
* Hide load more button when offline
* Wrap new copy in translation calls

* Instant Search: try using an overlay (#14205)
* Try the overlay (Hotel California edition)
* Add button to close overlay
* Always display search form attached to search results
* Add a note about portaled search inputs
* Use showResults instead of using showOverlay value
* Add a large z-index and increase opacity
* Simplify SearchApp, trigger overlay on input focus
* Disable WordPress Search for Instant Search
* Revert "Disable WordPress Search for Instant Search"
* Add jetpack namespace to translation
* Use the searchInputSelector
* Add missing quote

* Instant Search: setup preact-testing-library (#13950)
* Add preact-testing-library
* Add instant-search dir to existing Jest config
* First attempt at test
* Create 'yarn test-search'
* Add jsx pragma
* Enable test and added dependency docblocks
* Remove rogue Slack package

* Instant Search: Port bug fixes from #14247
* Add basic build process to README.

* Instant Search: trigger overlay on submit (#14248)
* Remove focus event listeners
* Respond to submit rather than focus
* Allow enter key to launch overlay
* Reflect widget search input changes in query string
* Close overlay with Esc key
* Reflect query string change in search widget input
* Make sure the sort options match
* Try grabbing focus in getResults
* Remove focus code
* Remove grabFocus (no longer in use)
* Handle overlay escape key with useEffect rather than converting to Component
* Move closeOnEscapeKey out of render

* Instant Search: Add sidebar widget area (#14283)
* Fix linting violations by changing `date` invocations to `gmdate`
* Add sidebar widget area
* Add SearchSidebar component
* Integrate SearchSidebar into SearchResults
* Implement Overlay animation from design prototype

* Instant Search: refactor search php for the different experiences (#14284)
* refactor php to extract all instant search code
* add customizer for the overlay
* add running the search query on the backend to display filters when the page loads.

* Instant Search: fix Esc key behaviour (#14312)
* Instant Search: prevent Esc from opening overlay
* Use isVisible rather than shouldShowOverlay

* Instant Search: Add search filtering inside overlay (#14319)
* Add SearchFilters above SearchSidebar

* Instant Search: Add a button to clear applied filters (#14324)
  * Add function to clear filter query values
  * Fix class names for elements in SearchFilter
  * Add “Clear Filters” button

* Instant search: introduce overlay from right (#14339)
* Introduce overlay from right
* Updating overlay offset values
* Changes units from `vh` to `vw`.
* Updates value from `200` to `100`, as [mentioned here](#14320 (comment)).

* Use the posts_per_page setting to decide how many posts to retrieve (#14360)

* Instant Search: Use widgets inside overlay for filtering (#14374)
* Add search filter portaling inside overlay sidebar
* Update readme with new testing instructions

* Instant Search: update overlay styles (#14379)
* Make search input as large as possible
* Remove opinionated styles
* Add more margin to the filter icon
* Add screen reader text for the search box
* Change order of date element
* Change date position
* Clean up styles
* Update style for comments in search results
* Fix name of CSS property
* Make search result title class more specific, Also reorders styles
* Remove extra screen reader text #14379 (comment)

* Instant Search: Fix taxonomy name compilation bug (#14408)

* Instant Search: Fix date formatting issue for filters (#14409)

* Instant Search: Integrate customizer options (#14427)
* Integrate customizer options for search overlay
* Fix infinite scroll functionality

* Update spacing on offline notice (#14419)

* Instant Search: add dark theme styles (#14429)
* Update styles for base overlay
* Update styles for search results

* Fix filter toggle and integrate with widget area (#14451)

* Instant Search: Improve search form detection (#14474)

* Instant Search: Prevent body scroll with overlay open (#14478)

* Instant Search: Move focus into overlay input (#14477)
* Move focus to and from overlay
* Use useRef and event listeners for focus shifting

* Instant Search: use taxonomy name rather than slug for filters (#14437)
* Fix display of category filters
* Update buildFilterObject()

* Fix filter formatting in Zerif Lite (#14493)

* Instant Search: switch to use .slug_slash_name for displaying custom taxonomies, tags and categories (#14492)
* Switch to use .slug_slash_name for taxonomies, tags and categories
* Use slug in the query, and name for display

* Instant Search: Hotfix body scrolling behavior

* Instant Search: Apply customizer changes without page reload (#14504)

* Instant Search: Update mobile structure (#14423)
* Add cross gridicon
* Replace close button label by a gridicon
* Change position of close button
* Update z-index stacking order, prevents sidebar to be in front of the close button
* Reorder CSS properties
* Add medium break point at 768px
* Add mobile styles for filters popover
* Change how transparency is set on the overlay
* Update break-small to break-medium
* Add styles for smaller close button on mobile devices
* Add arrow element to popover
* Remove styles that are out of place
* Update search results styling
* Add popover styles
* Update filter icon margins
* Show sidebar filters up to 768px, see #14423 (review)
* Bring up the opacity on the arrow border
* Reduce side padding on small screens
* Move margin to label span instead of select element

* Instant Search: Restore initial href upon closing overlay (#14518)
* Restore initial href when closing overlay
* Fix incorrect inline style removal

* Instant Search: Restore focus to activeElement (#14522)

* Search: Front end search filters open overlay (#14448)
* Refactor filter display for front end
* Remove rendering filters in the overlay
* Front end filters open the overlay

* Instant search: add "powered by Jetpack" message (#14519)
* Show JetpackColophon when setting is activated
* Translate text
* Added logo and styles
* Style tweaks
* Link to jetpack.com/search
* Add colophon to mobile filters
* Margin tweak

* Instant Search: Clear search and filter queries when necessary (#14533)
* Clear search and filter queries if necessary
* Improve initialHref restoration function
* Create a separate handler for popstate events

* Instant Search: Refine TrainTracks integration (#14587)

* Instant Search: Fix broken dates in iOS Chrome (#14586)

* Instant Search: Update list of widgets passed to JS client (#14596)
* Only return widgets inside the overlay sidebar
* Remove overlay sidebar membership check in JS

* Instant Search: Escape wp_json_encode

* Instant Search: Add missing translation calls

* Update escaping from code review.

* Instant Search: Fix unit tests

* Instant Search: Fix ESLint errors

* Instant Search: Add files to PHPCS whitelist

Co-authored-by: Chris R <chris@bluefuton.com>
Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com>
Co-authored-by: Filipe Varela <keoshi@keoshi.com>
mdbitz pushed a commit that referenced this pull request Feb 24, 2020
@jsnmoon @bluefuton
@gibrown @keoshi @skjaini
Instant Search: Polish search interface UX (#14762)
f3b3922 
* Instant Search: add label and button to search box (#13875)

* Add label and button to search box and convert to functional component

* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)

* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)

* [not verified] Add product search result component

* [not verified] Refactor renderResult into component

* [not verified] Convert SearchResult to stateless functional component

* [not verified] Move comments to new shared component

* [not verified] Move Tracks out to common SearchResult

* [not verified] Request additional fields for product results

* Correct field names and remove ratings for now

* Basic styling of cards with images

* Add price where available

* Read result_format from the query string

* Use ordered list

* Style cleanup

* Minor cleanup

* Remove resultFormat from component state

* SearchResults component cleanup

* Standardise class names

* Validate result format before using as CSS class

* Address review nits

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)

* Add PhotonImage component

* Bump default dimensions to 300x300

* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: add label and button to search box (#13875)

* Add label and button to search box and convert to functional component

* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)

* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)

* [not verified] Add product search result component

* [not verified] Refactor renderResult into component

* [not verified] Convert SearchResult to stateless functional component

* [not verified] Move comments to new shared component

* [not verified] Move Tracks out to common SearchResult

* [not verified] Request additional fields for product results

* Correct field names and remove ratings for now

* Basic styling of cards with images

* Add price where available

* Read result_format from the query string

* Use ordered list

* Style cleanup

* Minor cleanup

* Remove resultFormat from component state

* SearchResults component cleanup

* Standardise class names

* Validate result format before using as CSS class

* Address review nits

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)

* Add PhotonImage component

* Bump default dimensions to 300x300

* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: default to query string in `getResults()` (#13995)

* Instant Search: use default values for getting results to avoid duplication

* getResults: default to empty object

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Instant Search: add search form to main content area (#14142)

* Split search form out of widget component so it can be reused in the main search area

* Include search form in main content area

* Move sort wrapper into component and improve class name

* Give sort component a more sensible name

* Keep search form in place when there are no results

* Just return null when there isn't a query

* Combine pagination conditionals into one clause

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Drop SearchResultsEmpty component

* Tidy pagination logic

* Pass all props down to SearchForm

* Instant Search: add filter icon toggle (#14176)

* Add filter icon

* Simple show/hide toggle

* Make it an interactive element

* Add aria-hidden to gridicon

* Instant Search: Improve UX for offline network state (#14189)

* Fix invisible space breaking date layout
* Restore info Gridicon
* Add warning notice component
* Check offline state before using short term cache
* Inject cache state variables into response data
* Show “cached results” notice when the user is offline
* Catch connectivity error and notify the user
* Show correct number of results when offline
* Hide load more button when offline
* Wrap new copy in translation calls

* Instant Search: try using an overlay (#14205)

* Try the overlay (Hotel California edition)

* Add button to close overlay

* Always display search form attached to search results

* Add a note about portaled search inputs

* Use showResults instead of using showOverlay value

* Add a large z-index and increase opacity

* Simplify SearchApp, trigger overlay on input focus

* Disable WordPress Search for Instant Search

* Revert "Disable WordPress Search for Instant Search"

This reverts commit 65b7dcb.

* Add jetpack namespace to translation

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Use the searchInputSelector

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Add missing quote

* Instant Search: setup preact-testing-library (#13950)

* Add preact-testing-library

* Rebase

* Add instant-search dir to existing Jest config

* First attempt at test

* Tidying

* Create 'yarn test-search'

* Remove package-lock.json

* Add jsx pragma

* [not verified]

* Enable test and added dependency docblocks

* Remove rogue Slack package

* Instant Search: Port bug fixes from #14247

* Add basic build process to README.

* Instant Search: trigger overlay on submit (#14248)

* Remove focus event listeners

* Respond to submit rather than focus

* Allow enter key to launch overlay

* Reflect widget search input changes in query string

* Close overlay with Esc key

* Reflect query string change in search widget input

* Make sure the sort options match

* Try grabbing focus in getResults

* Remove focus code

* Remove grabFocus (no longer in use)

* Handle overlay escape key with useEffect rather than converting to Component

* Move closeOnEscapeKey out of render

* Instant Search: Add sidebar widget area (#14283)

* Fix linting violations by changing `date` invocations to `gmdate`
* Add sidebar widget area
* Add SearchSidebar component
* Integrate SearchSidebar into SearchResults
* Implement Overlay animation from design prototype

* Instant Search: refactor search php for the different experiences (#14284)

- refactor php to extract all instant search code
- add customizer for the overlay
- add running the search query on the backend to display filters when the page loads.

* Instant Search: fix Esc key behaviour (#14312)

* Instant Search: prevent Esc from opening overlay

* Use isVisible rather than shouldShowOverlay

* Instant Search: Add search filtering inside overlay (#14319)

* Add SearchFilters above SearchSidebar
* Instant Search: Add a button to clear applied filters (#14324)
  * Add function to clear filter query values
  * Fix class names for elements in SearchFilter
  * Add “Clear Filters” button

* Instant search: introduce overlay from right (#14339)

* Introduce overlay from right

* Updating overlay offset values

- Changes units from `vh` to `vw`.
- Updates value from `200` to `100`, as [mentioned here](#14320 (comment)).

Co-authored-by: Filipe Varela <keoshi@keoshi.com>

* Use the posts_per_page setting to decide how many posts to retrieve (#14360)

* Instant Search: Use widgets inside overlay for filtering (#14374)

* Add search filter portaling inside overlay sidebar
* Update readme with new testing instructions

* Instant Search: update overlay styles (#14379)

* Make search input as large as possible

* Remove opinionated styles

* Add more margin to the filter icon

* Add screen reader text for the search box

* Change order of date element

* Change date position

* Clean up styles

* Update style for comments in search results

* Fix name of CSS property

* Make search result title class more specific

Also reorders styles

See: #14379 (comment)

* Remove extra screen reader text

See: #14379 (comment)

* Instant Search: Fix taxonomy name compilation bug (#14408)

* Instant Search: Fix date formatting issue for filters (#14409)

* Instant Search: Integrate customizer options (#14427)

* Integrate customizer options for search overlay
* Fix infinite scroll functionality

* Update spacing on offline notice (#14419)

* Instant Search: add dark theme styles (#14429)

* Update styles for base overlay
* Update styles for search results

* Fix filter toggle and integrate with widget area (#14451)

* Instant Search: Improve search form detection (#14474)

* Instant Search: Prevent body scroll with overlay open (#14478)

* Instant Search: Move focus into overlay input (#14477)

* Move focus to and from overlay
* Use useRef and event listeners for focus shifting

Co-authored-by: Chris R <chris@bluefuton.com>

* Instant Search: use taxonomy name rather than slug for filters (#14437)

* Instant Search: use taxonomy name rather than slug

* Fix display of category filters

* Update buildFilterObject()

* Fix filter formatting in Zerif Lite (#14493)

* Instant Search: switch to use .slug_slash_name for displaying custom taxonomies, tags and categories (#14492)

* Switch to use .slug_slash_name for taxonomies, tags and categories

* Use slug in the query, and name for display

* Instant Search: Hotfix body scrolling behavior

* Instant Search: Apply customizer changes without page reload (#14504)

* Instant Search : Update mobile structure (#14423)

* Add cross gridicon

* Replace close button label by a gridicon

* Change position of close button

* Update z-index stacking order

Prevents sidebar to be in front of the close button

* Reorder CSS properties

* Add medium break point at 768px

* Add mobile styles for filters popover

* Change how transparency is set on the overlay

* Update break-small to break-medium

* Add styles for smaller close button on mobile devices

* Add arrow element to popover

* Remove styles that are out of place

Given the markup has changed in #14477, these styles need to be applied elsewhere

* Update search results styling

* Add popover styles

* Update filter icon margins

* Show sidebar filters up to 768px

See: #14423 (review)

* Bring up the opacity on the arrow border

* Reduce side padding on small screens

* Move margin to label span instead of select element

* Instant Search: Restore initial href upon closing overlay (#14518)

* Restore initial href when closing overlay
* Fix incorrect inline style removal

* Instant Search: Restore focus to activeElement (#14522)

* Search: Front end search filters open overlay (#14448)

- Refactor filter display for front end
- Remove rendering filters in the overlay
- Front end filters open the overlay

* Instant search: add "powered by Jetpack" message (#14519)

* Show JetpackColophon when setting is activated

* Translate text

* Added logo and styles

* Style tweaks

* Link to jetpack.com/search

* Add colophon to mobile filters

* Margin tweak

* Instant Search: Clear search and filter queries when necessary (#14533)

* Clear search and filter queries if necessary
* Improve initialHref restoration function
* Create a separate handler for popstate events

* Instant Search: Refine TrainTracks integration (#14587)

* Instant Search: Fix broken dates in iOS Chrome (#14586)

* Instant Search: Update list of widgets passed to JS client (#14596)

* Only return widgets inside the overlay sidebar
* Remove overlay sidebar membership check in JS

* Instant Search: Escape wp_json_encode

* Instant Search: Add missing translation calls

* Update escaping from code review.

* Instant Search: Fix unit tests

* Instant Search: Fix ESLint errors

* Instant Search: Add files to PHPCS whitelist

* Instant Search: Add Jetpack Search gridicon (#14629)

* Add Jetpack Search gridicon
* Update search icon
* Pass size variables to all SVG params
* Increase icon size to 28px
* Adjust padding around the icon

Co-authored-by: Filipe Varela <keoshi@keoshi.com>

* Instant Search: Hotfix customizer highlight color

* Instant Search: Update TrainTracks to add session_id event property (#14655)

* Ensures widgets included in the overlay are full width (#14670)

* Prevents the load more button from being cut off in some themes (#14669)

Adds margin bottom to the primary area of the overlay, which solves this problem but is also good practice to ensure search results are readable until the very last one.

* Instant Search: remove date from search results (#14665)

* Remove search result date component
* Remove date from minimal search results
* Remove styles associated with date

* Add locale prefix to jetpack.com link. (#14637)

* Instant Search: Address review feedback from master merge (#14659)

* Address straightforward review feedback
* Update transient cache name
* Use add_query_arg
* Improve user agent with WP/JP versions
* Fix undefined index notices
* Use a8c/color-studio for SCSS color variables

* Hot fix for search css not building

* Pass locale props to JetpackColophon on mobile (#14709)

* Instant Search: update input box and icon styles (#14664)

* Fix Gridicon's viewBox values

We shouldn't be messing with the values in viewBox at all since all icons have a baseline of 24 x 24 px. While sizing changes, their set up should be consistent.

Reported in: #14629 (comment)

Thanks for catching this @jsnmoon !

* Revert search icon back to 24px

* Update syling of main search box

Complementary to #14661

* Remove magnifying glass logo options from the Customizer

* Remove magnifying glass options from live reload

* Stop passing unused showLogo option

* Add generic search icon, reorder icons alphabetically

* Rework markup on the search box

- Adds Gridicon and input inside label.
- Moves screen reader text to its own span.
- Uses generic search icon.

* Updates styling for the search box and its elements

* [not verified] Remove magnifying glass from overlay options

* Fix transition focus bug

Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Instant Search: change visual on close button (#14680)

* Change close button to a div

* Update close button styling

* Remove Close Button from the Customizer

* Remove close button options from Customizer live reload

* [not verified] Remove close button from overlay options

* [not verified] Revert change of order class comment

* Remove close button from overlay.jsx

* Add close button to search-results.jsx

* Change position for the close button

* Change theme styling for the close button

* Hook closeOverlay prop in SearchResults

* Use anchor instead of div for close button

Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Instant Search: Hide mobile filters after applying filters (#14691)

* Handle case where locale is unavailable
* Hide mobile filters upon filter selection
* Hide popover upon clearing filters
* Hide popover upon changing sort

* Instant Search: Properly handle numerical searches (#14692)

* Correctly handle numerical query values
* Exclude Instant Search inputs from being selected

* Instant Search: add more styling specificity to search input (#14661)

* Ensure there's a cross to clear search on browsers that support it

* Reduce font-size on results count text

* Make close button behave similarly on different themes

* Ensure there's a cross to clear search on browsers that support it

* Reduce font-size on results count text

* Make close button behave similarly on different themes

* Ensures the clear button is displayed in the search box

Props to @jsnmoon

* Instant Search: use link to clear filters instead of button (#14744)

* Use link for clear filters instead of a button

* Update name in CSS

* Instant Search: improve grid structure in overlay (#14745)

* Add className to label

* Ensure search box is always full-width

* Improves alignment of the layout grid

* Tweak close button position

* Instant Search: updates behavior and styling of filtering options (#14711)

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>

* Remove unused showLogo property

Co-authored-by: Chris R <chris@bluefuton.com>
Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com>
Co-authored-by: Filipe Varela <keoshi@keoshi.com>
Co-authored-by: Sampath Jaini <skjaini@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@keoshi keoshi keoshi approved these changes

@gibrown gibrown Awaiting requested review from gibrown

@bluefuton bluefuton Awaiting requested review from bluefuton

Assignees

@jsnmoon jsnmoon

Labels
[Feature] Search For all things related to Search Touches WP.com Files [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it
Projects
None yet
Milestone
Instant Search: Launch
Development

Successfully merging this pull request may close these issues.
5 participants
@jsnmoon @bluefuton @keoshi @gibrown @matticbot