feat(searchbox): implement InstantSearch.css

dev/app/builtin/stories/search-box.stories.js

@@ -14,110 +14,77 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.searchBox({
             container,
-            placeholder: 'Search for products',
-            poweredBy: true,
           })
         );
       })
     )
     .add(
-      'display loading indicator',
+      'with a custom placeholder',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.searchBox({
             container,
             placeholder: 'Search for products',
-            poweredBy: true,
-            loadingIndicator: true,
           })
         );
       })
     )
     .add(
-      'display loading indicator with a template',
+      'with autofocus',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.searchBox({
             container,
-            placeholder: 'Search for products',
-            poweredBy: true,
-            loadingIndicator: {
-              template: '⚡️',
-            },
+            autofocus: true,
           })
         );
       })
     )
     .add(
-      'with custom templates',
+      'do not display the loading indicator',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.searchBox({
             container,
-            placeholder: 'Search for products',
-            poweredBy: true,
-            magnifier: {
-              template: '<div class="ais-search-box--magnifier">🔍</div>',
-            },
-            reset: {
-              template: '<div class="ais-search-box--reset">✖️</div>',
-            },
-            templates: {
-              poweredBy: 'Algolia',
-            },
+            showLoadingIndicator: false,
           })
         );
       })
     )
     .add(
-      'search on enter',
+      'display loading indicator with a template',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.searchBox({
             container,
-            placeholder: 'Search for products',
-            poweredBy: true,
-            searchOnEnterKeyPressOnly: true,
-          })
-        );
-      })
-    )
-    .add(
-      'input with initial value',
-      wrapWithHits(container => {
-        container.innerHTML = '<input value="ok"/>';
-        const input = container.firstChild;
-        container.appendChild(input);
-        window.search.addWidget(
-          instantsearch.widgets.searchBox({
-            container: input,
+            templates: {
+              loadingIndicator: '⚡️',
+            },
           })
         );
       })
     )
     .add(
-      'with a provided input',
+      'with custom templates',
       wrapWithHits(container => {
-        container.innerHTML = '<input/>';
-        const input = container.firstChild;
-        container.appendChild(input);
         window.search.addWidget(
           instantsearch.widgets.searchBox({
-            container: input,
+            container,
+            templates: {
+              submit: '<div class="ais-search-box--magnifier">🔍</div>',
+              reset: '<div class="ais-search-box--reset">✖️</div>',
+            },
           })
         );
       })
     )
     .add(
-      'with a provided input and the loading indicator',
+      'search on enter',
       wrapWithHits(container => {
-        container.innerHTML = '<input/>';
-        const input = container.firstChild;
-        container.appendChild(input);
         window.search.addWidget(
           instantsearch.widgets.searchBox({
-            container: input,
-            loadingIndicator: true,
+            container,
+            searchAsYouType: false,
           })
         );
       })

docgen/assets/js/bindRunExamples.js

@@ -113,7 +113,6 @@ function appendDefaultSearchWidgets(index) {
     instantsearch.widgets.searchBox({
       container: `#search-box-container-${index}`,
       placeholder: "Search for products",
-      autofocus: false
     })
   );
 

docgen/src/examples/tourism/search.js

@@ -11,7 +11,7 @@ window.addEventListener('load', function() {
     instantsearch.widgets.searchBox({
       container: '#q',
       placeholder: 'Where are you going?',
-      magnifier: false
+      showSubmit: false
     })
   );
 

docgen/src/guides/v3-migration.md

@@ -51,8 +51,8 @@ search.addWidget(
       item: data => {
         data.count = 0;
         return data;
-      }
-    }
+      },
+    },
   })
 );
 ```
@@ -311,7 +311,7 @@ With the redo button:
 | ------------ | ------------ |
 | `escapeHits` | `escapeHTML` |
 
-* `escapeHTML` defaults to `true`
+- `escapeHTML` defaults to `true`
 
 #### CSS classes
 
@@ -1015,6 +1015,86 @@ Widget removed.
 </div>
 ```
 
+### SearchBox
+
+#### Options
+
+| Before                      | After                                    |
+| --------------------------- | ---------------------------------------- |
+| `poweredBy`                 | use the `poweredBy` widget               |
+| `wrapInput`                 | use the `connectSearchBox` connector     |
+| `searchOnEnterKeyPressOnly` | `searchAsYouType` (default: `true`)      |
+| `reset`                     | `showReset`                              |
+| `magnifier`                 | `showSubmit`                             |
+| `loadingIndicator`          | `showLoadingIndicator` (default: `true`) |
+
+With the drop of `wrapInput`, we decided not to accept `input`s as containers anymore. If you want complete control over the rendering, you should use the `connectSearchBox` connector.
+
+The search box does not support `powered-by`. If you're using a community plan, you need to use the `poweredBy` widget to display the Algolia logo.
+
+Configuration options for `reset`, `submit` and `loadingIndicator` have been moved to `templates` and `cssClasses`. For example, in the case of `reset`:
+
+- `reset.template` => `templates.reset`
+- `reset.cssClasses.root` => `cssClasses.reset`
+
+Finally, `autofocus` is now set to `false` by default and does not support the `"auto"` value anymore.
+
+#### CSS classes
+
+| Before                                      | After                            |
+| ------------------------------------------- | -------------------------------- |
+| `ais-search-box`                            | `ais-SearchBox`                  |
+|                                             | `ais-SearchBox-form`             |
+| `ais-search-box--input`                     | `ais-SearchBox-input`            |
+| `ais-search-box--magnifier-wrapper`         |                                  |
+| `ais-search-box--magnifier`                 | `ais-SearchBox-submit`           |
+|                                             | `ais-SearchBox-submitIcon`       |
+| `ais-search-box--reset-wrapper`             |                                  |
+| `ais-search-box--reset`                     | `ais-SearchBox-reset`            |
+|                                             | `ais-SearchBox-resetIcon`        |
+| `ais-search-box--loading-indicator-wrapper` |                                  |
+| `ais-search-box--loading-indicator`         | `ais-SearchBox-loadingIndicator` |
+|                                             | `ais-SearchBox-loadingIcon`      |
+
+#### Markup
+
+```html
+<div class="ais-SearchBox">
+  <form class="ais-SearchBox-form" novalidate>
+    <input class="ais-SearchBox-input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search for products" spellcheck="false" maxlength="512" type="search" value="" />
+    <button class="ais-SearchBox-submit" type="submit" title="Submit the search query.">
+      <svg class="ais-SearchBox-submitIcon" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 40 40">
+        <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"></path>
+      </svg>
+    </button>
+    <button class="ais-SearchBox-reset" type="reset" title="Clear the search query." hidden>
+      <svg class="ais-SearchBox-resetIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="10" height="10">
+        <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"></path>
+      </svg>
+    </button>
+    <span class="ais-SearchBox-loadingIndicator" hidden>
+      <svg width="16" height="16" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#444" class="ais-SearchBox-loadingIcon">
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(1 1)" strokeWidth="2">
+            <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 18 18"
+                to="360 18 18"
+                dur="1s"
+                repeatCount="indefinite"
+              />
+            </path>
+          </g>
+        </g>
+      </svg>
+    </span>
+  </form>
+<div>
+```
+
 ### SortBy
 
 #### Options

src/widgets/index.js

@@ -26,7 +26,7 @@ export {
 export { default as numericMenu } from './numeric-menu/numeric-menu';
 export { default as pagination } from './pagination/pagination.js';
 export { default as rangeInput } from './range-input/range-input.js';
-export { default as searchBox } from '../widgets/search-box/search-box.js';
+export { default as searchBox } from './search-box/search-box.js';
 export { default as rangeSlider } from './range-slider/range-slider.js';
 export { default as sortBy } from './sort-by/sort-by.js';
 export { default as ratingMenu } from './rating-menu/rating-menu';

src/widgets/search-box/__tests__/__snapshots__/search-box-test.js.snap

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`searchBox() markup renders correctly 1`] = `
+<div
+  class="ais-SearchBox"
+>
+  <form
+    action=""
+    class="ais-SearchBox-form"
+    novalidate=""
+  >
+    <input
+      autocapitalize="off"
+      autocomplete="off"
+      autocorrect="off"
+      class="ais-SearchBox-input"
+      placeholder=""
+      role="textbox"
+      spellcheck="false"
+      type="text"
+      value=""
+    />
+    <button
+      class="ais-SearchBox-submit"
+      title="Submit the search query"
+      type="submit"
+    >
+      <svg
+        class="ais-SearchBox-submitIcon"
+        height="10"
+        viewBox="0 0 40 40"
+        width="10"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+
+        <path
+          d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
+        />
+
+      </svg>
+    </button>
+    <button
+      class="ais-SearchBox-reset"
+      hidden=""
+      title="Clear the search query"
+      type="reset"
+    >
+      <svg
+        class="ais-SearchBox-resetIcon"
+        height="10"
+        viewBox="0 0 20 20"
+        width="10"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+
+        <path
+          d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
+        />
+
+      </svg>
+    </button>
+    <span
+      class="ais-SearchBox-loadingIndicator"
+      hidden=""
+    >
+      <svg
+        class="ais-SearchBox-loadingIcon"
+        height="16"
+        stroke="#444"
+        viewBox="0 0 38 38"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+
+        <g
+          fill="none"
+          fillrule="evenodd"
+        >
+
+          <g
+            strokewidth="2"
+            transform="translate(1 1)"
+          >
+
+            <circle
+              cx="18"
+              cy="18"
+              r="18"
+              strokeopacity=".5"
+            />
+
+            <path
+              d="M36 18c0-9.94-8.06-18-18-18"
+            >
+
+              <animatetransform
+                attributeName="transform"
+                dur="1s"
+                from="0 18 18"
+                repeatCount="indefinite"
+                to="360 18 18"
+                type="rotate"
+              />
+
+            </path>
+
+          </g>
+
+        </g>
+
+      </svg>
+    </span>
+  </form>
+</div>
+`;