feat(js): introduce Autocomplete Touch

[francoischalifour]

This introduces a brand new Autocomplete experience on touch devices (mobiles, tablets, etc.). This new experience is available via a media query so that it matches when it's triggered given your website requirements.

Overview

Problem statement

Panel-based autocomplete experiences work well on desktop, but not on mobile. They're hard to design correctly and don't reduce the cognitive load of searching on your mobile.

Autocomplete should fallback to a native mobile experience à la DocSearch (i.e., modal-based search) on mobile and touch devices.

This solution

When a certain breakpoint is exceeded, we turn the experience into Touch. This turns the regular search input into a search button that when clicked, opens the Autocomplete modal full screen.

Additional features:

• The enterKeyHint input value reflects if the selected item is a link

Success criteria

The criteria that must be met in order to consider this project a success.

• Autocomplete should toggle to a Touch experience when using a touch device to better match users expectations on these devices
• Developers shouldn't have to think about this API, except if it needs to be accurately integrated on their app (match their existing breakpoints, media queries, design, etc.)

User stories

How the product should work for various user types.

User 1: Desktop

• I open the website
• I use the standard version of Autocomplete because I have no touch screen

User 2: Desktop on small screen

• I open the website
• I use the standard version of Autocomplete because I have no touch screen

User 3: Tablet

• I open the website
• I click on the search button
• Autocomplete opens in a modal screen

User 4: Mobile

• I open the website
• I click on the search button
• Autocomplete opens in a full-screen modal

Designs

Here are are few designs used as inspiration.

Siri

Google

Preview

Here's the minimal design of this implementation (will be revisited with the Classic Theme).

Here's a dynamic preview demonstrating our Reactive API:

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9e64ee7:

Sandbox	Source
@algolia/js-example	Configuration
@algolia/react-renderer-example	Configuration

[francoischalifour]

Merging to release to test in different projects. Feel free to review still.