fix(selector): root classname is applied twice (#2423)

* fix(selector): root classname is applied twice
The implementation of the React `selector` was applying the root css
classname that is already applied by the headerfooter. In order to
prevent regressions and let user customize the <select>, this patch adds
a new key to customize cssClasses in Selector bases widgets, and this
new key has the root value to avoid breaking the current implementations.

Fix #2396 #2397

* chore(test): update snapshot
* chore(functional-tests): add form-control using select
The new cssClasses key so that we check that all 3 can have custom css
classes. Interestingly the key was used but not implemented already :/

* chore(test): update test to validate the usage of the new key

Author: bobylito

functional-tests/app/app.js

@@ -299,6 +299,9 @@ search.addWidget(
       { label: 'Top 100', value: 9901 },
       { label: 'Top 500', value: 9501 },
     ],
+    cssClasses: {
+      select: 'form-control',
+    },
   })
 );
 

src/components/Selector.js

@@ -18,7 +18,7 @@ export class RawSelector extends React.Component {
 
     return (
       <select
-        className={this.props.cssClasses.root}
+        className={this.props.cssClasses.select}
         onChange={this.handleChange}
         value={currentValue}
       >
@@ -42,6 +42,10 @@ RawSelector.propTypes = {
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
     ]),
+    select: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
     item: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),

src/components/__tests__/Selector-test.js

@@ -9,6 +9,7 @@ describe('Selector', () => {
       setValue: () => {},
       cssClasses: {
         root: 'custom-root',
+        select: 'custom-select',
         item: 'custom-item',
       },
       options: [
@@ -26,6 +27,7 @@ describe('Selector', () => {
       setValue: () => {},
       cssClasses: {
         root: 'custom-root',
+        select: 'custom-select',
         item: 'custom-item',
       },
       options: [

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

@@ -2,7 +2,7 @@
 
 exports[`Selector should render <Selector/> with numbers 1`] = `
 <select
-  className="custom-root"
+  className="custom-select"
   onChange={[Function]}
   value={10}
 >
@@ -23,7 +23,7 @@ exports[`Selector should render <Selector/> with numbers 1`] = `
 
 exports[`Selector should render <Selector/> with strings 1`] = `
 <select
-  className="custom-root"
+  className="custom-select"
   onChange={[Function]}
   value="index-a"
 >

src/widgets/hits-per-page-selector/__tests__/__snapshots__/hits-per-page-selector-test.js.snap

@@ -6,6 +6,7 @@ exports[`hitsPerPageSelector() calls twice ReactDOM.render(<Selector props />, c
     Object {
       "item": "ais-hits-per-page-selector--item custom-item",
       "root": "ais-hits-per-page-selector custom-root cx",
+      "select": "ais-hits-per-page-selector custom-select",
     }
   }
   currentValue={10}

src/widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js

@@ -37,6 +37,7 @@ describe('hitsPerPageSelector()', () => {
     ];
     cssClasses = {
       root: ['custom-root', 'cx'],
+      select: 'custom-select',
       item: 'custom-item',
     };
     widget = hitsPerPageSelector({ container, items, cssClasses });

src/widgets/hits-per-page-selector/hits-per-page-selector.js

@@ -35,13 +35,14 @@ const usage = `Usage:
 hitsPerPageSelector({
   container,
   items,
-  [ cssClasses.{root,item}={} ],
+  [ cssClasses.{root,select,item}={} ],
   [ autoHideContainer=false ]
 })`;
 
 /**
  * @typedef {Object} HitsPerPageSelectorCSSClasses
- * @property {string|string[]} [root] CSS classes added to the parent `<select>`.
+ * @property {string|string[]} [root] CSS classes added to the outer `<div>`.
+ * @property {string|string[]} [select] CSS classes added to the parent `<select>`.
  * @property {string|string[]} [item] CSS classes added to each `<option>`.
  */
 
@@ -94,6 +95,9 @@ export default function hitsPerPageSelector(
 
   const cssClasses = {
     root: cx(bem(null), userCssClasses.root),
+    // We use the same class to avoid regression on existing website. It needs to be replaced
+    // eventually by `bem('select')
+    select: cx(bem(null), userCssClasses.select),
     item: cx(bem('item'), userCssClasses.item),
   };
 

src/widgets/numeric-selector/__tests__/numeric-selector-test.js

@@ -25,6 +25,7 @@ describe('numericSelector()', () => {
     options = [{ value: 1, label: 'first' }, { value: 2, label: 'second' }];
     cssClasses = {
       root: ['custom-root', 'cx'],
+      select: 'custom-select',
       item: 'custom-item',
     };
     widget = numericSelector({
@@ -37,6 +38,7 @@ describe('numericSelector()', () => {
       shouldAutoHideContainer: false,
       cssClasses: {
         root: 'ais-numeric-selector custom-root cx',
+        select: 'ais-numeric-selector custom-select',
         item: 'ais-numeric-selector--item custom-item',
       },
       currentValue: 1,

src/widgets/numeric-selector/numeric-selector.js

@@ -30,7 +30,7 @@ const usage = `Usage: numericSelector({
   container,
   attributeName,
   options,
-  cssClasses.{root,item},
+  cssClasses.{root,select,item},
   autoHideContainer
 })`;
 
@@ -42,7 +42,8 @@ const usage = `Usage: numericSelector({
 
 /**
  * @typedef {Object} NumericSelectorCSSClasses
- * @property {string|string[]} [root] CSS classes added to the parent `<select>`.
+ * @property {string|string[]} [root] CSS classes added to the outer `<div>`.
+ * @property {string|string[]} [select] CSS classes added to the parent `<select>`.
  * @property {string|string[]} [item] CSS classes added to each `<option>`.
  */
 
@@ -98,6 +99,9 @@ export default function numericSelector({
 
   const cssClasses = {
     root: cx(bem(null), userCssClasses.root),
+    // We use the same class to avoid regression on existing website. It needs to be replaced
+    // eventually by `bem('select')
+    select: cx(bem(null), userCssClasses.select),
     item: cx(bem('item'), userCssClasses.item),
   };
 

src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js

@@ -43,6 +43,7 @@ describe('sortBySelector()', () => {
     ];
     cssClasses = {
       root: ['custom-root', 'cx'],
+      select: 'custom-select',
       item: 'custom-item',
     };
     widget = sortBySelector({ container, indices, cssClasses });
@@ -70,6 +71,7 @@ describe('sortBySelector()', () => {
       shouldAutoHideContainer: false,
       cssClasses: {
         root: 'ais-sort-by-selector custom-root cx',
+        select: 'ais-sort-by-selector custom-select',
         item: 'ais-sort-by-selector--item custom-item',
       },
       currentValue: 'index-a',