feat(theme): Move indexSelector styling to default.css

BREAKING CHANGE: Classes are now named `ais-index-selector` and `ais-index-selector--item` to stay consistent with other widgets. Updated tests as well. Widget is responsible for adding default classes + user-defined ones. Then component simply add them to the markup.
algolia · Oct 19, 2015 · 1841ef1 · 1841ef1
1 parent 6b79703
commit 1841ef1
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -408,8 +408,8 @@ you'll need several indices. This widget lets you easily change it.
  * @param  {String} options.indices[0].name Name of the index to target
  * @param  {String} options.indices[0].label Label displayed in the dropdown
  * @param  {Object} [options.cssClasses] CSS classes to be added
- * @param  {String} [options.cssClasses.select] CSS classes added to the parent <select>
- * @param  {String} [options.cssClasses.option] CSS classes added to each <option>
+ * @param  {String} [options.cssClasses.root] CSS classes added to the parent <select>
+ * @param  {String} [options.cssClasses.item] CSS classes added to each <option>
  * @param  {boolean} [hideWhenNoResults=false] Hide the container when no results match
  * @return {Object}
  */
@@ -431,7 +431,7 @@ search.addWidget(
       {name: 'instant_search_price_desc', label: 'Highest price'}
     ],
     cssClasses: {
-      select: 'form-control'
+      root: 'form-control'
     }
   })
 );
@@ -440,15 +440,18 @@ search.addWidget(
 #### Styling
 
 ```html
-<select class="ais-index-selector--select">
-  <option class="ais-index-selector--option">Most relevant</option>
-  <option class="ais-index-selector--option">Lowest price</option>
-  <option class="ais-index-selector--option">Highest price</option>
+<select class="ais-index-selector">
+  <option class="ais-index-selector--item">Most relevant</option>
+  <option class="ais-index-selector--item">Lowest price</option>
+  <option class="ais-index-selector--item">Highest price</option>
 </select>
 ```
 
 ```css
-/* No default styling applied */
+.ais-index-selector {
+}
+.ais-index-selector--item {
+}
 ```
 
 ### pagination

diff --git a/components/IndexSelector.js b/components/IndexSelector.js
@@ -1,7 +1,5 @@
 var React = require('react');
 
-var bem = require('../lib/utils').bemHelper('ais-index-selector');
-var cx = require('classnames');
 
 class IndexSelector extends React.Component {
   handleChange(event) {
@@ -11,29 +9,32 @@ class IndexSelector extends React.Component {
   render() {
     var {currentIndex, indices} = this.props;
 
-    var selectClass = cx(bem('select'), this.props.cssClasses.select);
-    var optionClass = cx(bem('option'), this.props.cssClasses.option);
-
     var handleChange = this.handleChange.bind(this);
 
     return (
       <select
-        className={selectClass}
+        className={this.props.cssClasses.root}
         onChange={handleChange}
         value={currentIndex}
       >
-          {indices.map(function(index) {
-            return <option className={optionClass} key={index.name} value={index.name}>{index.label}</option>;
-          })}
+        {indices.map((index) => {
+          return <option className={this.props.cssClasses.item} key={index.name} value={index.name}>{index.label}</option>;
+        })}
       </select>
     );
   }
 }
 
 IndexSelector.propTypes = {
   cssClasses: React.PropTypes.shape({
-    select: React.PropTypes.string,
-    option: React.PropTypes.string
+    root: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.string)
+    ]),
+    item: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.string)
+    ])
   }),
   currentIndex: React.PropTypes.string,
   indices: React.PropTypes.array,

diff --git a/components/__tests__/IndexSelector-test.js b/components/__tests__/IndexSelector-test.js
@@ -5,9 +5,6 @@ import expect from 'expect';
 import TestUtils from 'react-addons-test-utils';
 import IndexSelector from '../IndexSelector';
 
-var bem = require('../../lib/utils').bemHelper('ais-index-selector');
-var cx = require('classnames');
-
 describe('IndexSelector', () => {
   var renderer;
 
@@ -18,15 +15,21 @@ describe('IndexSelector', () => {
 
 
   it('should render <IndexSelector/>', () => {
-    var out = render({currentIndex: 'index-a'});
+    var out = render({
+      currentIndex: 'index-a',
+      cssClasses: {
+        root: 'custom-root',
+        item: 'custom-item'
+      }
+    });
     expect(out).toEqualJSX(
       <select
-        className={cx(bem('select'))}
+        className="custom-root"
         onChange={() => {}}
         value="index-a"
       >
-        <option className={cx(bem('option'))} value="index-a">Index A</option>
-        <option className={cx(bem('option'))} value="index-b">Index B</option>
+        <option className="custom-item" value="index-a">Index A</option>
+        <option className="custom-item" value="index-b">Index B</option>
       </select>
     );
   });

diff --git a/themes/default/default.css b/themes/default/default.css
@@ -27,6 +27,10 @@
 /* STATS */
 
 /* INDEX SELECTOR */
+.ais-index-selector {
+}
+.ais-index-selector--item {
+}
 
 /* HITS */
 

diff --git a/widgets/index-selector/__tests__/index-selector-test.js b/widgets/index-selector/__tests__/index-selector-test.js
@@ -17,6 +17,7 @@ describe('indexSelector()', () => {
   var ReactDOM;
   var container;
   var indices;
+  var cssClasses;
   var widget;
   var props;
   var helper;
@@ -32,7 +33,11 @@ describe('indexSelector()', () => {
 
     container = document.createElement('div');
     indices = ['index-a', 'index-b'];
-    widget = indexSelector({container, indices});
+    cssClasses = {
+      root: 'custom-root',
+      item: 'custom-item'
+    };
+    widget = indexSelector({container, indices, cssClasses});
     helper = {
       getIndex: sinon.stub().returns('index-a'),
       setIndex: sinon.spy(),
@@ -50,7 +55,10 @@ describe('indexSelector()', () => {
   it('calls ReactDOM.render(<IndexSelector props />, container)', () => {
     widget.render({helper, results});
     props = {
-      cssClasses: {},
+      cssClasses: {
+        root: 'ais-index-selector custom-root',
+        item: 'ais-index-selector--item custom-item'
+      },
       currentIndex: 'index-a',
       hasResults: false,
       hideWhenNoResults: false,

diff --git a/widgets/index-selector/index-selector.js b/widgets/index-selector/index-selector.js
@@ -3,6 +3,8 @@ var ReactDOM = require('react-dom');
 
 var findIndex = require('lodash/array/findIndex');
 var utils = require('../../lib/utils.js');
+var bem = utils.bemHelper('ais-index-selector');
+var cx = require('classnames');
 var autoHide = require('../../decorators/autoHide');
 
 /**
@@ -12,8 +14,8 @@ var autoHide = require('../../decorators/autoHide');
  * @param  {String} options.indices[0].name Name of the index to target
  * @param  {String} options.indices[0].label Label displayed in the dropdown
  * @param  {Object} [options.cssClasses] CSS classes to be added
- * @param  {String} [options.cssClasses.select] CSS classes added to the parent <select>
- * @param  {String} [options.cssClasses.option] CSS classes added to each <option>
+ * @param  {String} [options.cssClasses.root] CSS classes added to the parent <select>
+ * @param  {String} [options.cssClasses.item] CSS classes added to each <option>
  * @param  {boolean} [hideWhenNoResults=false] Hide the container when no results match
  * @return {Object}
  */
@@ -49,6 +51,11 @@ function indexSelector({
       let hasResults = results.hits.length > 0;
       let setIndex = this.setIndex.bind(this, helper);
       var IndexSelector = autoHide(require('../../components/IndexSelector'));
+
+      cssClasses = {
+        root: cx(bem(null), cssClasses.root),
+        item: cx(bem('item'), cssClasses.item)
+      };
       ReactDOM.render(
         <IndexSelector
           cssClasses={cssClasses}