From 123b7bdd8935f7a5929a05bc8d6b2ca09a3cea21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 10:32:49 +0200
Subject: [PATCH 01/16] feat(refinement-list): apply new options, markup and
 css

---
 docgen/src/guides/v3-migration.md             | 142 +++++++++++++++
 .../RefinementList/RefinementList.js          | 117 +++++++-----
 .../RefinementList/RefinementListItem.js      |  13 +-
 .../__tests__/RefinementList-test.js          | 104 +++++++++--
 .../__tests__/RefinementListItem-test.js      |   4 +-
 .../__snapshots__/RefinementList-test.js.snap |  88 +++++++++
 .../RefinementListItem-test.js.snap           |   4 +-
 .../__tests__/connectRefinementList-test.js   |  49 ++---
 .../refinement-list/connectRefinementList.js  |  56 +++---
 .../hierarchical-menu-test.js.snap            |  18 +-
 .../__tests__/__snapshots__/menu-test.js.snap |   6 +-
 .../numeric-refinement-list-test.js.snap      |   9 +-
 .../refinement-list-test.js.snap              |  36 ++--
 .../__tests__/refinement-list-test.js         | 168 ++++++------------
 .../refinement-list/defaultTemplates.js       |   4 +-
 .../refinement-list/refinement-list.js        | 123 +++++++------
 .../__snapshots__/star-rating-test.js.snap    |   6 +-
 17 files changed, 623 insertions(+), 324 deletions(-)
 create mode 100644 src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap

diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index 13a839e88b..79d890e8b5 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -497,6 +497,138 @@ Widget removed.
 </div>
 ```
 
+### RefinementList
+
+#### CSS classes
+
+| Before                              | After                                   |
+| ----------------------------------- | --------------------------------------- |
+| `ais-refinement-list`               | `ais-RefinementList`                    |
+|                                     | `ais-RefinementList--noRefinement`      |
+|                                     | `ais-RefinementList-noResults`          |
+| `ais-refinement-list--header`       |                                         |
+| `ais-refinement-list--body`         |                                         |
+| `ais-refinement-list--footer`       |                                         |
+| `ais-refinement-list--list`         | `ais-RefinementList-list`               |
+| `ais-refinement-list--item`         | `ais-RefinementList-item`               |
+| `ais-refinement-list--item__active` | `ais-RefinementList-item--selected`     |
+| `ais-refinement-list--label`        | `ais-RefinementList-label`              |
+| `ais-refinement-list--checkbox`     | `ais-RefinementList-checkbox`           |
+|                                     | `ais-RefinementList-labelText`          |
+| `ais-refinement-list--count`        | `ais-RefinementList-count`              |
+|                                     | `ais-RefinementList-showMore`           |
+|                                     | `ais-RefinementList-showMore--disabled` |
+
+#### Options
+
+| Before                 | After        |
+| ---------------------- | ------------ |
+| `attributeName`        | `attribute`  |
+| `searchForFacetValues` | `searchable` |
+
+* `escapeFacetValues` defaults to `true`
+* `isAlwaysActive` defaults to `true`
+
+#### Markup
+
+##### Default
+
+```html
+<div class="ais-RefinementList">
+  <div class="ais-RefinementList-searchBox">
+    <!-- SearchBox widget here -->
+  </div>
+  <ul class="ais-RefinementList-list">
+    <li class="ais-RefinementList-item ais-RefinementList-item--selected">
+      <label class="ais-RefinementList-label">
+        <input class="ais-RefinementList-checkbox" type="checkbox" value="Insignia™" checked="" />
+        <span class="ais-RefinementList-labelText">Insignia™</span>
+        <span class="ais-RefinementList-count">746</span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input class="ais-RefinementList-checkbox" type="checkbox" value="Samsung">
+        <span class="ais-RefinementList-labelText">Samsung</span>
+        <span class="ais-RefinementList-count">633</span>
+      </label>
+    </li>
+  </ul>
+  <button class="ais-RefinementList-showMore">Show more</button>
+</div>
+```
+
+##### Show more disabled
+
+```html
+<div class="ais-RefinementList">
+  <div class="ais-RefinementList-searchBox">
+    <!-- SearchBox widget here -->
+  </div>
+  <ul class="ais-RefinementList-list">
+    <li class="ais-RefinementList-item ais-RefinementList-item--selected">
+      <label class="ais-RefinementList-label">
+        <input class="ais-RefinementList-checkbox" type="checkbox" value="Insignia™" checked="" />
+        <span class="ais-RefinementList-labelText">Insignia™</span>
+        <span class="ais-RefinementList-count">746</span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input class="ais-RefinementList-checkbox" type="checkbox" value="Samsung">
+        <span class="ais-RefinementList-labelText">Samsung</span>
+        <span class="ais-RefinementList-count">633</span>
+      </label>
+    </li>
+  </ul>
+  <button class="ais-RefinementList-showMore ais-RefinementList-showMore--disabled" disabled>Show more</button>
+</div>
+```
+
+##### With search and no results
+
+```html
+<div class="ais-RefinementList">
+  <div class="ais-RefinementList-searchBox">
+    <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 stroke-opacity=".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>
+  </div>
+  <div class="ais-RefinementList-noResults">No results.</div>
+</div>
+```
+
 ### SortBy
 
 #### Options
@@ -600,3 +732,13 @@ We've moved the `label` into the `templates.labelText` template to make it consi
 | Before              | After                |
 | ------------------- | -------------------- |
 | `excludeAttributes` | `excludedAttributes` |
+
+### connectRefinementList
+
+#### Options
+
+| Before          | After       |
+| --------------- | ----------- |
+| `attributeName` | `attribute` |
+
+* `escapeFacetValues` defaults to `true`
diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 4e239964a4..1a4697e76e 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -9,10 +9,7 @@ import isEqual from 'lodash/isEqual';
 
 import SearchBox from '../SearchBox';
 
-import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
-import headerFooterHOC from '../../decorators/headerFooter.js';
-
-export class RawRefinementList extends Component {
+class RefinementList extends Component {
   constructor(props) {
     super(props);
     this.handleItemClick = this.handleItemClick.bind(this);
@@ -37,7 +34,7 @@ export class RawRefinementList extends Component {
     const hasChildren = facetValue.data && facetValue.data.length > 0;
     if (hasChildren) {
       subItems = (
-        <RawRefinementList
+        <RefinementList
           {...this.props}
           depth={this.props.depth + 1}
           facetValues={facetValue.data}
@@ -53,10 +50,6 @@ export class RawRefinementList extends Component {
       cssClasses: this.props.cssClasses,
     };
 
-    const cssClassItem = cx(this.props.cssClasses.item, {
-      [this.props.cssClasses.active]: facetValue.isRefined,
-    });
-
     let { value: key } = facetValue;
     if (facetValue.isRefined !== undefined) {
       key += `/${facetValue.isRefined}`;
@@ -71,7 +64,12 @@ export class RawRefinementList extends Component {
         facetValueToRefine={facetValue.value}
         handleClick={this.handleItemClick}
         isRefined={facetValue.isRefined}
-        itemClassName={cssClassItem}
+        cssClasses={{
+          ...this.props.cssClasses,
+          item: cx(this.props.cssClasses.item, {
+            [this.props.cssClasses.selectedItem]: facetValue.isRefined,
+          }),
+        }}
         key={key}
         subItems={subItems}
         templateData={templateData}
@@ -147,65 +145,102 @@ export class RawRefinementList extends Component {
 
   render() {
     // Adding `-lvl0` classes
-    const cssClassList = [this.props.cssClasses.list];
-    if (this.props.cssClasses.depth) {
-      cssClassList.push(`${this.props.cssClasses.depth}${this.props.depth}`);
-    }
+    const cssClassList = cx(this.props.cssClasses.list, {
+      [`${this.props.cssClasses.depth}${this.props.depth}`]: this.props
+        .cssClasses.depth,
+    });
+
+    const showMoreButtonClassName =
+      this.props.showMore === true && this.props.canToggleShowMore
+        ? this.props.cssClasses.showMore
+        : cx(
+            this.props.cssClasses.showMore,
+            this.props.cssClasses.disabledShowMore
+          );
 
-    const showMoreBtn =
-      this.props.showMore === true && this.props.canToggleShowMore ? (
+    const showMoreButton =
+      this.props.showMore === true ? (
         <Template
-          rootProps={{ onClick: this.props.toggleShowMore }}
+          rootTagName="button"
           templateKey={`show-more-${
             this.props.isShowingMore ? 'active' : 'inactive'
           }`}
+          rootProps={{
+            className: showMoreButtonClassName,
+            onClick: this.props.toggleShowMore,
+          }}
           {...this.props.templateProps}
         />
-      ) : (
-        undefined
-      );
+      ) : null;
 
-    const shouldDisableSearchInput =
+    const shouldDisableSearchBox =
       this.props.searchIsAlwaysActive !== true &&
       !(this.props.isFromSearch || !this.props.hasExhaustiveItems);
-    const searchInput = this.props.searchFacetValues ? (
-      <SearchBox
-        ref={i => {
-          this.searchbox = i;
-        }}
-        placeholder={this.props.searchPlaceholder}
-        onChange={this.props.searchFacetValues}
-        onValidate={() => this.refineFirstValue()}
-        disabled={shouldDisableSearchInput}
-      />
+    const searchBox = this.props.searchFacetValues ? (
+      <div className={this.props.cssClasses.searchBox}>
+        <SearchBox
+          ref={i => {
+            this.searchbox = i;
+          }}
+          placeholder={this.props.searchPlaceholder}
+          onChange={this.props.searchFacetValues}
+          onValidate={() => this.refineFirstValue()}
+          disabled={shouldDisableSearchBox}
+        />
+      </div>
     ) : null;
 
+    const facetValues =
+      this.props.facetValues && this.props.facetValues.length > 0 ? (
+        <ul className={cssClassList}>
+          {this.props.facetValues.map(this._generateFacetItem, this)}
+        </ul>
+      ) : null;
+
     const noResults =
       this.props.searchFacetValues &&
       this.props.isFromSearch &&
       this.props.facetValues.length === 0 ? (
-        <Template templateKey={'noResults'} {...this.props.templateProps} />
+        <Template
+          templateKey="noResults"
+          rootProps={{ className: this.props.cssClasses.noResults }}
+          {...this.props.templateProps}
+        />
       ) : null;
 
     return (
-      <div className={cx(cssClassList)}>
-        {searchInput}
-        {this.props.facetValues.map(this._generateFacetItem, this)}
+      <div
+        className={cx(this.props.cssClasses.root, {
+          [this.props.cssClasses.noRefinementRoot]: false,
+        })}
+      >
+        {searchBox}
+        {facetValues}
         {noResults}
-        {showMoreBtn}
+        {showMoreButton}
       </div>
     );
   }
 }
 
-RawRefinementList.propTypes = {
+RefinementList.propTypes = {
   Template: PropTypes.func,
   createURL: PropTypes.func,
   cssClasses: PropTypes.shape({
-    active: PropTypes.string,
     depth: PropTypes.string,
-    item: PropTypes.string,
+    root: PropTypes.string,
+    noRefinementRoot: PropTypes.string,
     list: PropTypes.string,
+    item: PropTypes.string,
+    selectedItem: PropTypes.string,
+    searchBox: PropTypes.string,
+    label: PropTypes.string,
+    checkbox: PropTypes.string,
+    labelText: PropTypes.string,
+    count: PropTypes.string,
+    noResults: PropTypes.string,
+    showMore: PropTypes.string,
+    disabledShowMore: PropTypes.string,
   }),
   depth: PropTypes.number,
   facetValues: PropTypes.array,
@@ -222,9 +257,9 @@ RawRefinementList.propTypes = {
   searchIsAlwaysActive: PropTypes.bool,
 };
 
-RawRefinementList.defaultProps = {
+RefinementList.defaultProps = {
   cssClasses: {},
   depth: 0,
 };
 
-export default autoHideContainerHOC(headerFooterHOC(RawRefinementList));
+export default RefinementList;
diff --git a/src/components/RefinementList/RefinementListItem.js b/src/components/RefinementList/RefinementListItem.js
index e7b07c6492..cc08b85fa1 100644
--- a/src/components/RefinementList/RefinementListItem.js
+++ b/src/components/RefinementList/RefinementListItem.js
@@ -23,14 +23,14 @@ class RefinementListItem extends Component {
 
   render() {
     return (
-      <div className={this.props.itemClassName} onClick={this.handleClick}>
+      <li className={this.props.cssClasses.item} onClick={this.handleClick}>
         <Template
           data={this.props.templateData}
           templateKey={this.props.templateKey}
           {...this.props.templateProps}
         />
         {this.props.subItems}
-      </div>
+      </li>
     );
   }
 }
@@ -39,11 +39,18 @@ RefinementListItem.propTypes = {
   facetValueToRefine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   handleClick: PropTypes.func.isRequired,
   isRefined: PropTypes.bool.isRequired,
-  itemClassName: PropTypes.string,
   subItems: PropTypes.object,
   templateData: PropTypes.object.isRequired,
   templateKey: PropTypes.string.isRequired,
   templateProps: PropTypes.object.isRequired,
+  cssClasses: PropTypes.shape({
+    item: PropTypes.string,
+    selectedItem: PropTypes.string,
+    label: PropTypes.string,
+    checkbox: PropTypes.string,
+    labelText: PropTypes.string,
+    count: PropTypes.string,
+  }),
 };
 
 export default RefinementListItem;
diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index 0d6a20e98b..dbf36a41f1 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -2,8 +2,9 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import expect from 'expect';
 import sinon from 'sinon';
-import { RawRefinementList as RefinementList } from '../RefinementList';
+import RefinementList from '../RefinementList';
 import RefinementListItem from '../RefinementListItem';
+import renderer from 'react-test-renderer';
 
 const defaultProps = {
   templateProps: {},
@@ -25,12 +26,12 @@ describe('RefinementList', () => {
   }
 
   describe('cssClasses', () => {
-    it('should add the `list` class to the root element', () => {
+    it('should add the `root` class to the root element', () => {
       // Given
       const props = {
         ...defaultProps,
         cssClasses: {
-          list: 'list',
+          root: 'root',
         },
       };
 
@@ -38,7 +39,7 @@ describe('RefinementList', () => {
       const actual = shallowRender(props);
 
       // Then
-      expect(actual.hasClass('list')).toEqual(true);
+      expect(actual.hasClass('root')).toEqual(true);
     });
 
     it('should set item classes to the refinements', () => {
@@ -55,7 +56,7 @@ describe('RefinementList', () => {
       const actual = shallowRender(props).find(RefinementListItem);
 
       // Then
-      expect(actual.props().itemClassName).toContain('item');
+      expect(actual.props().cssClasses.item).toContain('item');
     });
 
     it('should set active classes to the active refinements', () => {
@@ -63,7 +64,7 @@ describe('RefinementList', () => {
       const props = {
         ...defaultProps,
         cssClasses: {
-          active: 'active',
+          selectedItem: 'active',
         },
         facetValues: [
           { value: 'foo', isRefined: true },
@@ -76,8 +77,8 @@ describe('RefinementList', () => {
       const inactiveItem = shallowRender(props).find({ isRefined: false });
 
       // Then
-      expect(activeItem.props().itemClassName).toContain('active');
-      expect(inactiveItem.props().itemClassName).not.toContain('active');
+      expect(activeItem.props().cssClasses.item).toContain('active');
+      expect(inactiveItem.props().cssClasses.item).not.toContain('active');
     });
   });
 
@@ -268,8 +269,91 @@ describe('RefinementList', () => {
       const subList = shallow(mainItem.props().subItems);
 
       // Then
-      expect(root.props().className).toContain('depth-0');
-      expect(subList.props().className).toContain('depth-1');
+      expect(root.props().children[1].props.className).toContain('depth-0');
+      expect(subList.props().children[1].props.className).toContain('depth-1');
+    });
+  });
+
+  describe('markup', () => {
+    const cssClasses = {
+      root: 'root',
+      noRefinementRoot: 'noRefinementRoot',
+      list: 'list',
+      item: 'item',
+      selectedItem: 'selectedItem',
+      searchBox: 'searchBox',
+      label: 'label',
+      checkbox: 'checkbox',
+      labelText: 'labelText',
+      count: 'count',
+      noResults: 'noResults',
+      showMore: 'showMore',
+      disabledShowMore: 'disabledShowMore',
+    };
+
+    it('without facets', () => {
+      const props = {
+        container: document.createElement('div'),
+        attribute: 'attribute',
+        templateProps: {},
+        toggleRefinement: () => {},
+        facetValues: [],
+        cssClasses,
+      };
+      const tree = renderer.create(<RefinementList {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('without facets from search', () => {
+      const props = {
+        container: document.createElement('div'),
+        attribute: 'attribute',
+        searchForFacetValues: x => x,
+        cssClasses,
+        templateProps: {
+          templates: {
+            item: item => item,
+            noResults: x => x,
+          },
+        },
+        toggleRefinement: () => {},
+        facetValues: [],
+        isFromSearch: true,
+      };
+      const tree = renderer.create(<RefinementList {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('with facets', () => {
+      const props = {
+        container: document.createElement('div'),
+        attribute: 'attribute',
+        toggleRefinement: () => {},
+        createURL: () => {},
+        templateProps: {
+          templates: {
+            item: item => item,
+          },
+        },
+        facetValues: [
+          {
+            label: 'Amazon',
+            count: 1200,
+            isRefined: false,
+          },
+          {
+            label: 'Google',
+            count: 1000,
+            isRefined: true,
+          },
+        ],
+        cssClasses,
+      };
+      const tree = renderer.create(<RefinementList {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
     });
   });
 });
diff --git a/src/components/RefinementList/__tests__/RefinementListItem-test.js b/src/components/RefinementList/__tests__/RefinementListItem-test.js
index dfc7f907aa..6d96c9ed37 100644
--- a/src/components/RefinementList/__tests__/RefinementListItem-test.js
+++ b/src/components/RefinementList/__tests__/RefinementListItem-test.js
@@ -8,7 +8,9 @@ describe('RefinementListItem', () => {
     facetValueToRefine: 'wi',
     isRefined: false,
     handleClick: jest.fn(),
-    itemClassName: 'item class',
+    cssClasses: {
+      item: 'item class',
+    },
     templateData: { template: 'data' },
     templateKey: 'item key',
     templateProps: { template: 'props' },
diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
new file mode 100644
index 0000000000..581f5e32ea
--- /dev/null
+++ b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RefinementList markup with facets 1`] = `
+<div
+  className="root"
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1200,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": false,
+              "label": "Amazon",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+    <li
+      className="item selectedItem"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1000,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": true,
+              "label": "Google",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`RefinementList markup without facets 1`] = `
+<div
+  className="root"
+/>
+`;
+
+exports[`RefinementList markup without facets from search 1`] = `
+<div
+  className="root"
+/>
+`;
diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.js.snap
index bb7cffd889..dc6fa6cd39 100644
--- a/src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.js.snap
+++ b/src/components/RefinementList/__tests__/__snapshots__/RefinementListItem-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RefinementListItem renders an item 1`] = `
-<div
+<li
   className="item class"
   onClick={[Function]}
 >
@@ -15,5 +15,5 @@ exports[`RefinementListItem renders an item 1`] = `
     templateKey="item key"
   />
   <div />
-</div>
+</li>
 `;
diff --git a/src/connectors/refinement-list/__tests__/connectRefinementList-test.js b/src/connectors/refinement-list/__tests__/connectRefinementList-test.js
index e42a35db1f..32bfe718ff 100644
--- a/src/connectors/refinement-list/__tests__/connectRefinementList-test.js
+++ b/src/connectors/refinement-list/__tests__/connectRefinementList-test.js
@@ -32,17 +32,17 @@ describe('connectRefinementList', () => {
 
     expect(() =>
       connectRefinementList(() => {})({
-        attributeName: 'company',
+        attribute: 'company',
         operator: 'YUP',
       })
     ).toThrow(/Usage:/);
   });
 
   describe('options configuring the helper', () => {
-    it('`attributeName`', () => {
+    it('`attribute`', () => {
       const { makeWidget } = createWidgetFactory();
       const widget = makeWidget({
-        attributeName: 'myFacet',
+        attribute: 'myFacet',
       });
 
       expect(widget.getConfiguration()).toEqual({
@@ -54,7 +54,7 @@ describe('connectRefinementList', () => {
     it('`limit`', () => {
       const { makeWidget } = createWidgetFactory();
       const widget = makeWidget({
-        attributeName: 'myFacet',
+        attribute: 'myFacet',
         limit: 20,
       });
 
@@ -75,7 +75,7 @@ describe('connectRefinementList', () => {
     it('`operator="and"`', () => {
       const { makeWidget } = createWidgetFactory();
       const widget = makeWidget({
-        attributeName: 'myFacet',
+        attribute: 'myFacet',
         operator: 'and',
       });
 
@@ -91,7 +91,7 @@ describe('connectRefinementList', () => {
     // test that the dummyRendering is called with the isFirstRendering
     // flag set accordingly
     const widget = makeWidget({
-      attributeName: 'myFacet',
+      attribute: 'myFacet',
       limit: 9,
     });
 
@@ -122,7 +122,7 @@ describe('connectRefinementList', () => {
     const firstRenderingOptions = rendering.mock.calls[0][0];
     expect(firstRenderingOptions.canRefine).toBe(false);
     expect(firstRenderingOptions.widgetParams).toEqual({
-      attributeName: 'myFacet',
+      attribute: 'myFacet',
       limit: 9,
     });
 
@@ -140,7 +140,7 @@ describe('connectRefinementList', () => {
     const secondRenderingOptions = rendering.mock.calls[1][0];
     expect(secondRenderingOptions.canRefine).toBe(false);
     expect(secondRenderingOptions.widgetParams).toEqual({
-      attributeName: 'myFacet',
+      attribute: 'myFacet',
       limit: 9,
     });
   });
@@ -148,7 +148,7 @@ describe('connectRefinementList', () => {
   it('transforms items if requested', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       transformItems: items =>
         items.map(item => ({
           ...item,
@@ -211,7 +211,7 @@ describe('connectRefinementList', () => {
   it('Provide a function to clear the refinements at each step', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
     });
 
     const helper = jsHelper({}, '', widget.getConfiguration({}));
@@ -251,7 +251,7 @@ describe('connectRefinementList', () => {
   it('If there are too few items then canToggleShowMore is false', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 3,
       showMoreLimit: 10,
     });
@@ -298,7 +298,7 @@ describe('connectRefinementList', () => {
   it('If there are no showMoreLimit specified, canToggleShowMore is false', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 1,
     });
 
@@ -348,7 +348,7 @@ describe('connectRefinementList', () => {
   it('If there are same amount of items then canToggleShowMore is false', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
       showMoreLimit: 10,
     });
@@ -399,7 +399,7 @@ describe('connectRefinementList', () => {
   it('If there are enough items then canToggleShowMore is true', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 1,
       showMoreLimit: 10,
     });
@@ -453,7 +453,7 @@ describe('connectRefinementList', () => {
   it('Show more should toggle between two limits', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 1,
       showMoreLimit: 3,
     });
@@ -546,7 +546,7 @@ describe('connectRefinementList', () => {
   it('hasExhaustiveItems indicates if the items provided are exhaustive - without other widgets making the maxValuesPerFacet bigger', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
     });
 
@@ -623,7 +623,7 @@ describe('connectRefinementList', () => {
   it('hasExhaustiveItems indicates if the items provided are exhaustive - with an other widgets making the maxValuesPerFacet bigger', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
     });
 
@@ -704,8 +704,9 @@ describe('connectRefinementList', () => {
   it('can search in facet values', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
+      escapeFacetValues: false,
     });
 
     const helper = jsHelper({}, '', widget.getConfiguration({}));
@@ -803,8 +804,9 @@ describe('connectRefinementList', () => {
   it('can search in facet values with transformed items', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
+      escapeFacetValues: false,
       transformItems: items =>
         items.map(item => ({
           ...item,
@@ -907,8 +909,9 @@ describe('connectRefinementList', () => {
   it('can search in facet values, and reset pre post tags if needed', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
+      escapeFacetValues: false,
     });
 
     const helper = jsHelper({}, '', {
@@ -1007,10 +1010,10 @@ describe('connectRefinementList', () => {
     });
   });
 
-  it('can search in facet values, and set post and pre tags if escapeFacetValues is true', () => {
+  it('can search in facet values, and set post and pre tags by default', () => {
     const { makeWidget, rendering } = createWidgetFactory();
     const widget = makeWidget({
-      attributeName: 'category',
+      attribute: 'category',
       limit: 2,
       escapeFacetValues: true,
     });
@@ -1118,7 +1121,7 @@ describe('connectRefinementList', () => {
       const makeWidget = connectRefinementList(rendering);
 
       const widget = makeWidget({
-        attributeName: 'facetAttribute',
+        attribute: 'facetAttribute',
         ...config,
       });
 
diff --git a/src/connectors/refinement-list/connectRefinementList.js b/src/connectors/refinement-list/connectRefinementList.js
index 6e16443157..13e82b2ead 100644
--- a/src/connectors/refinement-list/connectRefinementList.js
+++ b/src/connectors/refinement-list/connectRefinementList.js
@@ -20,12 +20,12 @@ var customRefinementList = connectRefinementList(function render(params) {
 
 search.addWidget(
   customRefinementList({
-    attributeName,
+    attribute,
     [ operator = 'or' ],
     [ limit ],
     [ showMoreLimit ],
     [ sortBy = ['isRefined', 'count:desc', 'name:asc'] ],
-    [ escapeFacetValues = false ],
+    [ escapeFacetValues = true ],
     [ transformItems ]
   })
 );
@@ -34,13 +34,13 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 `;
 
 export const checkUsage = ({
-  attributeName,
+  attribute,
   operator,
   showMoreLimit,
   limit,
   message,
 }) => {
-  const noAttributeName = attributeName === undefined;
+  const noAttributeName = attribute === undefined;
   const invalidOperator = !/^(and|or)$/.test(operator);
   const invalidShowMoreLimit =
     showMoreLimit !== undefined
@@ -62,14 +62,14 @@ export const checkUsage = ({
 
 /**
  * @typedef {Object} CustomRefinementListWidgetOptions
- * @property {string} attributeName The name of the attribute in the records.
+ * @property {string} attribute The name of the attribute in the records.
  * @property {"and"|"or"} [operator = 'or'] How the filters are combined together.
  * @property {number} [limit = 10] The max number of items to display when
  * `showMoreLimit` is not set or if the widget is showing less value.
  * @property {number} [showMoreLimit] The max number of items to display if the widget
  * is showing more items.
  * @property {string[]|function} [sortBy = ['isRefined', 'count:desc', 'name:asc']] How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
- * @property {boolean} [escapeFacetValues = false] Escapes the content of the facet values.
+ * @property {boolean} [escapeFacetValues = true] Escapes the content of the facet values.
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
@@ -145,7 +145,7 @@ export const checkUsage = ({
  * search.addWidget(
  *   customRefinementList({
  *     containerNode: $('#custom-refinement-list-container'),
- *     attributeName: 'categories',
+ *     attribute: 'categories',
  *     limit: 10,
  *   })
  * );
@@ -155,18 +155,18 @@ export default function connectRefinementList(renderFn, unmountFn) {
 
   return (widgetParams = {}) => {
     const {
-      attributeName,
+      attribute,
       operator = 'or',
       limit = 10,
       showMoreLimit,
       sortBy = ['isRefined', 'count:desc', 'name:asc'],
-      escapeFacetValues = false,
+      escapeFacetValues = true,
       transformItems = items => items,
     } = widgetParams;
 
     checkUsage({
       message: usage,
-      attributeName,
+      attribute,
       operator,
       showMoreLimit,
       limit,
@@ -194,7 +194,7 @@ export default function connectRefinementList(renderFn, unmountFn) {
     }) => {
       // Compute a specific createURL method able to link to any facet value state change
       const _createURL = facetValue =>
-        createURL(state.toggleRefinement(attributeName, facetValue));
+        createURL(state.toggleRefinement(attribute, facetValue));
 
       // Do not mistake searchForFacetValues and searchFacetValues which is the actual search
       // function
@@ -264,7 +264,7 @@ export default function connectRefinementList(renderFn, unmountFn) {
         };
 
         helper
-          .searchForFacetValues(attributeName, query, limit, tags)
+          .searchForFacetValues(attribute, query, limit, tags)
           .then(results => {
             const facetValues = escapeFacetValues
               ? escapeFacets(results.facetHits)
@@ -316,9 +316,7 @@ export default function connectRefinementList(renderFn, unmountFn) {
 
       getConfiguration: (configuration = {}) => {
         const widgetConfiguration = {
-          [operator === 'and' ? 'facets' : 'disjunctiveFacets']: [
-            attributeName,
-          ],
+          [operator === 'and' ? 'facets' : 'disjunctiveFacets']: [attribute],
         };
 
         if (limit !== undefined) {
@@ -344,7 +342,7 @@ export default function connectRefinementList(renderFn, unmountFn) {
         this.cachedToggleShowMore = this.cachedToggleShowMore.bind(this);
 
         refine = facetValue =>
-          helper.toggleRefinement(attributeName, facetValue).search();
+          helper.toggleRefinement(attribute, facetValue).search();
 
         searchForFacetValues = createSearchForFacetValues(helper);
 
@@ -371,7 +369,7 @@ export default function connectRefinementList(renderFn, unmountFn) {
           instantSearchInstance,
         } = renderOptions;
 
-        const facetValues = results.getFacetValues(attributeName, { sortBy });
+        const facetValues = results.getFacetValues(attribute, { sortBy });
         const items = transformItems(
           facetValues.slice(0, this.getLimit()).map(formatItems)
         );
@@ -414,26 +412,24 @@ export default function connectRefinementList(renderFn, unmountFn) {
         unmountFn();
 
         if (operator === 'and') {
-          return state
-            .removeFacetRefinement(attributeName)
-            .removeFacet(attributeName);
+          return state.removeFacetRefinement(attribute).removeFacet(attribute);
         } else {
           return state
-            .removeDisjunctiveFacetRefinement(attributeName)
-            .removeDisjunctiveFacet(attributeName);
+            .removeDisjunctiveFacetRefinement(attribute)
+            .removeDisjunctiveFacet(attribute);
         }
       },
 
       getWidgetState(uiState, { searchParameters }) {
         const values =
           operator === 'or'
-            ? searchParameters.getDisjunctiveRefinements(attributeName)
-            : searchParameters.getConjunctiveRefinements(attributeName);
+            ? searchParameters.getDisjunctiveRefinements(attribute)
+            : searchParameters.getConjunctiveRefinements(attribute);
 
         if (
           values.length === 0 ||
           (uiState.refinementList &&
-            isEqual(values, uiState.refinementList[attributeName]))
+            isEqual(values, uiState.refinementList[attribute]))
         ) {
           return uiState;
         }
@@ -442,21 +438,21 @@ export default function connectRefinementList(renderFn, unmountFn) {
           ...uiState,
           refinementList: {
             ...uiState.refinementList,
-            [attributeName]: values,
+            [attribute]: values,
           },
         };
       },
 
       getWidgetSearchParameters(searchParameters, { uiState }) {
         const values =
-          uiState.refinementList && uiState.refinementList[attributeName];
+          uiState.refinementList && uiState.refinementList[attribute];
         if (values === undefined) return searchParameters;
         return values.reduce(
           (sp, v) =>
             operator === 'or'
-              ? sp.addDisjunctiveFacetRefinement(attributeName, v)
-              : sp.addFacetRefinement(attributeName, v),
-          searchParameters.clearRefinements(attributeName)
+              ? sp.addDisjunctiveFacetRefinement(attribute, v)
+              : sp.addFacetRefinement(attribute, v),
+          searchParameters.clearRefinements(attribute)
         );
       },
     };
diff --git a/src/widgets/hierarchical-menu/__tests__/__snapshots__/hierarchical-menu-test.js.snap b/src/widgets/hierarchical-menu/__tests__/__snapshots__/hierarchical-menu-test.js.snap
index b150842410..61020c3300 100644
--- a/src/widgets/hierarchical-menu/__tests__/__snapshots__/hierarchical-menu-test.js.snap
+++ b/src/widgets/hierarchical-menu/__tests__/__snapshots__/hierarchical-menu-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hierarchicalMenu() render calls ReactDOM.render 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -19,6 +19,7 @@ exports[`hierarchicalMenu() render calls ReactDOM.render 1`] = `
       "root": "ais-hierarchical-menu",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -60,7 +61,7 @@ exports[`hierarchicalMenu() render calls ReactDOM.render 1`] = `
 `;
 
 exports[`hierarchicalMenu() render has a templates option 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -78,6 +79,7 @@ exports[`hierarchicalMenu() render has a templates option 1`] = `
       "root": "ais-hierarchical-menu",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -119,7 +121,7 @@ exports[`hierarchicalMenu() render has a templates option 1`] = `
 `;
 
 exports[`hierarchicalMenu() render has a transformItems options 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -137,6 +139,7 @@ exports[`hierarchicalMenu() render has a transformItems options 1`] = `
       "root": "ais-hierarchical-menu",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -180,7 +183,7 @@ exports[`hierarchicalMenu() render has a transformItems options 1`] = `
 `;
 
 exports[`hierarchicalMenu() render sets facetValues to empty array when no results 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -198,6 +201,7 @@ exports[`hierarchicalMenu() render sets facetValues to empty array when no resul
       "root": "ais-hierarchical-menu",
     }
   }
+  depth={0}
   facetValues={Array []}
   isShowingMore={false}
   shouldAutoHideContainer={true}
@@ -228,7 +232,7 @@ exports[`hierarchicalMenu() render sets facetValues to empty array when no resul
 `;
 
 exports[`hierarchicalMenu() render sets shouldAutoHideContainer to true when no results 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -246,6 +250,7 @@ exports[`hierarchicalMenu() render sets shouldAutoHideContainer to true when no
       "root": "ais-hierarchical-menu",
     }
   }
+  depth={0}
   facetValues={Array []}
   isShowingMore={false}
   shouldAutoHideContainer={true}
@@ -276,7 +281,7 @@ exports[`hierarchicalMenu() render sets shouldAutoHideContainer to true when no
 `;
 
 exports[`hierarchicalMenu() render understand provided cssClasses 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -294,6 +299,7 @@ exports[`hierarchicalMenu() render understand provided cssClasses 1`] = `
       "root": "ais-hierarchical-menu root cx",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
diff --git a/src/widgets/menu/__tests__/__snapshots__/menu-test.js.snap b/src/widgets/menu/__tests__/__snapshots__/menu-test.js.snap
index 20c39b0f6e..5137cde5cb 100644
--- a/src/widgets/menu/__tests__/__snapshots__/menu-test.js.snap
+++ b/src/widgets/menu/__tests__/__snapshots__/menu-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`menu render renders transformed items 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -18,6 +18,7 @@ exports[`menu render renders transformed items 1`] = `
       "root": "ais-menu",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -59,7 +60,7 @@ exports[`menu render renders transformed items 1`] = `
 `;
 
 exports[`menu render snapshot 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
   collapsible={false}
   createURL={[Function]}
@@ -76,6 +77,7 @@ exports[`menu render snapshot 1`] = `
       "root": "ais-menu",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
diff --git a/src/widgets/numeric-refinement-list/__tests__/__snapshots__/numeric-refinement-list-test.js.snap b/src/widgets/numeric-refinement-list/__tests__/__snapshots__/numeric-refinement-list-test.js.snap
index ac3a73b639..1c21e2a248 100644
--- a/src/widgets/numeric-refinement-list/__tests__/__snapshots__/numeric-refinement-list-test.js.snap
+++ b/src/widgets/numeric-refinement-list/__tests__/__snapshots__/numeric-refinement-list-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`numericRefinementList() calls twice ReactDOM.render(<RefinementList props />, container) 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   collapsible={false}
   createURL={[Function]}
   cssClasses={
@@ -17,6 +17,7 @@ exports[`numericRefinementList() calls twice ReactDOM.render(<RefinementList pro
       "root": "ais-refinement-list root cx",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -70,7 +71,7 @@ exports[`numericRefinementList() calls twice ReactDOM.render(<RefinementList pro
 `;
 
 exports[`numericRefinementList() calls twice ReactDOM.render(<RefinementList props />, container) 2`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   collapsible={false}
   createURL={[Function]}
   cssClasses={
@@ -86,6 +87,7 @@ exports[`numericRefinementList() calls twice ReactDOM.render(<RefinementList pro
       "root": "ais-refinement-list root cx",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -139,7 +141,7 @@ exports[`numericRefinementList() calls twice ReactDOM.render(<RefinementList pro
 `;
 
 exports[`numericRefinementList() renders with transformed items 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   collapsible={false}
   createURL={[Function]}
   cssClasses={
@@ -155,6 +157,7 @@ exports[`numericRefinementList() renders with transformed items 1`] = `
       "root": "ais-refinement-list",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
diff --git a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
index a25fdd6910..70cd51ea75 100644
--- a/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
+++ b/src/widgets/refinement-list/__tests__/__snapshots__/refinement-list-test.js.snap
@@ -1,24 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`refinementList() render renders transformed items correctly 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   canToggleShowMore={false}
-  collapsible={false}
   createURL={[Function]}
   cssClasses={
     Object {
-      "active": "ais-refinement-list--item__active",
-      "body": "ais-refinement-list--body",
-      "checkbox": "ais-refinement-list--checkbox",
-      "count": "ais-refinement-list--count",
-      "footer": "ais-refinement-list--footer",
-      "header": "ais-refinement-list--header",
-      "item": "ais-refinement-list--item",
-      "label": "ais-refinement-list--label",
-      "list": "ais-refinement-list--list",
-      "root": "ais-refinement-list",
+      "checkbox": "ais-RefinementList-checkbox",
+      "count": "ais-RefinementList-count",
+      "disabledShowMore": "ais-RefinementList-showMore--disabled",
+      "item": "ais-RefinementList-item",
+      "label": "ais-RefinementList-label",
+      "labelText": "ais-RefinementList-labelText",
+      "list": "ais-RefinementList-list",
+      "noRefinementRoot": "ais-RefinementList--noRefinement",
+      "noResults": "ais-RefinementList-noResults",
+      "root": "ais-RefinementList",
+      "searchBox": "ais-RefinementList-searchBox",
+      "selectedItem": "ais-RefinementList-item--selected",
+      "showMore": "ais-RefinementList-showMore",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -45,29 +48,24 @@ exports[`refinementList() render renders transformed items correctly 1`] = `
   }
   isFromSearch={false}
   isShowingMore={false}
-  searchIsAlwaysActive={false}
+  searchIsAlwaysActive={true}
   searchPlaceholder="Search for other..."
-  shouldAutoHideContainer={false}
   showMore={false}
   templateProps={
     Object {
       "templates": Object {
-        "footer": "",
-        "header": "",
         "item": "<label class=\\"{{cssClasses.label}}\\">
   <input type=\\"checkbox\\"
          class=\\"{{cssClasses.checkbox}}\\"
          value=\\"{{value}}\\"
          {{#isRefined}}checked{{/isRefined}} />
-      {{{highlighted}}}
+  <span class=\\"{{cssClasses.labelText}}\\">{{{highlighted}}}</span>
   <span class=\\"{{cssClasses.count}}\\">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>",
       },
       "templatesConfig": Object {},
       "transformData": undefined,
       "useCustomCompileOptions": Object {
-        "footer": false,
-        "header": false,
         "item": false,
       },
     }
diff --git a/src/widgets/refinement-list/__tests__/refinement-list-test.js b/src/widgets/refinement-list/__tests__/refinement-list-test.js
index ec1bb97b68..0c2182f93f 100644
--- a/src/widgets/refinement-list/__tests__/refinement-list-test.js
+++ b/src/widgets/refinement-list/__tests__/refinement-list-test.js
@@ -4,9 +4,7 @@ import refinementList from '../refinement-list.js';
 const instantSearchInstance = { templatesConfig: {} };
 
 describe('refinementList()', () => {
-  let autoHideContainer;
   let container;
-  let headerFooter;
   let options;
   let widget;
   let ReactDOM;
@@ -16,16 +14,12 @@ describe('refinementList()', () => {
 
     ReactDOM = { render: jest.fn() };
     refinementList.__Rewire__('render', ReactDOM.render);
-    autoHideContainer = jest.fn();
-    refinementList.__Rewire__('autoHideContainerHOC', autoHideContainer);
-    headerFooter = jest.fn();
-    refinementList.__Rewire__('headerFooterHOC', headerFooter);
   });
 
   describe('instantiated with wrong parameters', () => {
     it('should fail if no container', () => {
       // Given
-      options = { container: undefined, attributeName: 'foo' };
+      options = { container: undefined, attribute: 'foo' };
 
       // Then
       expect(() => {
@@ -48,7 +42,7 @@ describe('refinementList()', () => {
     }
 
     beforeEach(() => {
-      options = { container, attributeName: 'attributeName' };
+      options = { container, attribute: 'attribute' };
       results = {
         getFacetValues: jest
           .fn()
@@ -63,15 +57,18 @@ describe('refinementList()', () => {
         // Given
         const cssClasses = {
           root: ['root', 'cx'],
-          header: 'header',
-          body: 'body',
-          footer: 'footer',
+          noRefinementRoot: 'noRefinementRoot',
           list: 'list',
           item: 'item',
-          active: 'active',
+          selectedItem: 'selectedItem',
+          searchBox: 'searchBox',
           label: 'label',
           checkbox: 'checkbox',
+          labelText: 'labelText',
           count: 'count',
+          noResults: 'noResults',
+          showMore: 'showMore',
+          disabledShowMore: 'disabledShowMore',
         };
 
         // When
@@ -79,108 +76,45 @@ describe('refinementList()', () => {
         const actual = ReactDOM.render.mock.calls[0][0].props.cssClasses;
 
         // Then
-        expect(actual.root).toBe('ais-refinement-list root cx');
-        expect(actual.header).toBe('ais-refinement-list--header header');
-        expect(actual.body).toBe('ais-refinement-list--body body');
-        expect(actual.footer).toBe('ais-refinement-list--footer footer');
-        expect(actual.list).toBe('ais-refinement-list--list list');
-        expect(actual.item).toBe('ais-refinement-list--item item');
-        expect(actual.active).toBe('ais-refinement-list--item__active active');
-        expect(actual.label).toBe('ais-refinement-list--label label');
-        expect(actual.checkbox).toBe('ais-refinement-list--checkbox checkbox');
-        expect(actual.count).toBe('ais-refinement-list--count count');
-      });
-    });
-
-    describe('autoHideContainer', () => {
-      it('should set shouldAutoHideContainer to false if there are facetValues', () => {
-        // Given
-        results.getFacetValues = jest
-          .fn()
-          .mockReturnValue([{ name: 'foo' }, { name: 'bar' }]);
-
-        // When
-        renderWidget();
-        const actual =
-          ReactDOM.render.mock.calls[0][0].props.shouldAutoHideContainer;
-
-        // Then
-        expect(actual).toBe(false);
-      });
-      it('should set shouldAutoHideContainer to true if no facet values', () => {
-        // Given
-        results.getFacetValues = jest.fn().mockReturnValue([]);
-
-        // When
-        renderWidget();
-        const actual =
-          ReactDOM.render.mock.calls[0][0].props.shouldAutoHideContainer;
-
-        // Then
-        expect(actual).toBe(true);
-      });
-    });
-
-    describe('header', () => {
-      it('should pass the refined count to the header data', () => {
-        // Given
-        const facetValues = [
-          {
-            name: 'foo',
-            isRefined: true,
-          },
-          {
-            name: 'bar',
-            isRefined: true,
-          },
-          {
-            name: 'baz',
-            isRefined: false,
-          },
-        ];
-        results.getFacetValues = jest.fn().mockReturnValue(facetValues);
-
-        // When
-        renderWidget();
-        const props = ReactDOM.render.mock.calls[0][0].props;
-
-        // Then
-        expect(props.headerFooterData.header.refinedFacetsCount).toEqual(2);
-      });
-
-      it('should dynamically update the header template on subsequent renders', () => {
-        // Given
-        const widgetOptions = { container, attributeName: 'type' };
-        const initOptions = { helper, createURL, instantSearchInstance };
-        const facetValues = [
-          {
-            name: 'foo',
-            isRefined: true,
-          },
-          {
-            name: 'bar',
-            isRefined: false,
-          },
-        ];
-        results.getFacetValues = jest.fn().mockReturnValue(facetValues);
-        const renderOptions = { results, helper, state };
-
-        // When
-        widget = refinementList(widgetOptions);
-        widget.init(initOptions);
-        widget.render(renderOptions);
-
-        // Then
-        let props = ReactDOM.render.mock.calls[0][0].props;
-        expect(props.headerFooterData.header.refinedFacetsCount).toEqual(1);
-
-        // When... second render call
-        facetValues[1].isRefined = true;
-        widget.render(renderOptions);
-
-        // Then
-        props = ReactDOM.render.mock.calls[1][0].props;
-        expect(props.headerFooterData.header.refinedFacetsCount).toEqual(2);
+        expect(actual.root).toMatchInlineSnapshot(
+          `"ais-RefinementList root cx"`
+        );
+        expect(actual.noRefinementRoot).toMatchInlineSnapshot(
+          `"ais-RefinementList--noRefinement noRefinementRoot"`
+        );
+        expect(actual.list).toMatchInlineSnapshot(
+          `"ais-RefinementList-list list"`
+        );
+        expect(actual.item).toMatchInlineSnapshot(
+          `"ais-RefinementList-item item"`
+        );
+        expect(actual.selectedItem).toMatchInlineSnapshot(
+          `"ais-RefinementList-item--selected selectedItem"`
+        );
+        expect(actual.searchBox).toMatchInlineSnapshot(
+          `"ais-RefinementList-searchBox searchBox"`
+        );
+        expect(actual.label).toMatchInlineSnapshot(
+          `"ais-RefinementList-label label"`
+        );
+        expect(actual.checkbox).toMatchInlineSnapshot(
+          `"ais-RefinementList-checkbox checkbox"`
+        );
+        expect(actual.labelText).toMatchInlineSnapshot(
+          `"ais-RefinementList-labelText labelText"`
+        );
+        expect(actual.count).toMatchInlineSnapshot(
+          `"ais-RefinementList-count count"`
+        );
+        expect(actual.noResults).toMatchInlineSnapshot(
+          `"ais-RefinementList-noResults noResults"`
+        );
+        expect(actual.showMore).toMatchInlineSnapshot(
+          `"ais-RefinementList-showMore showMore"`
+        );
+        expect(actual.disabledShowMore).toMatchInlineSnapshot(
+          `"ais-RefinementList-showMore--disabled disabledShowMore"`
+        );
       });
     });
 
@@ -206,7 +140,7 @@ describe('refinementList()', () => {
     it('should return a configuration with the highest limit value (default value)', () => {
       const opts = {
         container,
-        attributeName: 'attributeName',
+        attribute: 'attribute',
         limit: 1,
         showMore: {},
       };
@@ -218,7 +152,7 @@ describe('refinementList()', () => {
     it('should return a configuration with the highest limit value (custom value)', () => {
       const opts = {
         container,
-        attributeName: 'attributeName',
+        attribute: 'attribute',
         limit: 1,
         showMore: { limit: 99 },
       };
@@ -230,7 +164,7 @@ describe('refinementList()', () => {
     it('should not accept a show more limit that is < limit', () => {
       const opts = {
         container,
-        attributeName: 'attributeName',
+        attribute: 'attribute',
         limit: 100,
         showMore: { limit: 1 },
       };
diff --git a/src/widgets/refinement-list/defaultTemplates.js b/src/widgets/refinement-list/defaultTemplates.js
index 1238084e3b..5808cf0419 100644
--- a/src/widgets/refinement-list/defaultTemplates.js
+++ b/src/widgets/refinement-list/defaultTemplates.js
@@ -1,12 +1,10 @@
 export default {
-  header: '',
   item: `<label class="{{cssClasses.label}}">
   <input type="checkbox"
          class="{{cssClasses.checkbox}}"
          value="{{value}}"
          {{#isRefined}}checked{{/isRefined}} />
-      {{{highlighted}}}
+  <span class="{{cssClasses.labelText}}">{{{highlighted}}}</span>
   <span class="{{cssClasses.count}}">{{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}</span>
 </label>`,
-  footer: '',
 };
diff --git a/src/widgets/refinement-list/refinement-list.js b/src/widgets/refinement-list/refinement-list.js
index 842056829c..633a4ac863 100644
--- a/src/widgets/refinement-list/refinement-list.js
+++ b/src/widgets/refinement-list/refinement-list.js
@@ -9,13 +9,13 @@ import sffvDefaultTemplates from './defaultTemplates.searchForFacetValue.js';
 import getShowMoreConfig from '../../lib/show-more/getShowMoreConfig.js';
 
 import {
-  bemHelper,
   prepareTemplateProps,
   getContainerNode,
   prefixKeys,
 } from '../../lib/utils.js';
+import { component } from '../../lib/suit';
 
-const bem = bemHelper('ais-refinement-list');
+const suit = component('RefinementList');
 
 const renderer = ({
   containerNode,
@@ -23,10 +23,8 @@ const renderer = ({
   transformData,
   templates,
   renderState,
-  collapsible,
-  autoHideContainer,
   showMoreConfig,
-  searchForFacetValues,
+  searchable,
 }) => (
   {
     refine,
@@ -35,7 +33,6 @@ const renderer = ({
     searchForItems,
     isFromSearch,
     instantSearchInstance,
-    canRefine,
     toggleShowMore,
     isShowingMore,
     hasExhaustiveItems,
@@ -60,24 +57,20 @@ const renderer = ({
 
   render(
     <RefinementList
-      collapsible={collapsible}
       createURL={createURL}
       cssClasses={cssClasses}
       facetValues={items}
       headerFooterData={headerFooterData}
-      shouldAutoHideContainer={autoHideContainer && canRefine === false}
       templateProps={renderState.templateProps}
       toggleRefinement={refine}
-      searchFacetValues={searchForFacetValues ? searchForItems : undefined}
-      searchPlaceholder={
-        searchForFacetValues.placeholder || 'Search for other...'
-      }
+      searchFacetValues={searchable ? searchForItems : undefined}
+      searchPlaceholder={searchable.placeholder || 'Search for other...'}
       isFromSearch={isFromSearch}
       showMore={showMoreConfig !== null}
       toggleShowMore={toggleShowMore}
       isShowingMore={isShowingMore}
       hasExhaustiveItems={hasExhaustiveItems}
-      searchIsAlwaysActive={searchForFacetValues.isAlwaysActive || false}
+      searchIsAlwaysActive={searchable.isAlwaysActive || true}
       canToggleShowMore={canToggleShowMore}
     />,
     containerNode
@@ -87,18 +80,15 @@ const renderer = ({
 const usage = `Usage:
 refinementList({
   container,
-  attributeName,
+  attribute,
   [ operator='or' ],
   [ sortBy=['isRefined', 'count:desc', 'name:asc'] ],
   [ limit=10 ],
-  [ cssClasses.{root, header, body, footer, list, item, active, label, checkbox, count}],
-  [ templates.{header,item,footer} ],
+  [ cssClasses.{root, noRefinementRoot, searchBox, list, item, selectedItem, label, checkbox, labelText, count, noResults, showMore, disabledShowMore}],
+  [ templates.{item} ],
   [ transformData.{item} ],
-  [ autoHideContainer=true ],
-  [ collapsible=false ],
   [ showMore.{templates: {active, inactive}, limit} ],
-  [ collapsible=false ],
-  [ searchForFacetValues.{placeholder, templates: {noResults}, isAlwaysActive, escapeFacetValues}],
+  [ searchable.{placeholder, templates: {noResults}, isAlwaysActive = true, escapeFacetValues = true}],
   [ transformItems ],
 })`;
 
@@ -111,9 +101,9 @@ refinementList({
  * @typedef {Object} SearchForFacetOptions
  * @property {string} [placeholder] Value of the search field placeholder.
  * @property {SearchForFacetTemplates} [templates] Templates to use for search for facet values.
- * @property {boolean} [isAlwaysActive=false] When `false` the search field will become disabled if
+ * @property {boolean} [isAlwaysActive=true] When `false` the search field will become disabled if
  * there are less items to display than the `options.limit`, otherwise the search field is always usable.
- * @property {boolean} [escapeFacetValues=false] When activated, it will escape the facet values that are returned
+ * @property {boolean} [escapeFacetValues=true] When activated, it will escape the facet values that are returned
  * from Algolia. In this case, the surrounding tags will always be `<mark></mark>`.
  */
 
@@ -131,9 +121,7 @@ refinementList({
 
 /**
  * @typedef {Object} RefinementListTemplates
- * @property  {string|function(object):string} [header] Header template, provided with `refinedFacetsCount` data property.
  * @property  {string|function(RefinementListItemData):string} [item] Item template, provided with `label`, `highlighted`, `value`, `count`, `isRefined`, `url` data properties.
- * @property  {string|function} [footer] Footer template.
  */
 
 /**
@@ -155,39 +143,33 @@ refinementList({
 /**
  * @typedef {Object} RefinementListCSSClasses
  * @property {string|string[]} [root] CSS class to add to the root element.
- * @property {string|string[]} [header] CSS class to add to the header element.
- * @property {string|string[]} [body] CSS class to add to the body element.
- * @property {string|string[]} [footer] CSS class to add to the footer element.
+ * @property {string|string[]} [noRefinementRoot] CSS class to add to the root element when no refinements.
+ * @property {string|string[]} [noResults] CSS class to add to the root element with no results.
  * @property {string|string[]} [list] CSS class to add to the list element.
  * @property {string|string[]} [item] CSS class to add to each item element.
- * @property {string|string[]} [active] CSS class to add to each active element.
+ * @property {string|string[]} [selectedItem] CSS class to add to each selected element.
  * @property {string|string[]} [label] CSS class to add to each label element (when using the default template).
  * @property {string|string[]} [checkbox] CSS class to add to each checkbox element (when using the default template).
- * @property {string|string[]} [count] CSS class to add to each count element (when using the default template).
- */
-
-/**
- * @typedef {Object} RefinementListCollapsibleOptions
- * @property {boolean} [collapsed] Initial collapsed state of a collapsible widget.
+ * @property {string|string[]} [labelText] CSS class to add to each label text element.
+ * @property {string|string[]} [showMore] CSS class to add to the show more element
+ * @property {string|string[]} [disabledShowMore] CSS class to add to the disabledshow more element
  */
 
 /**
  * @typedef {Object} RefinementListWidgetOptions
  * @property {string|HTMLElement} container CSS Selector or HTMLElement to insert the widget.
- * @property {string} attributeName Name of the attribute for faceting.
+ * @property {string} attribute Name of the attribute for faceting.
  * @property {"and"|"or"} [operator="or"] How to apply refinements. Possible values: `or`, `and`
  * @property {string[]|function} [sortBy=["isRefined", "count:desc", "name:asc"]] How to sort refinements. Possible values: `count:asc` `count:desc` `name:asc` `name:desc` `isRefined`.
  *
  * You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  * @property {number} [limit=10] How much facet values to get. When the show more feature is activated this is the minimum number of facets requested (the show more button is not in active state).
- * @property {SearchForFacetOptions|boolean} [searchForFacetValues=false] Add a search input to let the user search for more facet values. In order to make this feature work, you need to make the attribute searchable [using the API](https://www.algolia.com/doc/guides/searching/faceting/?language=js#declaring-a-searchable-attribute-for-faceting) or [the dashboard](https://www.algolia.com/explorer/display/).
+ * @property {SearchForFacetOptions|boolean} [searchable=false] Add a search input to let the user search for more facet values. In order to make this feature work, you need to make the attribute searchable [using the API](https://www.algolia.com/doc/guides/searching/faceting/?language=js#declaring-a-searchable-attribute-for-faceting) or [the dashboard](https://www.algolia.com/explorer/display/).
  * @property {RefinementListShowMoreOptions|boolean} [showMore=false] Limit the number of results and display a showMore button.
  * @property {RefinementListTemplates} [templates] Templates to use for the widget.
  * @property {RefinementListTransforms} [transformData] Functions to update the values before applying the templates.
- * @property {boolean} [autoHideContainer=true] Hide the container when no items in the refinement list.
  * @property {RefinementListCSSClasses} [cssClasses] CSS classes to add to the wrapping elements.
- * @property {RefinementListCollapsibleOptions|boolean} [collapsible=false] If true, the user can collapse the widget. If the use clicks on the header, it will hide the content and the footer.
  */
 
 /**
@@ -203,7 +185,7 @@ refinementList({
  *
  * @requirements
  *
- * The attribute passed to `attributeName` must be declared as an
+ * The attribute passed to `attribute` must be declared as an
  * [attribute for faceting](https://www.algolia.com/doc/guides/searching/faceting/#declaring-attributes-for-faceting)
  * in your Algolia settings.
  *
@@ -218,7 +200,7 @@ refinementList({
  * search.addWidget(
  *   instantsearch.widgets.refinementList({
  *     container: '#brands',
- *     attributeName: 'brand',
+ *     attribute: 'brand',
  *     operator: 'or',
  *     limit: 10,
  *     templates: {
@@ -229,17 +211,15 @@ refinementList({
  */
 export default function refinementList({
   container,
-  attributeName,
+  attribute,
   operator = 'or',
   sortBy = ['isRefined', 'count:desc', 'name:asc'],
   limit = 10,
   cssClasses: userCssClasses = {},
   templates = defaultTemplates,
-  collapsible = false,
   transformData,
-  autoHideContainer = true,
   showMore = false,
-  searchForFacetValues = false,
+  searchable = false,
   transformItems,
 } = {}) {
   if (!container) {
@@ -253,16 +233,16 @@ export default function refinementList({
     );
   }
 
-  const escapeFacetValues = searchForFacetValues
-    ? Boolean(searchForFacetValues.escapeFacetValues)
+  const escapeFacetValues = searchable
+    ? Boolean(searchable.escapeFacetValues)
     : false;
   const showMoreLimit = (showMoreConfig && showMoreConfig.limit) || limit;
   const containerNode = getContainerNode(container);
   const showMoreTemplates = showMoreConfig
     ? prefixKeys('show-more-', showMoreConfig.templates)
     : {};
-  const searchForValuesTemplates = searchForFacetValues
-    ? searchForFacetValues.templates || sffvDefaultTemplates
+  const searchForValuesTemplates = searchable
+    ? searchable.templates || sffvDefaultTemplates
     : {};
   const allTemplates = {
     ...templates,
@@ -271,16 +251,37 @@ export default function refinementList({
   };
 
   const cssClasses = {
-    root: cx(bem(null), userCssClasses.root),
-    header: cx(bem('header'), userCssClasses.header),
-    body: cx(bem('body'), userCssClasses.body),
-    footer: cx(bem('footer'), userCssClasses.footer),
-    list: cx(bem('list'), userCssClasses.list),
-    item: cx(bem('item'), userCssClasses.item),
-    active: cx(bem('item', 'active'), userCssClasses.active),
-    label: cx(bem('label'), userCssClasses.label),
-    checkbox: cx(bem('checkbox'), userCssClasses.checkbox),
-    count: cx(bem('count'), userCssClasses.count),
+    root: cx(suit(), userCssClasses.root),
+    noRefinementRoot: cx(
+      suit({ modifierName: 'noRefinement' }),
+      userCssClasses.noRefinementRoot
+    ),
+    list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
+    item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
+    selectedItem: cx(
+      suit({ descendantName: 'item', modifierName: 'selected' }),
+      userCssClasses.selectedItem
+    ),
+    searchBox: cx(
+      suit({ descendantName: 'searchBox' }),
+      userCssClasses.searchBox
+    ),
+    label: cx(suit({ descendantName: 'label' }), userCssClasses.label),
+    checkbox: cx(suit({ descendantName: 'checkbox' }), userCssClasses.checkbox),
+    labelText: cx(
+      suit({ descendantName: 'labelText' }),
+      userCssClasses.labelText
+    ),
+    count: cx(suit({ descendantName: 'count' }), userCssClasses.count),
+    noResults: cx(
+      suit({ descendantName: 'noResults' }),
+      userCssClasses.noResults
+    ),
+    showMore: cx(suit({ descendantName: 'showMore' }), userCssClasses.showMore),
+    disabledShowMore: cx(
+      suit({ descendantName: 'showMore', modifierName: 'disabled' }),
+      userCssClasses.disabledShowMore
+    ),
   };
 
   const specializedRenderer = renderer({
@@ -289,10 +290,8 @@ export default function refinementList({
     transformData,
     templates: allTemplates,
     renderState: {},
-    collapsible,
-    autoHideContainer,
     showMoreConfig,
-    searchForFacetValues,
+    searchable,
   });
 
   try {
@@ -300,7 +299,7 @@ export default function refinementList({
       unmountComponentAtNode(containerNode)
     );
     return makeWidget({
-      attributeName,
+      attribute,
       operator,
       limit,
       showMoreLimit,
diff --git a/src/widgets/star-rating/__tests__/__snapshots__/star-rating-test.js.snap b/src/widgets/star-rating/__tests__/__snapshots__/star-rating-test.js.snap
index 4b45204d06..4f0c2171cf 100644
--- a/src/widgets/star-rating/__tests__/__snapshots__/star-rating-test.js.snap
+++ b/src/widgets/star-rating/__tests__/__snapshots__/star-rating-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`starRating() calls twice ReactDOM.render(<RefinementList props />, container) 1`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   collapsible={false}
   createURL={[Function]}
   cssClasses={
@@ -20,6 +20,7 @@ exports[`starRating() calls twice ReactDOM.render(<RefinementList props />, cont
       "star": "ais-star-rating--star",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {
@@ -114,7 +115,7 @@ exports[`starRating() calls twice ReactDOM.render(<RefinementList props />, cont
 `;
 
 exports[`starRating() calls twice ReactDOM.render(<RefinementList props />, container) 2`] = `
-<HeaderFooter-AutoHide
+<RefinementList
   collapsible={false}
   createURL={[Function]}
   cssClasses={
@@ -133,6 +134,7 @@ exports[`starRating() calls twice ReactDOM.render(<RefinementList props />, cont
       "star": "ais-star-rating--star",
     }
   }
+  depth={0}
   facetValues={
     Array [
       Object {

From 0233f9ddf6b45ef3b2022d9b8ba100cb7611e8fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 10:33:03 +0200
Subject: [PATCH 02/16] feat(refinement-list): update stories

---
 .../stories/refinement-list.stories.js        | 48 +++++--------------
 1 file changed, 13 insertions(+), 35 deletions(-)

diff --git a/dev/app/builtin/stories/refinement-list.stories.js b/dev/app/builtin/stories/refinement-list.stories.js
index 979a6acc6c..5ceee805ce 100644
--- a/dev/app/builtin/stories/refinement-list.stories.js
+++ b/dev/app/builtin/stories/refinement-list.stories.js
@@ -14,12 +14,9 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'brand',
+            attribute: 'brand',
             operator: 'or',
             limit: 10,
-            templates: {
-              header: 'Brands',
-            },
           })
         );
       })
@@ -30,16 +27,13 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'brand',
+            attribute: 'brand',
             operator: 'or',
             limit: 3,
-            templates: {
-              header: 'Brands with show more',
-            },
             showMore: {
               templates: {
-                active: '<button>Show less</button>',
-                inactive: '<button>Show more</button>',
+                active: 'Show less',
+                inactive: 'Show more',
               },
               limit: 10,
             },
@@ -53,13 +47,10 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'brand',
+            attribute: 'brand',
             operator: 'or',
             limit: 10,
-            templates: {
-              header: 'Searchable brands',
-            },
-            searchForFacetValues: {
+            searchable: {
               placeholder: 'Find other brands...',
               templates: {
                 noResults: 'No results',
@@ -75,13 +66,10 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'brand',
+            attribute: 'brand',
             operator: 'or',
             limit: 10,
-            templates: {
-              header: 'Searchable brands',
-            },
-            searchForFacetValues: {
+            searchable: {
               placeholder: 'Find other brands...',
             },
           })
@@ -94,17 +82,13 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'price_range',
+            attribute: 'price_range',
             operator: 'and',
             limit: 10,
             cssClasses: {
-              header: 'facet-title',
               item: 'facet-value checkbox',
               count: 'facet-count pull-right',
-              active: 'facet-active',
-            },
-            templates: {
-              header: 'Price ranges',
+              selectedItem: 'facet-active',
             },
             transformData(data) {
               data.label = data.label
@@ -122,12 +106,9 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'brand',
+            attribute: 'brand',
             operator: 'or',
             limit: 10,
-            templates: {
-              header: 'Transformed brands',
-            },
             transformItems: items =>
               items.map(item => ({
                 ...item,
@@ -144,13 +125,10 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.refinementList({
             container,
-            attributeName: 'brand',
+            attribute: 'brand',
             operator: 'or',
             limit: 10,
-            templates: {
-              header: 'Transformed searchable brands',
-            },
-            searchForFacetValues: {
+            searchable: {
               placeholder: 'Find other brands...',
               templates: {
                 noResults: 'No results',

From 2c1cfcf2164e69cef704fd10ace13889af5a1cfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 11:32:40 +0200
Subject: [PATCH 03/16] feat(refinement-list): support noRefinement class

---
 src/components/RefinementList/RefinementList.js             | 6 +++++-
 .../__tests__/__snapshots__/RefinementList-test.js.snap     | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 1a4697e76e..1e05eadd2c 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -208,10 +208,14 @@ class RefinementList extends Component {
         />
       ) : null;
 
+    const hasRefinements = (this.props.facetValues || []).some(
+      facet => facet.isRefined
+    );
+
     return (
       <div
         className={cx(this.props.cssClasses.root, {
-          [this.props.cssClasses.noRefinementRoot]: false,
+          [this.props.cssClasses.noRefinementRoot]: !hasRefinements,
         })}
       >
         {searchBox}
diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
index 581f5e32ea..c3b8bff1bc 100644
--- a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
+++ b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
@@ -77,12 +77,12 @@ exports[`RefinementList markup with facets 1`] = `
 
 exports[`RefinementList markup without facets 1`] = `
 <div
-  className="root"
+  className="root noRefinementRoot"
 />
 `;
 
 exports[`RefinementList markup without facets from search 1`] = `
 <div
-  className="root"
+  className="root noRefinementRoot"
 />
 `;

From a9cd7ee7b088842fc4f1669d58b09fac1594da28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 11:37:40 +0200
Subject: [PATCH 04/16] feat(refinement-list): update noRefinement class
 condition

---
 src/components/RefinementList/RefinementList.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 1e05eadd2c..50dd72770d 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -208,14 +208,11 @@ class RefinementList extends Component {
         />
       ) : null;
 
-    const hasRefinements = (this.props.facetValues || []).some(
-      facet => facet.isRefined
-    );
-
     return (
       <div
         className={cx(this.props.cssClasses.root, {
-          [this.props.cssClasses.noRefinementRoot]: !hasRefinements,
+          [this.props.cssClasses.noRefinementRoot]:
+            !this.props.facetValues || this.props.facetValues.length === 0,
         })}
       >
         {searchBox}

From 88facbdad0fbf1a493a65a15be938e9a0572b535 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 11:41:57 +0200
Subject: [PATCH 05/16] refactor: reorder imports

---
 src/components/RefinementList/RefinementList.js     | 5 ++---
 src/components/RefinementList/RefinementListItem.js | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 50dd72770d..b4bde272bb 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -1,12 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'preact-compat';
+import isEqual from 'lodash/isEqual';
 import cx from 'classnames';
-import { isSpecialClick } from '../../lib/utils.js';
 
+import { isSpecialClick } from '../../lib/utils.js';
 import Template from '../Template.js';
 import RefinementListItem from './RefinementListItem.js';
-import isEqual from 'lodash/isEqual';
-
 import SearchBox from '../SearchBox';
 
 class RefinementList extends Component {
diff --git a/src/components/RefinementList/RefinementListItem.js b/src/components/RefinementList/RefinementListItem.js
index cc08b85fa1..f7d6c762ca 100644
--- a/src/components/RefinementList/RefinementListItem.js
+++ b/src/components/RefinementList/RefinementListItem.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'preact-compat';
+import isEqual from 'lodash/isEqual';
 
 import Template from '../Template.js';
-import isEqual from 'lodash/isEqual';
 
 class RefinementListItem extends Component {
   componentWillMount() {

From 6ba58dd49f36b3b4d4b1f7496a6308b82a0a5a78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 11:42:14 +0200
Subject: [PATCH 06/16] docs(migration): conver JSX to HTML

---
 docgen/src/guides/v3-migration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index 79d890e8b5..6ae4da7443 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -609,7 +609,7 @@ Widget removed.
               <g transform="translate(1 1)" strokeWidth="2">
                 <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
                 <path d="M36 18c0-9.94-8.06-18-18-18">
-                  <animateTransform
+                  <animate-transform
                     attributeName="transform"
                     type="rotate"
                     from="0 18 18"

From 28f5f7111ba0c4a7603c51784b811d066fea1e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 11:55:24 +0200
Subject: [PATCH 07/16] refactor(test): reorder props

---
 .../__tests__/RefinementList-test.js          | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index dbf36a41f1..96f755b957 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -295,10 +295,10 @@ describe('RefinementList', () => {
       const props = {
         container: document.createElement('div'),
         attribute: 'attribute',
-        templateProps: {},
-        toggleRefinement: () => {},
         facetValues: [],
         cssClasses,
+        templateProps: {},
+        toggleRefinement: () => {},
       };
       const tree = renderer.create(<RefinementList {...props} />).toJSON();
 
@@ -309,8 +309,10 @@ describe('RefinementList', () => {
       const props = {
         container: document.createElement('div'),
         attribute: 'attribute',
-        searchForFacetValues: x => x,
+        facetValues: [],
         cssClasses,
+        isFromSearch: true,
+        searchForFacetValues: x => x,
         templateProps: {
           templates: {
             item: item => item,
@@ -318,8 +320,6 @@ describe('RefinementList', () => {
           },
         },
         toggleRefinement: () => {},
-        facetValues: [],
-        isFromSearch: true,
       };
       const tree = renderer.create(<RefinementList {...props} />).toJSON();
 
@@ -330,13 +330,6 @@ describe('RefinementList', () => {
       const props = {
         container: document.createElement('div'),
         attribute: 'attribute',
-        toggleRefinement: () => {},
-        createURL: () => {},
-        templateProps: {
-          templates: {
-            item: item => item,
-          },
-        },
         facetValues: [
           {
             label: 'Amazon',
@@ -350,6 +343,13 @@ describe('RefinementList', () => {
           },
         ],
         cssClasses,
+        templateProps: {
+          templates: {
+            item: item => item,
+          },
+        },
+        toggleRefinement: () => {},
+        createURL: () => {},
       };
       const tree = renderer.create(<RefinementList {...props} />).toJSON();
 

From 5fd3a49cc7b2d05dc966c50868b6483915b979be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 27 Sep 2018 14:04:51 +0200
Subject: [PATCH 08/16] feat(refinement-list): default to `mark` tags

---
 .../__tests__/connectRefinementList-test.js          | 12 ++++++------
 .../refinement-list/connectRefinementList.js         |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/connectors/refinement-list/__tests__/connectRefinementList-test.js b/src/connectors/refinement-list/__tests__/connectRefinementList-test.js
index 32bfe718ff..6686016f82 100644
--- a/src/connectors/refinement-list/__tests__/connectRefinementList-test.js
+++ b/src/connectors/refinement-list/__tests__/connectRefinementList-test.js
@@ -778,8 +778,8 @@ describe('connectRefinementList', () => {
     expect(sffvFacet).toBe('category');
     expect(maxNbItems).toBe(2);
     expect(paramOverride).toEqual({
-      highlightPreTag: undefined,
-      highlightPostTag: undefined,
+      highlightPreTag: '<mark>',
+      highlightPostTag: '</mark>',
     });
 
     return Promise.resolve().then(() => {
@@ -885,8 +885,8 @@ describe('connectRefinementList', () => {
     expect(sffvFacet).toBe('category');
     expect(maxNbItems).toBe(2);
     expect(paramOverride).toEqual({
-      highlightPreTag: undefined,
-      highlightPostTag: undefined,
+      highlightPreTag: '<mark>',
+      highlightPostTag: '</mark>',
     });
 
     return Promise.resolve().then(() => {
@@ -987,8 +987,8 @@ describe('connectRefinementList', () => {
     expect(sffvFacet).toBe('category');
     expect(maxNbItems).toBe(2);
     expect(paramOverride).toEqual({
-      highlightPreTag: undefined,
-      highlightPostTag: undefined,
+      highlightPreTag: '<mark>',
+      highlightPostTag: '</mark>',
     });
 
     return Promise.resolve().then(() => {
diff --git a/src/connectors/refinement-list/connectRefinementList.js b/src/connectors/refinement-list/connectRefinementList.js
index 13e82b2ead..1d27b0402a 100644
--- a/src/connectors/refinement-list/connectRefinementList.js
+++ b/src/connectors/refinement-list/connectRefinementList.js
@@ -257,10 +257,10 @@ export default function connectRefinementList(renderFn, unmountFn) {
         const tags = {
           highlightPreTag: escapeFacetValues
             ? tagConfig.highlightPreTag
-            : undefined,
+            : '<mark>',
           highlightPostTag: escapeFacetValues
             ? tagConfig.highlightPostTag
-            : undefined,
+            : '</mark>',
         };
 
         helper

From dcb75c6a722839d052693d740fdd1c1efc79d78c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?=
 <francoischalifour@users.noreply.github.com>
Date: Thu, 27 Sep 2018 15:09:24 +0200
Subject: [PATCH 09/16] revert: convert JSX to HTML

---
 docgen/src/guides/v3-migration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index 6ae4da7443..79d890e8b5 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -609,7 +609,7 @@ Widget removed.
               <g transform="translate(1 1)" strokeWidth="2">
                 <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
                 <path d="M36 18c0-9.94-8.06-18-18-18">
-                  <animate-transform
+                  <animateTransform
                     attributeName="transform"
                     type="rotate"
                     from="0 18 18"

From 9b6b41b727dea59253fdabf81b68273e76c2dc77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 2 Oct 2018 09:49:08 -0700
Subject: [PATCH 10/16] feat: apply changes

---
 .../RefinementList/RefinementList.js          | 35 ++++---
 .../__tests__/RefinementList-test.js          |  3 +-
 .../__snapshots__/RefinementList-test.js.snap | 93 ++++++++++++++++++-
 .../refinement-list/refinement-list.js        |  1 +
 4 files changed, 111 insertions(+), 21 deletions(-)

diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index b4bde272bb..5ffd367afa 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -149,16 +149,13 @@ class RefinementList extends Component {
         .cssClasses.depth,
     });
 
-    const showMoreButtonClassName =
-      this.props.showMore === true && this.props.canToggleShowMore
-        ? this.props.cssClasses.showMore
-        : cx(
-            this.props.cssClasses.showMore,
-            this.props.cssClasses.disabledShowMore
-          );
+    const showMoreButtonClassName = cx(this.props.cssClasses.showMore, {
+      [this.props.cssClasses.disabledShowMore]:
+        this.props.showMore === true && this.props.canToggleShowMore,
+    });
 
-    const showMoreButton =
-      this.props.showMore === true ? (
+    const showMoreButton = this.props.showMore === true &&
+      this.props.canToggleShowMore && (
         <Template
           rootTagName="button"
           templateKey={`show-more-${
@@ -170,12 +167,13 @@ class RefinementList extends Component {
           }}
           {...this.props.templateProps}
         />
-      ) : null;
+      );
 
     const shouldDisableSearchBox =
       this.props.searchIsAlwaysActive !== true &&
       !(this.props.isFromSearch || !this.props.hasExhaustiveItems);
-    const searchBox = this.props.searchFacetValues ? (
+
+    const searchBox = this.props.searchFacetValues && (
       <div className={this.props.cssClasses.searchBox}>
         <SearchBox
           ref={i => {
@@ -187,25 +185,24 @@ class RefinementList extends Component {
           disabled={shouldDisableSearchBox}
         />
       </div>
-    ) : null;
+    );
 
-    const facetValues =
-      this.props.facetValues && this.props.facetValues.length > 0 ? (
+    const facetValues = this.props.facetValues &&
+      this.props.facetValues.length > 0 && (
         <ul className={cssClassList}>
           {this.props.facetValues.map(this._generateFacetItem, this)}
         </ul>
-      ) : null;
+      );
 
-    const noResults =
-      this.props.searchFacetValues &&
+    const noResults = this.props.searchFacetValues &&
       this.props.isFromSearch &&
-      this.props.facetValues.length === 0 ? (
+      this.props.facetValues.length === 0 && (
         <Template
           templateKey="noResults"
           rootProps={{ className: this.props.cssClasses.noResults }}
           {...this.props.templateProps}
         />
-      ) : null;
+      );
 
     return (
       <div
diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index 96f755b957..6b6580d790 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -312,7 +312,8 @@ describe('RefinementList', () => {
         facetValues: [],
         cssClasses,
         isFromSearch: true,
-        searchForFacetValues: x => x,
+        placeholder: 'Search',
+        searchFacetValues: x => x,
         templateProps: {
           templates: {
             item: item => item,
diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
index c3b8bff1bc..a36ee1254e 100644
--- a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
+++ b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
@@ -84,5 +84,96 @@ exports[`RefinementList markup without facets 1`] = `
 exports[`RefinementList markup without facets from search 1`] = `
 <div
   className="root noRefinementRoot"
-/>
+>
+  <div
+    className="searchBox"
+  >
+    <form
+      className="searchbox sbx-sffv"
+      noValidate="novalidate"
+      onReset={[Function]}
+      onSubmit={[Function]}
+    >
+      <svg
+        style={
+          Object {
+            "display": "none",
+          }
+        }
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <symbol
+          id="sbx-icon-search-12"
+          viewBox="0 0 40 41"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
+            fillRule="evenodd"
+          />
+        </symbol>
+        <symbol
+          id="sbx-icon-clear-2"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z"
+            fillRule="evenodd"
+          />
+        </symbol>
+      </svg>
+      <div
+        className="sbx-sffv__wrapper"
+        role="search"
+      >
+        <input
+          autoComplete="off"
+          className="sbx-sffv__input"
+          disabled={false}
+          name="search"
+          onChange={[Function]}
+          required="required"
+          type="search"
+        />
+        <button
+          className="sbx-sffv__submit"
+          title="Submit your search query."
+          type="submit"
+        >
+          <svg
+            aria-label="Search"
+            role="img"
+          >
+            <use
+              xlinkHref="#sbx-icon-search-12"
+            />
+          </svg>
+        </button>
+        <button
+          className="sbx-sffv__reset"
+          title="Clear the search query."
+          type="reset"
+        >
+          <svg
+            aria-label="Reset"
+            role="img"
+          >
+            <use
+              xlinkHref="#sbx-icon-clear-2"
+            />
+          </svg>
+        </button>
+      </div>
+    </form>
+  </div>
+  <div
+    className="noResults"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": Object {},
+      }
+    }
+  />
+</div>
 `;
diff --git a/src/widgets/refinement-list/refinement-list.js b/src/widgets/refinement-list/refinement-list.js
index 633a4ac863..ff6a0a646f 100644
--- a/src/widgets/refinement-list/refinement-list.js
+++ b/src/widgets/refinement-list/refinement-list.js
@@ -153,6 +153,7 @@ refinementList({
  * @property {string|string[]} [labelText] CSS class to add to each label text element.
  * @property {string|string[]} [showMore] CSS class to add to the show more element
  * @property {string|string[]} [disabledShowMore] CSS class to add to the disabledshow more element
+ * @property {string|string[]} [count] CSS class to add to each count element (when using the default template).
  */
 
 /**

From 6e0664ac5ad79e8c7725841de6961b1f1f630fad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 2 Oct 2018 10:03:21 -0700
Subject: [PATCH 11/16] test(refinement-list): migrate tests to Enzyme

---
 .../__tests__/RefinementList-test.js          |  52 ++++--
 .../__snapshots__/RefinementList-test.js.snap | 165 +++++++++++++++++-
 2 files changed, 204 insertions(+), 13 deletions(-)

diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index 6b6580d790..023f1ac99d 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import expect from 'expect';
 import sinon from 'sinon';
 import RefinementList from '../RefinementList';
 import RefinementListItem from '../RefinementListItem';
-import renderer from 'react-test-renderer';
 
 const defaultProps = {
   templateProps: {},
@@ -274,7 +273,7 @@ describe('RefinementList', () => {
     });
   });
 
-  describe('markup', () => {
+  describe('rendering', () => {
     const cssClasses = {
       root: 'root',
       noRefinementRoot: 'noRefinementRoot',
@@ -300,9 +299,9 @@ describe('RefinementList', () => {
         templateProps: {},
         toggleRefinement: () => {},
       };
-      const tree = renderer.create(<RefinementList {...props} />).toJSON();
+      const wrapper = mount(<RefinementList {...props} />);
 
-      expect(tree).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('without facets from search', () => {
@@ -312,7 +311,7 @@ describe('RefinementList', () => {
         facetValues: [],
         cssClasses,
         isFromSearch: true,
-        placeholder: 'Search',
+        searchPlaceholder: 'Search',
         searchFacetValues: x => x,
         templateProps: {
           templates: {
@@ -322,9 +321,9 @@ describe('RefinementList', () => {
         },
         toggleRefinement: () => {},
       };
-      const tree = renderer.create(<RefinementList {...props} />).toJSON();
+      const wrapper = mount(<RefinementList {...props} />);
 
-      expect(tree).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
     });
 
     it('with facets', () => {
@@ -352,9 +351,42 @@ describe('RefinementList', () => {
         toggleRefinement: () => {},
         createURL: () => {},
       };
-      const tree = renderer.create(<RefinementList {...props} />).toJSON();
+      const wrapper = mount(<RefinementList {...props} />);
 
-      expect(tree).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('with facets from search', () => {
+      const props = {
+        container: document.createElement('div'),
+        attribute: 'attribute',
+        facetValues: [
+          {
+            label: 'Amazon',
+            count: 1200,
+            isRefined: false,
+          },
+          {
+            label: 'Google',
+            count: 1000,
+            isRefined: true,
+          },
+        ],
+        cssClasses,
+        isFromSearch: true,
+        searchPlaceholder: 'Search',
+        searchFacetValues: x => x,
+        templateProps: {
+          templates: {
+            item: item => item,
+          },
+        },
+        toggleRefinement: () => {},
+        createURL: () => {},
+      };
+      const wrapper = mount(<RefinementList {...props} />);
+
+      expect(wrapper).toMatchSnapshot();
     });
   });
 });
diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
index a36ee1254e..1f4bb98142 100644
--- a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
+++ b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RefinementList markup with facets 1`] = `
+exports[`RefinementList rendering with facets 1`] = `
 <div
   className="root"
 >
@@ -75,13 +75,171 @@ exports[`RefinementList markup with facets 1`] = `
 </div>
 `;
 
-exports[`RefinementList markup without facets 1`] = `
+exports[`RefinementList rendering with facets from search 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="searchBox"
+  >
+    <form
+      className="searchbox sbx-sffv"
+      noValidate="novalidate"
+      onReset={[Function]}
+      onSubmit={[Function]}
+    >
+      <svg
+        style={
+          Object {
+            "display": "none",
+          }
+        }
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <symbol
+          id="sbx-icon-search-12"
+          viewBox="0 0 40 41"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M30.967 27.727l-.03-.03c-.778-.777-2.038-.777-2.815 0l-1.21 1.21c-.78.78-.778 2.04 0 2.817l.03.03 4.025-4.027zm1.083 1.084L39.24 36c.778.778.78 2.037 0 2.816l-1.21 1.21c-.777.778-2.038.78-2.816 0l-7.19-7.19 4.026-4.025zM15.724 31.45c8.684 0 15.724-7.04 15.724-15.724C31.448 7.04 24.408 0 15.724 0 7.04 0 0 7.04 0 15.724c0 8.684 7.04 15.724 15.724 15.724zm0-3.93c6.513 0 11.793-5.28 11.793-11.794 0-6.513-5.28-11.793-11.793-11.793C9.21 3.93 3.93 9.21 3.93 15.725c0 6.513 5.28 11.793 11.794 11.793z"
+            fillRule="evenodd"
+          />
+        </symbol>
+        <symbol
+          id="sbx-icon-clear-2"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.96 10L.52 1.562 0 1.042 1.04 0l.522.52L10 8.96 18.438.52l.52-.52L20 1.04l-.52.522L11.04 10l8.44 8.438.52.52L18.96 20l-.522-.52L10 11.04l-8.438 8.44-.52.52L0 18.96l.52-.522L8.96 10z"
+            fillRule="evenodd"
+          />
+        </symbol>
+      </svg>
+      <div
+        className="sbx-sffv__wrapper"
+        role="search"
+      >
+        <input
+          autoComplete="off"
+          className="sbx-sffv__input"
+          disabled={false}
+          name="search"
+          onChange={[Function]}
+          placeholder="Search"
+          required="required"
+          type="search"
+        />
+        <button
+          className="sbx-sffv__submit"
+          title="Submit your search query."
+          type="submit"
+        >
+          <svg
+            aria-label="Search"
+            role="img"
+          >
+            <use
+              xlinkHref="#sbx-icon-search-12"
+            />
+          </svg>
+        </button>
+        <button
+          className="sbx-sffv__reset"
+          title="Clear the search query."
+          type="reset"
+        >
+          <svg
+            aria-label="Reset"
+            role="img"
+          >
+            <use
+              xlinkHref="#sbx-icon-clear-2"
+            />
+          </svg>
+        </button>
+      </div>
+    </form>
+  </div>
+  <ul
+    className="list"
+  >
+    <li
+      className="item"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1200,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": false,
+              "label": "Amazon",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+    <li
+      className="item selectedItem"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1000,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": true,
+              "label": "Google",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`RefinementList rendering without facets 1`] = `
 <div
   className="root noRefinementRoot"
 />
 `;
 
-exports[`RefinementList markup without facets from search 1`] = `
+exports[`RefinementList rendering without facets from search 1`] = `
 <div
   className="root noRefinementRoot"
 >
@@ -133,6 +291,7 @@ exports[`RefinementList markup without facets from search 1`] = `
           disabled={false}
           name="search"
           onChange={[Function]}
+          placeholder="Search"
           required="required"
           type="search"
         />

From e93925c4d800d322ff34f52ec08bd888d3da9e11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 2 Oct 2018 10:12:44 -0700
Subject: [PATCH 12/16] fix: remove unnecessary cssClasses prop types

---
 src/components/RefinementList/RefinementListItem.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/RefinementList/RefinementListItem.js b/src/components/RefinementList/RefinementListItem.js
index f7d6c762ca..8f5c7ee806 100644
--- a/src/components/RefinementList/RefinementListItem.js
+++ b/src/components/RefinementList/RefinementListItem.js
@@ -45,11 +45,6 @@ RefinementListItem.propTypes = {
   templateProps: PropTypes.object.isRequired,
   cssClasses: PropTypes.shape({
     item: PropTypes.string,
-    selectedItem: PropTypes.string,
-    label: PropTypes.string,
-    checkbox: PropTypes.string,
-    labelText: PropTypes.string,
-    count: PropTypes.string,
   }),
 };
 

From da00e80fb42030a82b33a690c8b472d2032bd43f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 2 Oct 2018 10:46:53 -0700
Subject: [PATCH 13/16] fix(refinement-list): fix disabledShowMore class

---
 .../RefinementList/RefinementList.js          | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 5ffd367afa..2f9a462208 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -150,24 +150,24 @@ class RefinementList extends Component {
     });
 
     const showMoreButtonClassName = cx(this.props.cssClasses.showMore, {
-      [this.props.cssClasses.disabledShowMore]:
-        this.props.showMore === true && this.props.canToggleShowMore,
+      [this.props.cssClasses.disabledShowMore]: !(
+        this.props.showMore === true && this.props.canToggleShowMore
+      ),
     });
 
-    const showMoreButton = this.props.showMore === true &&
-      this.props.canToggleShowMore && (
-        <Template
-          rootTagName="button"
-          templateKey={`show-more-${
-            this.props.isShowingMore ? 'active' : 'inactive'
-          }`}
-          rootProps={{
-            className: showMoreButtonClassName,
-            onClick: this.props.toggleShowMore,
-          }}
-          {...this.props.templateProps}
-        />
-      );
+    const showMoreButton = this.props.showMore === true && (
+      <Template
+        rootTagName="button"
+        templateKey={`show-more-${
+          this.props.isShowingMore ? 'active' : 'inactive'
+        }`}
+        rootProps={{
+          className: showMoreButtonClassName,
+          onClick: this.props.toggleShowMore,
+        }}
+        {...this.props.templateProps}
+      />
+    );
 
     const shouldDisableSearchBox =
       this.props.searchIsAlwaysActive !== true &&

From eea32e22634def79f388f48525609faf5bc2a781 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Tue, 2 Oct 2018 10:47:08 -0700
Subject: [PATCH 14/16] test(refinement-list): test show more rendering

---
 .../__tests__/RefinementList-test.js          |  66 +++++++
 .../__snapshots__/RefinementList-test.js.snap | 166 ++++++++++++++++++
 2 files changed, 232 insertions(+)

diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index 023f1ac99d..b0d5accba8 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -356,6 +356,72 @@ describe('RefinementList', () => {
       expect(wrapper).toMatchSnapshot();
     });
 
+    it('with facets and show more', () => {
+      const props = {
+        container: document.createElement('div'),
+        attribute: 'attribute',
+        facetValues: [
+          {
+            label: 'Amazon',
+            count: 1200,
+            isRefined: false,
+          },
+          {
+            label: 'Google',
+            count: 1000,
+            isRefined: true,
+          },
+        ],
+        cssClasses,
+        showMore: true,
+        canToggleShowMore: true,
+        templateProps: {
+          templates: {
+            item: item => item,
+            'show-more-inactive': x => x,
+          },
+        },
+        toggleRefinement: () => {},
+        createURL: () => {},
+      };
+      const wrapper = mount(<RefinementList {...props} />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('with facets and disabled show more', () => {
+      const props = {
+        container: document.createElement('div'),
+        attribute: 'attribute',
+        facetValues: [
+          {
+            label: 'Amazon',
+            count: 1200,
+            isRefined: false,
+          },
+          {
+            label: 'Google',
+            count: 1000,
+            isRefined: true,
+          },
+        ],
+        cssClasses,
+        showMore: true,
+        canToggleShowMore: false,
+        templateProps: {
+          templates: {
+            item: item => item,
+            'show-more-inactive': x => x,
+          },
+        },
+        toggleRefinement: () => {},
+        createURL: () => {},
+      };
+      const wrapper = mount(<RefinementList {...props} />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
     it('with facets from search', () => {
       const props = {
         container: document.createElement('div'),
diff --git a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
index 1f4bb98142..bc0df8e18f 100644
--- a/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
+++ b/src/components/RefinementList/__tests__/__snapshots__/RefinementList-test.js.snap
@@ -75,6 +75,172 @@ exports[`RefinementList rendering with facets 1`] = `
 </div>
 `;
 
+exports[`RefinementList rendering with facets and disabled show more 1`] = `
+<div
+  className="root"
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1200,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": false,
+              "label": "Amazon",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+    <li
+      className="item selectedItem"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1000,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": true,
+              "label": "Google",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+  </ul>
+  <button
+    className="showMore disabledShowMore"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": Object {},
+      }
+    }
+  />
+</div>
+`;
+
+exports[`RefinementList rendering with facets and show more 1`] = `
+<div
+  className="root"
+>
+  <ul
+    className="list"
+  >
+    <li
+      className="item"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1200,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": false,
+              "label": "Amazon",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+    <li
+      className="item selectedItem"
+      onClick={[Function]}
+    >
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": Object {
+              "count": 1000,
+              "cssClasses": Object {
+                "checkbox": "checkbox",
+                "count": "count",
+                "disabledShowMore": "disabledShowMore",
+                "item": "item",
+                "label": "label",
+                "labelText": "labelText",
+                "list": "list",
+                "noRefinementRoot": "noRefinementRoot",
+                "noResults": "noResults",
+                "root": "root",
+                "searchBox": "searchBox",
+                "selectedItem": "selectedItem",
+                "showMore": "showMore",
+              },
+              "isRefined": true,
+              "label": "Google",
+              "url": undefined,
+            },
+          }
+        }
+      />
+    </li>
+  </ul>
+  <button
+    className="showMore"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": Object {},
+      }
+    }
+  />
+</div>
+`;
+
 exports[`RefinementList rendering with facets from search 1`] = `
 <div
   className="root"

From 884425e6a9710f5ffa43a60153c9ff35f2f651b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 3 Oct 2018 10:16:52 -0700
Subject: [PATCH 15/16] feat(refinement-list): use single class name for item
 component

---
 src/components/RefinementList/RefinementList.js          | 9 +++------
 src/components/RefinementList/RefinementListItem.js      | 6 ++----
 .../RefinementList/__tests__/RefinementList-test.js      | 6 +++---
 .../RefinementList/__tests__/RefinementListItem-test.js  | 4 +---
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 2f9a462208..117b5472be 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -63,12 +63,9 @@ class RefinementList extends Component {
         facetValueToRefine={facetValue.value}
         handleClick={this.handleItemClick}
         isRefined={facetValue.isRefined}
-        cssClasses={{
-          ...this.props.cssClasses,
-          item: cx(this.props.cssClasses.item, {
-            [this.props.cssClasses.selectedItem]: facetValue.isRefined,
-          }),
-        }}
+        className={cx(this.props.cssClasses.item, {
+          [this.props.cssClasses.selectedItem]: facetValue.isRefined,
+        })}
         key={key}
         subItems={subItems}
         templateData={templateData}
diff --git a/src/components/RefinementList/RefinementListItem.js b/src/components/RefinementList/RefinementListItem.js
index 8f5c7ee806..4f5508bdcc 100644
--- a/src/components/RefinementList/RefinementListItem.js
+++ b/src/components/RefinementList/RefinementListItem.js
@@ -23,7 +23,7 @@ class RefinementListItem extends Component {
 
   render() {
     return (
-      <li className={this.props.cssClasses.item} onClick={this.handleClick}>
+      <li className={this.props.className} onClick={this.handleClick}>
         <Template
           data={this.props.templateData}
           templateKey={this.props.templateKey}
@@ -43,9 +43,7 @@ RefinementListItem.propTypes = {
   templateData: PropTypes.object.isRequired,
   templateKey: PropTypes.string.isRequired,
   templateProps: PropTypes.object.isRequired,
-  cssClasses: PropTypes.shape({
-    item: PropTypes.string,
-  }),
+  className: PropTypes.string.isRequired,
 };
 
 export default RefinementListItem;
diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index b0d5accba8..c19f7807db 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -55,7 +55,7 @@ describe('RefinementList', () => {
       const actual = shallowRender(props).find(RefinementListItem);
 
       // Then
-      expect(actual.props().cssClasses.item).toContain('item');
+      expect(actual.props().className).toContain('item');
     });
 
     it('should set active classes to the active refinements', () => {
@@ -76,8 +76,8 @@ describe('RefinementList', () => {
       const inactiveItem = shallowRender(props).find({ isRefined: false });
 
       // Then
-      expect(activeItem.props().cssClasses.item).toContain('active');
-      expect(inactiveItem.props().cssClasses.item).not.toContain('active');
+      expect(activeItem.props().className).toContain('active');
+      expect(inactiveItem.props().className).not.toContain('active');
     });
   });
 
diff --git a/src/components/RefinementList/__tests__/RefinementListItem-test.js b/src/components/RefinementList/__tests__/RefinementListItem-test.js
index 6d96c9ed37..4ad2eab14b 100644
--- a/src/components/RefinementList/__tests__/RefinementListItem-test.js
+++ b/src/components/RefinementList/__tests__/RefinementListItem-test.js
@@ -8,9 +8,7 @@ describe('RefinementListItem', () => {
     facetValueToRefine: 'wi',
     isRefined: false,
     handleClick: jest.fn(),
-    cssClasses: {
-      item: 'item class',
-    },
+    className: 'item class',
     templateData: { template: 'data' },
     templateKey: 'item key',
     templateProps: { template: 'props' },

From b7db199058d85a3fd70b030b348ba422712bf47f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 3 Oct 2018 10:56:05 -0700
Subject: [PATCH 16/16] test(RefinementList): migrate from Sinon to Jest

---
 .../__tests__/RefinementList-test.js          | 57 ++++---------------
 1 file changed, 11 insertions(+), 46 deletions(-)

diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index c19f7807db..abb3d5588c 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -1,7 +1,5 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import expect from 'expect';
-import sinon from 'sinon';
 import RefinementList from '../RefinementList';
 import RefinementListItem from '../RefinementListItem';
 
@@ -14,7 +12,7 @@ describe('RefinementList', () => {
   let createURL;
 
   function shallowRender(extraProps = {}) {
-    createURL = sinon.spy();
+    createURL = () => {};
     const props = {
       ...defaultProps,
       createURL,
@@ -26,7 +24,6 @@ describe('RefinementList', () => {
 
   describe('cssClasses', () => {
     it('should add the `root` class to the root element', () => {
-      // Given
       const props = {
         ...defaultProps,
         cssClasses: {
@@ -34,15 +31,12 @@ describe('RefinementList', () => {
         },
       };
 
-      // When
-      const actual = shallowRender(props);
+      const wrapper = shallowRender(props);
 
-      // Then
-      expect(actual.hasClass('root')).toEqual(true);
+      expect(wrapper.hasClass('root')).toEqual(true);
     });
 
     it('should set item classes to the refinements', () => {
-      // Given
       const props = {
         ...defaultProps,
         cssClasses: {
@@ -51,15 +45,12 @@ describe('RefinementList', () => {
         facetValues: [{ value: 'foo', isRefined: true }],
       };
 
-      // When
-      const actual = shallowRender(props).find(RefinementListItem);
+      const wrapper = shallowRender(props).find(RefinementListItem);
 
-      // Then
-      expect(actual.props().className).toContain('item');
+      expect(wrapper.props().className).toContain('item');
     });
 
     it('should set active classes to the active refinements', () => {
-      // Given
       const props = {
         ...defaultProps,
         cssClasses: {
@@ -71,11 +62,9 @@ describe('RefinementList', () => {
         ],
       };
 
-      // When
       const activeItem = shallowRender(props).find({ isRefined: true });
       const inactiveItem = shallowRender(props).find({ isRefined: false });
 
-      // Then
       expect(activeItem.props().className).toContain('active');
       expect(inactiveItem.props().className).not.toContain('active');
     });
@@ -83,7 +72,6 @@ describe('RefinementList', () => {
 
   describe('items', () => {
     it('should have the correct names', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -92,18 +80,15 @@ describe('RefinementList', () => {
         ],
       };
 
-      // When
       const items = shallowRender(props).find(RefinementListItem);
       const firstItem = items.at(0);
       const secondItem = items.at(1);
 
-      // Then
       expect(firstItem.props().facetValueToRefine).toEqual('foo');
       expect(secondItem.props().facetValueToRefine).toEqual('bar');
     });
 
     it('should correctly set if refined or not', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -112,12 +97,10 @@ describe('RefinementList', () => {
         ],
       };
 
-      // When
       const items = shallowRender(props).find(RefinementListItem);
       const firstItem = items.at(0);
       const secondItem = items.at(1);
 
-      // Then
       expect(firstItem.props().isRefined).toEqual(false);
       expect(secondItem.props().isRefined).toEqual(true);
     });
@@ -125,7 +108,6 @@ describe('RefinementList', () => {
 
   describe('count', () => {
     it('should pass the count to the templateData', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -134,12 +116,10 @@ describe('RefinementList', () => {
         ],
       };
 
-      // When
       const items = shallowRender(props).find(RefinementListItem);
       const firstItem = items.at(0);
       const secondItem = items.at(1);
 
-      // Then
       expect(firstItem.props().templateData.count).toEqual(42);
       expect(secondItem.props().templateData.count).toEqual(16);
     });
@@ -147,7 +127,6 @@ describe('RefinementList', () => {
 
   describe('showMore', () => {
     it('adds a showMore link when the feature is enabled', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -160,16 +139,13 @@ describe('RefinementList', () => {
         canToggleShowMore: true,
       };
 
-      // When
       const root = shallowRender(props);
-      const actual = root.find('[templateKey="show-more-inactive"]');
+      const wrapper = root.find('[templateKey="show-more-inactive"]');
 
-      // Then
-      expect(actual).toHaveLength(1);
+      expect(wrapper).toHaveLength(1);
     });
 
     it('does not add a showMore link when the feature is disabled', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -181,18 +157,15 @@ describe('RefinementList', () => {
         isShowingMore: false,
       };
 
-      // When
       const root = shallowRender(props);
-      const actual = root
+      const wrapper = root
         .find('Template')
         .filter({ templateKey: 'show-more-inactive' });
 
-      // Then
-      expect(actual).toHaveLength(0);
+      expect(wrapper).toHaveLength(0);
     });
 
     it('should displays showLess', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -205,18 +178,15 @@ describe('RefinementList', () => {
         canToggleShowMore: true,
       };
 
-      // When
       const root = shallowRender(props);
-      const actual = root.find('[templateKey="show-more-active"]');
+      const wrapper = root.find('[templateKey="show-more-active"]');
 
-      // Then
-      expect(actual).toHaveLength(1);
+      expect(wrapper).toHaveLength(1);
     });
   });
 
   describe('sublist', () => {
     it('should create a subList with the sub values', () => {
-      // Given
       const props = {
         ...defaultProps,
         facetValues: [
@@ -231,20 +201,17 @@ describe('RefinementList', () => {
         ],
       };
 
-      // When
       const root = shallowRender(props);
       const mainItem = root.find(RefinementListItem).at(0);
       const subList = shallow(mainItem.props().subItems);
       const subItems = subList.find(RefinementListItem);
 
-      // Then
       expect(mainItem.props().facetValueToRefine).toEqual('foo');
       expect(subItems.at(0).props().facetValueToRefine).toEqual('bar');
       expect(subItems.at(1).props().facetValueToRefine).toEqual('baz');
     });
 
     it('should add depth class for each depth', () => {
-      // Given
       const props = {
         ...defaultProps,
         cssClasses: {
@@ -262,12 +229,10 @@ describe('RefinementList', () => {
         ],
       };
 
-      // When
       const root = shallowRender(props);
       const mainItem = root.find(RefinementListItem).at(0);
       const subList = shallow(mainItem.props().subItems);
 
-      // Then
       expect(root.props().children[1].props.className).toContain('depth-0');
       expect(subList.props().children[1].props.className).toContain('depth-1');
     });