feat(refinement-list): implement InstantSearch.css (2) (#3179)

* Flattens the templates to the top-level `templates` option.

dev/app/builtin/stories/refinement-list.stories.js

@@ -15,8 +15,6 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
           })
         );
       })
@@ -28,14 +26,12 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
             limit: 3,
-            showMore: {
-              templates: {
-                active: 'Show less',
-                inactive: 'Show more',
-              },
-              limit: 10,
+            showMore: true,
+            showMoreLimit: 10,
+            templates: {
+              showMoreActive: 'Show way less',
+              showMoreInactive: 'Show way less',
             },
           })
         );
@@ -48,29 +44,22 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
-            searchable: {
-              placeholder: 'Find other brands...',
-              templates: {
-                noResults: 'No results',
-              },
-            },
+            searchable: true,
           })
         );
       })
     )
     .add(
-      'with search inside items (using the default noResults template)',
+      'with search inside items (using a custom searchableNoResults template)',
       wrapWithHits(container => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
-            searchable: {
-              placeholder: 'Find other brands...',
+            searchable: true,
+            searchablePlaceholder: 'Find other brands...',
+            templates: {
+              searchableNoResults: 'No results found',
             },
           })
         );
@@ -84,7 +73,6 @@ export default () => {
             container,
             attribute: 'price_range',
             operator: 'and',
-            limit: 10,
             cssClasses: {
               item: 'facet-value checkbox',
               count: 'facet-count pull-right',
@@ -107,8 +95,6 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
             transformItems: items =>
               items.map(item => ({
                 ...item,
@@ -126,14 +112,7 @@ export default () => {
           instantsearch.widgets.refinementList({
             container,
             attribute: 'brand',
-            operator: 'or',
-            limit: 10,
-            searchable: {
-              placeholder: 'Find other brands...',
-              templates: {
-                noResults: 'No results',
-              },
-            },
+            searchable: true,
             transformItems: items =>
               items.map(item => ({
                 ...item,

docgen/src/guides/v3-migration.md

@@ -10,11 +10,11 @@ If you were previously using the `urlSync` option, you should now migrate to the
 
 Here are the elements you need to migrate:
 
-* `urlSync: true` becomes `routing: true`
-* `threshold` becomes `routing: {router: instantsearch.routers.history({writeDelay: 400})}
-* `mapping` and `trackedParameters` are replaced with `stateMapping`. Read [User friendly urls](routing.html#user-friendly-urls) to know how to configure it
-* `useHash` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
-* `getHistoryState` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
+- `urlSync: true` becomes `routing: true`
+- `threshold` becomes `routing: {router: instantsearch.routers.history({writeDelay: 400})}
+- `mapping` and `trackedParameters` are replaced with `stateMapping`. Read [User friendly urls](routing.html#user-friendly-urls) to know how to configure it
+- `useHash` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
+- `getHistoryState` is removed but can be achieved using an advanced configuration of the [history router](routing.html#history-router-api)
 
 ## Widgets
 
@@ -150,8 +150,8 @@ With the redo button:
 | `escapeHits`    | `escapeHTML`    |
 | `showMoreLabel` | `loadMoreLabel` |
 
-* `escapeHTML` becomes `true` by default.
-* `allItems` template has been removed in favor of `connectHits`
+- `escapeHTML` becomes `true` by default.
+- `allItems` template has been removed in favor of `connectHits`
 
 #### CSS classes
 
@@ -499,6 +499,24 @@ Widget removed.
 
 ### RefinementList
 
+#### Options
+
+| Before                                     | After                           |
+| ------------------------------------------ | ------------------------------- |
+| `attributeName`                            | `attribute`                     |
+| `searchForFacetValues`                     | `searchable`                    |
+| `searchForFacetValues.placeholder`         | `searchablePlaceholder`         |
+| `searchForFacetValues.isAlwaysActive`      | `searchableIsAlwaysActive`      |
+| `searchForFacetValues.escapeFacetValues`   | `searchableEscapeFacetValues`   |
+| `searchForFacetValues.templates.noResults` | `templates.searchableNoResults` |
+| `showMore.templates.active`                | `templates.showMoreActive`      |
+| `showMore.templates.inactive`              | `templates.showMoreInactive`    |
+
+- `searchablePlaceholder` defaults to `"Search..."`
+- `searchableEscapeFacetValues` defaults to `true`
+- `searchableIsAlwaysActive` defaults to `true`
+- `showMore` is now a boolean option (`searchForFacetValues.templates` and `showMore.templates` are now in `templates`)
+
 #### CSS classes
 
 | Before                              | After                                   |
@@ -519,16 +537,6 @@ Widget removed.
 |                                     | `ais-RefinementList-showMore`           |
 |                                     | `ais-RefinementList-showMore--disabled` |
 
-#### Options
-
-| Before                 | After        |
-| ---------------------- | ------------ |
-| `attributeName`        | `attribute`  |
-| `searchForFacetValues` | `searchable` |
-
-* `escapeFacetValues` defaults to `true`
-* `isAlwaysActive` defaults to `true`
-
 #### Markup
 
 ##### Default
@@ -741,4 +749,4 @@ We've moved the `label` into the `templates.labelText` template to make it consi
 | --------------- | ----------- |
 | `attributeName` | `attribute` |
 
-* `escapeFacetValues` defaults to `true`
+- `escapeFacetValues` defaults to `true`

src/components/RefinementList/RefinementList.js

@@ -155,9 +155,9 @@ class RefinementList extends Component {
     const showMoreButton = this.props.showMore === true && (
       <Template
         rootTagName="button"
-        templateKey={`show-more-${
-          this.props.isShowingMore ? 'active' : 'inactive'
-        }`}
+        templateKey={
+          this.props.isShowingMore ? 'showMoreActive' : 'showMoreInactive'
+        }
         rootProps={{
           className: showMoreButtonClassName,
           onClick: this.props.toggleShowMore,
@@ -195,9 +195,9 @@ class RefinementList extends Component {
       this.props.isFromSearch &&
       this.props.facetValues.length === 0 && (
         <Template
-          templateKey="noResults"
-          rootProps={{ className: this.props.cssClasses.noResults }}
           {...this.props.templateProps}
+          templateKey="searchableNoResults"
+          rootProps={{ className: this.props.cssClasses.noResults }}
         />
       );
 

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

@@ -140,7 +140,7 @@ describe('RefinementList', () => {
       };
 
       const root = shallowRender(props);
-      const wrapper = root.find('[templateKey="show-more-inactive"]');
+      const wrapper = root.find('[templateKey="showMoreInactive"]');
 
       expect(wrapper).toHaveLength(1);
     });
@@ -160,7 +160,7 @@ describe('RefinementList', () => {
       const root = shallowRender(props);
       const wrapper = root
         .find('Template')
-        .filter({ templateKey: 'show-more-inactive' });
+        .filter({ templateKey: 'showMoreInactive' });
 
       expect(wrapper).toHaveLength(0);
     });
@@ -179,7 +179,7 @@ describe('RefinementList', () => {
       };
 
       const root = shallowRender(props);
-      const wrapper = root.find('[templateKey="show-more-active"]');
+      const wrapper = root.find('[templateKey="showMoreActive"]');
 
       expect(wrapper).toHaveLength(1);
     });
@@ -281,7 +281,7 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            noResults: x => x,
+            searchableNoResults: x => x,
           },
         },
         toggleRefinement: () => {},
@@ -343,7 +343,7 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            'show-more-inactive': x => x,
+            showMoreInactive: x => x,
           },
         },
         toggleRefinement: () => {},
@@ -376,7 +376,7 @@ describe('RefinementList', () => {
         templateProps: {
           templates: {
             item: item => item,
-            'show-more-inactive': x => x,
+            showMoreInactive: x => x,
           },
         },
         toggleRefinement: () => {},

src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap

@@ -39,17 +39,10 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
     ]
   }
   hasExhaustiveItems={true}
-  headerFooterData={
-    Object {
-      "header": Object {
-        "refinedFacetsCount": 0,
-      },
-    }
-  }
   isFromSearch={false}
   isShowingMore={false}
   searchIsAlwaysActive={true}
-  searchPlaceholder="Search for other..."
+  searchPlaceholder="Search..."
   showMore={false}
   templateProps={
     Object {
@@ -62,11 +55,13 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
   <span class=\\"{{cssClasses.labelText}}\\">{{{highlighted}}}</span>
   <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>",
+        "searchableNoResults": "No results",
       },
       "templatesConfig": Object {},
       "transformData": undefined,
       "useCustomCompileOptions": Object {
         "item": false,
+        "searchableNoResults": false,
       },
     }
   }

src/widgets/refinement-list/__tests__/refinement-list-test.js

@@ -27,6 +27,32 @@ describe('refinementList()', () => {
         refinementList(options);
       }).toThrow(/^Usage:/);
     });
+
+    it('throws an exception when showMoreLimit without showMore option', () => {
+      expect(
+        refinementList.bind(null, {
+          attribute: 'attribute',
+          container,
+          showMoreLimit: 10,
+        })
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"\`showMoreLimit\` must be used with \`showMore\` set to \`true\`."`
+      );
+    });
+
+    it('throws an exception when showMoreLimit is lower than limit', () => {
+      expect(
+        refinementList.bind(null, {
+          attribute: 'attribute',
+          container,
+          limit: 20,
+          showMore: true,
+          showMoreLimit: 10,
+        })
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"\`showMoreLimit\` should be greater than \`limit\`."`
+      );
+    });
   });
 
   describe('render', () => {
@@ -137,36 +163,38 @@ describe('refinementList()', () => {
   });
 
   describe('show more', () => {
-    it('should return a configuration with the highest limit value (default value)', () => {
+    it('should return a configuration with the same top-level limit value (default value)', () => {
       const opts = {
         container,
         attribute: 'attribute',
         limit: 1,
-        showMore: {},
+        showMore: true,
       };
       const wdgt = refinementList(opts);
       const partialConfig = wdgt.getConfiguration({});
-      expect(partialConfig.maxValuesPerFacet).toBe(100);
+      expect(partialConfig.maxValuesPerFacet).toBe(1);
     });
 
     it('should return a configuration with the highest limit value (custom value)', () => {
       const opts = {
         container,
         attribute: 'attribute',
         limit: 1,
-        showMore: { limit: 99 },
+        showMore: true,
+        showMoreLimit: 99,
       };
       const wdgt = refinementList(opts);
       const partialConfig = wdgt.getConfiguration({});
-      expect(partialConfig.maxValuesPerFacet).toBe(opts.showMore.limit);
+      expect(partialConfig.maxValuesPerFacet).toBe(opts.showMoreLimit);
     });
 
     it('should not accept a show more limit that is < limit', () => {
       const opts = {
         container,
         attribute: 'attribute',
         limit: 100,
-        showMore: { limit: 1 },
+        showMore: true,
+        showMoreLimit: 1,
       };
       expect(() => refinementList(opts)).toThrow();
     });

src/widgets/refinement-list/defaultTemplates.js

@@ -7,4 +7,5 @@ export default {
   <span class="{{cssClasses.labelText}}">{{{highlighted}}}</span>
   <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>`,
+  searchableNoResults: 'No results',
 };