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.

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

Instant Search: add basic layout for product results #14017

Merged
merged 1 commit into from
Nov 12, 2019

Conversation

bluefuton
Copy link
Contributor

@bluefuton bluefuton commented Nov 12, 2019

Changes proposed in this Pull Request:

Add the absolute basics for product result layout. One column for mobile, three columns everywhere else.

Screen Shot 2019-11-12 at 15 07 03

Screen Shot 2019-11-12 at 15 06 56

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

  • No - it's part of the Instant Search prototype and merges into instant-search-master.

Testing instructions:

Follow the setup instructions in https://github.com/Automattic/jetpack/blob/instant-search-master/modules/search/instant-search/README.md.

Check the results at different breakpoints. Example query: /?s=card&blog_id=84860689&result_format=product

Proposed changelog entry for your changes:

  • Not required.
@bluefuton bluefuton added [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Feature] Search For all things related to Search Instant Search labels Nov 12, 2019
@bluefuton bluefuton requested a review from a team as a code owner November 12, 2019 02:12
@bluefuton bluefuton self-assigned this Nov 12, 2019
@bluefuton bluefuton removed the request for review from a team November 12, 2019 02:15
Copy link
Member

@gibrown gibrown left a comment

Choose a reason for hiding this comment

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

WFM and minimal results still do as well. Testing on mobile makes everything feel so broken. :)

@bluefuton bluefuton merged commit f5fe499 into instant-search-master Nov 12, 2019
@bluefuton bluefuton deleted the update-product-result-columns branch November 12, 2019 20:24
@matticbot matticbot added Touches WP.com Files [Status] Needs Changelog and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Nov 12, 2019
gibrown pushed a commit that referenced this pull request Dec 2, 2019
gibrown pushed a commit that referenced this pull request Dec 2, 2019
jsnmoon added a commit that referenced this pull request Feb 12, 2020
* 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
* 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
Labels
[Feature] Search For all things related to Search Touches WP.com Files
3 participants