fix(RefinementList): remove root css class on sublists (#4117)

**Summary**

The RefinementList is the component used for rendering of the HierarchicalMenu widget.
When a given item of the HierarchicalMenu has children, the RefinementList is recursively
called, with the same cssClasses prop.

As a result, the `cssClasses.root` is appearing on every list of children.

This change is proposed because:

1. This is not the specified behaviour.
2. This is not the behaviour observed on InstantSearch V2.
  In V2, the `cssClasses.root` belonged to the [headerFooter HOC](https://github.com/algolia/instantsearch.js/blob/v2/src/decorators/headerFooter.js#L22).
  The problem emerged in InstantSearch V3 as the `cssClasses.root` property was moved
  inside the RefinementList widget.

Author: tkrugg

src/components/RefinementList/RefinementList.js

@@ -30,9 +30,11 @@ class RefinementList extends Component {
     let subItems;
     const hasChildren = facetValue.data && facetValue.data.length > 0;
     if (hasChildren) {
+      const { root, ...cssClasses } = this.props.cssClasses;
       subItems = (
         <RefinementList
           {...this.props}
+          cssClasses={cssClasses}
           depth={this.props.depth + 1}
           facetValues={facetValue.data}
           showMore={false}

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

@@ -19,7 +19,7 @@ describe('RefinementList', () => {
       facetValues: [],
       ...extraProps,
     };
-    return shallow(React.createElement(RefinementList, props));
+    return shallow(<RefinementList {...props} />);
   }
 
   describe('cssClasses', () => {
@@ -209,6 +209,11 @@ describe('RefinementList', () => {
             isRefined: false,
           },
         ],
+        templateProps: {
+          templates: {
+            item: item => item.value,
+          },
+        },
       };
 
       const root = shallowRender(props);
@@ -218,6 +223,32 @@ describe('RefinementList', () => {
       expect(root.props().children[2].props.className).toContain('depth-0');
       expect(subList.props().children[2].props.className).toContain('depth-1');
     });
+
+    it('should not add root class on sub lists', () => {
+      const props = {
+        ...defaultProps,
+        cssClasses: {
+          root: 'my-root',
+        },
+        facetValues: [
+          {
+            value: 'foo',
+            data: [
+              { value: 'bar', isRefined: false },
+              { value: 'baz', isRefined: false },
+            ],
+            isRefined: false,
+          },
+        ],
+      };
+
+      const root = shallowRender(props);
+      const mainItem = root.find(RefinementListItem).at(0);
+      const subList = shallow(mainItem.props().subItems);
+
+      expect(root.hasClass(props.cssClasses.root)).toBe(true);
+      expect(subList.hasClass(props.cssClasses.root)).toBe(false);
+    });
   });
 
   describe('rendering', () => {