diff --git a/src/widgets/search-box/__tests__/search-box-test.js b/src/widgets/search-box/__tests__/search-box-test.js
index 1fab4988e9..40211ca55b 100644
--- a/src/widgets/search-box/__tests__/search-box-test.js
+++ b/src/widgets/search-box/__tests__/search-box-test.js
@@ -49,22 +49,22 @@ describe('search-box()', () => {
});
context('targeting a div', () => {
+ let opts;
+
beforeEach(() => {
container = document.createElement('div');
- widget = searchBox({container});
- });
-
- it('configures nothing', () => {
- expect(widget.getConfiguration).toEqual(undefined);
+ opts = {container};
});
it('adds an input inside the div', () => {
+ widget = searchBox(opts);
widget.init({state, helper});
let inputs = container.getElementsByTagName('input');
expect(inputs.length).toEqual(1);
});
it('sets default HTML attribute to the input', () => {
+ widget = searchBox(opts);
widget.init({state, helper});
let input = container.getElementsByTagName('input')[0];
expect(input.getAttribute('autocapitalize')).toEqual('off');
@@ -76,6 +76,23 @@ describe('search-box()', () => {
expect(input.getAttribute('spellcheck')).toEqual('false');
expect(input.getAttribute('type')).toEqual('text');
});
+
+ it('supports cssClasses option', () => {
+ opts.cssClasses = {
+ root: 'root-class',
+ input: 'input-class'
+ };
+
+ widget = searchBox(opts);
+ widget.init({state, helper});
+ let actualRootClasses = container.querySelector('input').parentNode.getAttribute('class');
+ let actualInputClasses = container.querySelector('input').getAttribute('class');
+ let expectedRootClasses = 'ais-search-box root-class';
+ let expectedInputClasses = 'ais-search-box--input input-class';
+
+ expect(actualRootClasses).toEqual(expectedRootClasses);
+ expect(actualInputClasses).toEqual(expectedInputClasses);
+ });
});
context('targeting an input', () => {
@@ -102,6 +119,20 @@ describe('search-box()', () => {
expect(container.getAttribute('class')).toEqual('my-class ais-search-box--input');
expect(container.getAttribute('placeholder')).toEqual('Search');
});
+
+ it('supports cssClasses', () => {
+ container = createHTMLNodeFromString('');
+ widget = searchBox({container, cssClasses: {root: 'root-class', input: 'input-class'}});
+ widget.init({state, helper});
+
+ let actualRootClasses = container.parentNode.getAttribute('class');
+ let actualInputClasses = container.getAttribute('class');
+ let expectedRootClasses = 'ais-search-box root-class';
+ let expectedInputClasses = 'my-class ais-search-box--input input-class';
+
+ expect(actualRootClasses).toEqual(expectedRootClasses);
+ expect(actualInputClasses).toEqual(expectedInputClasses);
+ });
});
context('wraps the input in a div', () => {
diff --git a/src/widgets/search-box/search-box.js b/src/widgets/search-box/search-box.js
index add39a9c8c..688b3a47ec 100644
--- a/src/widgets/search-box/search-box.js
+++ b/src/widgets/search-box/search-box.js
@@ -19,10 +19,10 @@ const KEY_SUPPRESS = 8;
* @param {boolean} [options.searchOnEnterKeyPressOnly=false] If set, trigger the search
* once `` is pressed only
* @param {Object} [options.cssClasses] CSS classes to add
- * @param {string} [options.cssClasses.root] CSS class to add to the
+ * @param {string|string[]} [options.cssClasses.root] CSS class to add to the
* wrapping div (if `wrapInput` set to `true`)
- * @param {string} [options.cssClasses.input] CSS class to add to the input
- * @param {string} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element
+ * @param {string|string[]} [options.cssClasses.input] CSS class to add to the input
+ * @param {string|string[]} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element
* @return {Object}
*/
const usage = `Usage:
@@ -66,7 +66,8 @@ function searchBox({
wrapInput: function(input) {
// Wrap input in a .ais-search-box div
let wrapper = document.createElement('div');
- wrapper.classList.add(cx(bem(null), cssClasses.root));
+ let CSSClassesToAdd = cx(bem(null), cssClasses.root).split(' ');
+ wrapper.classList.add.apply(wrapper.classList, CSSClassesToAdd);
wrapper.appendChild(input);
return wrapper;
},
@@ -91,7 +92,8 @@ function searchBox({
});
// Add classes
- input.classList.add(cx(bem('input'), cssClasses.input));
+ let CSSClassesToAdd = cx(bem('input'), cssClasses.input).split(' ');
+ input.classList.add.apply(input.classList, CSSClassesToAdd);
},
addPoweredBy: function(input) {
let PoweredBy = require('../../components/PoweredBy/PoweredBy.js');