feat(GeoSearch): implement InstantSearch.css

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

@@ -356,7 +356,7 @@ export default () => {
             instantsearch.widgets.geoSearch({
               googleReference: window.google,
               templates: {
-                clear: '<span>re-center</span>',
+                reset: '<span>re-center</span>',
                 toggle: '<span>Redo search when map moved</span>',
                 redo: '<span>Search this area</span>',
               },

dev/template.html

@@ -13,7 +13,7 @@
   <!-- Selectize for autocomplete example -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.min.css" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.0.0/themes/algolia.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.0/themes/algolia.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
 </head>
 

docgen/src/guides/v3-migration.md

@@ -39,6 +39,66 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 </div>
 ```
 
+### GeoSearch
+
+#### CSS classes
+
+| Before                                | After                           |
+| ------------------------------------- | ------------------------------- |
+| `ais-geo-search`                      | `ais-GeoSearch`                 |
+| `ais-geo-search--map`                 | `ais-GeoSearch-map`             |
+| `ais-geo-search--controls`            | `ais-GeoSearch-tree`            |
+| `ais-geo-search--control`             | `ais-GeoSearch-control`         |
+| `ais-geo-search--toggle-label`        | `ais-GeoSearch-label`           |
+| `ais-geo-search--toggle-label-active` | `ais-GeoSearch-label--selected` |
+| `ais-geo-search--toggle-inpit`        | `ais-GeoSearch-input`           |
+| `ais-geo-search--redo`                | `ais-GeoSearch-redo`            |
+|                                       | `ais-GeoSearch-redo--disabled`  |
+| `ais-geo-search--clear`               | `ais-GeoSearch-reset`           |
+
+#### Markup
+
+With the control element:
+
+```html
+<div class="ais-GeoSearch">
+  <div class="ais-GeoSearch-map">
+    <!-- Map element here -->
+  </div>
+  <div class="ais-GeoSearch-tree">
+    <div class="ais-GeoSearch-control">
+      <label class="ais-GeoSearch-label">
+        <input class="ais-GeoSearch-input" type="checkbox">
+        Search as I move the map
+      </label>
+    </div>
+    <button class="ais-GeoSearch-reset">
+      Clear the map refinement
+    </button>
+  </div>
+</div>
+```
+
+With the redo button:
+
+```html
+<div class="ais-GeoSearch">
+  <div class="ais-GeoSearch-map">
+    <!-- Map element here -->
+  </div>
+  <div class="ais-GeoSearch-tree">
+    <div class="ais-GeoSearch-control">
+      <button class="ais-GeoSearch-redo">
+        Redo search here
+      </button>
+    </div>
+    <button class="ais-GeoSearch-reset">
+      Clear the map refinement
+    </button>
+  </div>
+</div>
+```
+
 ### Hits
 
 #### Options

src/components/GeoSearchControls/GeoSearchControls.js

@@ -22,11 +22,10 @@ const GeoSearchControls = ({
       <div className={cssClasses.control}>
         {isRefineOnMapMove || !hasMapMoveSinceLastRefine ? (
           <GeoSearchToggle
-            classNameLabel={cx(
-              cssClasses.toggleLabel,
-              isRefineOnMapMove && cssClasses.toggleLabelActive
-            )}
-            classNameInput={cssClasses.toggleInput}
+            classNameLabel={cx(cssClasses.label, {
+              [cssClasses.selectedLabel]: isRefineOnMapMove,
+            })}
+            classNameInput={cssClasses.input}
             checked={isRefineOnMapMove}
             onToggle={onRefineToggle}
           >
@@ -56,7 +55,9 @@ const GeoSearchControls = ({
       !isRefineOnMapMove && (
         <div className={cssClasses.control}>
           <GeoSearchButton
-            className={cssClasses.redo}
+            className={cx(cssClasses.redo, {
+              [cssClasses.disabledRedo]: !hasMapMoveSinceLastRefine,
+            })}
             disabled={!hasMapMoveSinceLastRefine}
             onClick={onRefineClick}
           >
@@ -71,20 +72,21 @@ const GeoSearchControls = ({
 
     {enableClearMapRefinement &&
       isRefinedWithMap && (
-        <GeoSearchButton className={cssClasses.clear} onClick={onClearClick}>
-          <Template {...templateProps} templateKey="clear" rootTagName="span" />
+        <GeoSearchButton className={cssClasses.reset} onClick={onClearClick}>
+          <Template {...templateProps} templateKey="reset" rootTagName="span" />
         </GeoSearchButton>
       )}
   </div>
 );
 
 const CSSClassesPropTypes = PropTypes.shape({
   control: PropTypes.string.isRequired,
-  toggleLabel: PropTypes.string.isRequired,
-  toggleLabelActive: PropTypes.string.isRequired,
-  toggleInput: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  selectedLabel: PropTypes.string.isRequired,
+  input: PropTypes.string.isRequired,
   redo: PropTypes.string.isRequired,
-  clear: PropTypes.string.isRequired,
+  disabledRedo: PropTypes.string.isRequired,
+  reset: PropTypes.string.isRequired,
 });
 
 GeoSearchControls.propTypes = {

src/components/GeoSearchControls/__tests__/GeoSearchControls-test.js

@@ -5,11 +5,12 @@ import GeoSearchControls from '../GeoSearchControls';
 describe('GeoSearchControls', () => {
   const CSSClassesDefaultProps = {
     control: 'control',
-    toggleLabel: 'toggleLabel',
-    toggleLabelActive: 'toggleLabelActive',
-    toggleInput: 'toggleInput',
+    label: 'label',
+    selectedLabel: 'label-selected',
+    input: 'input',
     redo: 'redo',
-    clear: 'clear',
+    disabledRedo: 'redo-disabled',
+    reset: 'reset',
   };
 
   const defaultProps = {
@@ -213,7 +214,7 @@ describe('GeoSearchControls', () => {
       expect(wrapper).toMatchSnapshot();
     });
 
-    it('expect to call onClearClick when the clear button is clicked', () => {
+    it('expect to call onClearClick when the reset button is clicked', () => {
       const props = {
         ...defaultProps,
         enableRefineControl: false,
@@ -226,7 +227,7 @@ describe('GeoSearchControls', () => {
 
       expect(props.onClearClick).not.toHaveBeenCalled();
 
-      wrapper.find('.clear').simulate('click');
+      wrapper.find('.reset').simulate('click');
 
       expect(props.onClearClick).toHaveBeenCalled();
     });

src/components/GeoSearchControls/__tests__/__snapshots__/GeoSearchControls-test.js.snap

@@ -7,13 +7,13 @@ exports[`GeoSearchControls Clear button expect to not render the button when the
 exports[`GeoSearchControls Clear button expect to render the button when the refinement come from the map 1`] = `
 <div>
   <GeoSearchButton
-    className="clear"
+    className="reset"
     disabled={false}
     onClick={[Function]}
   >
     <Component
       rootTagName="span"
-      templateKey="clear"
+      templateKey="reset"
     />
   </GeoSearchButton>
 </div>
@@ -27,7 +27,7 @@ exports[`GeoSearchControls Control disabled expect to render the button disabled
     className="control"
   >
     <GeoSearchButton
-      className="redo"
+      className="redo redo-disabled"
       disabled={true}
       onClick={[Function]}
     >
@@ -85,8 +85,8 @@ exports[`GeoSearchControls Control enabled expect to render the toggle checked w
   >
     <GeoSearchToggle
       checked={true}
-      classNameInput="toggleInput"
-      classNameLabel="toggleLabel toggleLabelActive"
+      classNameInput="input"
+      classNameLabel="label label-selected"
       onToggle={[Function]}
     >
       <Component
@@ -105,8 +105,8 @@ exports[`GeoSearchControls Control enabled expect to render the toggle checked w
   >
     <GeoSearchToggle
       checked={true}
-      classNameInput="toggleInput"
-      classNameLabel="toggleLabel toggleLabelActive"
+      classNameInput="input"
+      classNameLabel="label label-selected"
       onToggle={[Function]}
     >
       <Component
@@ -125,8 +125,8 @@ exports[`GeoSearchControls Control enabled expect to render the toggle unchecked
   >
     <GeoSearchToggle
       checked={false}
-      classNameInput="toggleInput"
-      classNameLabel="toggleLabel"
+      classNameInput="input"
+      classNameLabel="label"
       onToggle={[Function]}
     >
       <Component

src/widgets/geo-search/GeoSearchRenderer.js

@@ -89,9 +89,9 @@ const renderer = (
     mapElement.className = cssClasses.map;
     rootElement.appendChild(mapElement);
 
-    const controlElement = document.createElement('div');
-    controlElement.className = cssClasses.controls;
-    rootElement.appendChild(controlElement);
+    const treeElement = document.createElement('div');
+    treeElement.className = cssClasses.tree;
+    rootElement.appendChild(treeElement);
 
     renderState.mapInstance = new googleReference.maps.Map(mapElement, {
       mapTypeControl: false,
@@ -233,7 +233,7 @@ const renderer = (
       onClearClick={clearMapRefinement}
       templateProps={renderState.templateProps}
     />,
-    container.querySelector(`.${cssClasses.controls}`)
+    container.querySelector(`.${cssClasses.tree}`)
   );
 };
 

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

@@ -1,21 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`GeoSearch expect to render with custom classNames 1`] = `"<div class=\\"ais-geo-search custom-root\\"><div class=\\"ais-geo-search--map custom-map\\"></div><div class=\\"ais-geo-search--controls custom-controls\\"></div></div>"`;
+exports[`GeoSearch expect to render 1`] = `"<div class=\\"ais-GeoSearch\\"><div class=\\"ais-GeoSearch-map\\"></div><div class=\\"ais-GeoSearch-tree\\"></div></div>"`;
 
-exports[`GeoSearch expect to render with custom classNames 2`] = `
+exports[`GeoSearch expect to render 2`] = `
 Array [
   <GeoSearchControls
     cssClasses={
       Object {
-        "clear": "ais-geo-search--clear custom-clear",
-        "control": "ais-geo-search--control custom-control",
-        "controls": "ais-geo-search--controls custom-controls",
-        "map": "ais-geo-search--map custom-map",
-        "redo": "ais-geo-search--redo custom-redo",
-        "root": "ais-geo-search custom-root",
-        "toggleInput": "ais-geo-search--toggle-input custom-toggleInput",
-        "toggleLabel": "ais-geo-search--toggle-label custom-toggleLabel",
-        "toggleLabelActive": "ais-geo-search--toggle-label-active",
+        "control": "ais-GeoSearch-control",
+        "disabledRedo": "ais-GeoSearch-redo--disabled",
+        "input": "ais-GeoSearch-input",
+        "label": "ais-GeoSearch-label",
+        "map": "ais-GeoSearch-map",
+        "redo": "ais-GeoSearch-redo",
+        "reset": "ais-GeoSearch-reset",
+        "root": "ais-GeoSearch",
+        "selectedLabel": "ais-GeoSearch-label--selected",
+        "tree": "ais-GeoSearch-tree",
       }
     }
     enableClearMapRefinement={true}
@@ -29,40 +30,43 @@ Array [
     templateProps={
       Object {
         "templates": Object {
-          "clear": "Clear the map refinement",
           "redo": "Redo search here",
+          "reset": "Clear the map refinement",
           "toggle": "Search as I move the map",
         },
         "templatesConfig": undefined,
         "transformData": undefined,
         "useCustomCompileOptions": Object {
-          "clear": true,
           "redo": true,
+          "reset": true,
           "toggle": true,
         },
       }
     }
   />,
-  null,
+  <div
+    class="ais-GeoSearch-tree"
+  />,
 ]
 `;
 
-exports[`GeoSearch expect to render 1`] = `"<div class=\\"ais-geo-search\\"><div class=\\"ais-geo-search--map\\"></div><div class=\\"ais-geo-search--controls\\"></div></div>"`;
+exports[`GeoSearch expect to render with custom classNames 1`] = `"<div class=\\"ais-GeoSearch custom-root\\"><div class=\\"ais-GeoSearch-map custom-map\\"></div><div class=\\"ais-GeoSearch-tree\\"></div></div>"`;
 
-exports[`GeoSearch expect to render 2`] = `
+exports[`GeoSearch expect to render with custom classNames 2`] = `
 Array [
   <GeoSearchControls
     cssClasses={
       Object {
-        "clear": "ais-geo-search--clear",
-        "control": "ais-geo-search--control",
-        "controls": "ais-geo-search--controls",
-        "map": "ais-geo-search--map",
-        "redo": "ais-geo-search--redo",
-        "root": "ais-geo-search",
-        "toggleInput": "ais-geo-search--toggle-input",
-        "toggleLabel": "ais-geo-search--toggle-label",
-        "toggleLabelActive": "ais-geo-search--toggle-label-active",
+        "control": "ais-GeoSearch-control custom-control",
+        "disabledRedo": "ais-GeoSearch-redo--disabled custom-redo-disabled",
+        "input": "ais-GeoSearch-input custom-input",
+        "label": "ais-GeoSearch-label custom-label",
+        "map": "ais-GeoSearch-map custom-map",
+        "redo": "ais-GeoSearch-redo custom-redo",
+        "reset": "ais-GeoSearch-reset custom-reset",
+        "root": "ais-GeoSearch custom-root",
+        "selectedLabel": "ais-GeoSearch-label--selected custom-label-selected",
+        "tree": "ais-GeoSearch-tree",
       }
     }
     enableClearMapRefinement={true}
@@ -76,22 +80,22 @@ Array [
     templateProps={
       Object {
         "templates": Object {
-          "clear": "Clear the map refinement",
           "redo": "Redo search here",
+          "reset": "Clear the map refinement",
           "toggle": "Search as I move the map",
         },
         "templatesConfig": undefined,
         "transformData": undefined,
         "useCustomCompileOptions": Object {
-          "clear": true,
           "redo": true,
+          "reset": true,
           "toggle": true,
         },
       }
     }
   />,
   <div
-    class="ais-geo-search--controls"
+    class="ais-GeoSearch-tree"
   />,
 ]
 `;

src/widgets/geo-search/__tests__/geo-search-test.js

@@ -159,12 +159,13 @@ describe('GeoSearch', () => {
       cssClasses: {
         root: 'custom-root',
         map: 'custom-map',
-        controls: 'custom-controls',
-        clear: 'custom-clear',
         control: 'custom-control',
-        toggleLabel: 'custom-toggleLabel',
-        toggleInput: 'custom-toggleInput',
+        label: 'custom-label',
+        selectedLabel: 'custom-label-selected',
+        input: 'custom-input',
         redo: 'custom-redo',
+        disabledRedo: 'custom-redo-disabled',
+        reset: 'custom-reset',
       },
     });
 
@@ -217,7 +218,7 @@ describe('GeoSearch', () => {
     const actual = renderer.mock.calls[0][0].widgetParams.templates;
 
     const expectation = {
-      clear: 'Clear the map refinement',
+      reset: 'Clear the map refinement',
       toggle: 'Search when the map move',
       redo: 'Redo search here',
     };