feat(SearchBox): allow custom reset and submit components (#1991)

packages/react-instantsearch/src/components/SearchBox.js

@@ -10,6 +10,9 @@ class SearchBox extends Component {
     refine: PropTypes.func.isRequired,
     translate: PropTypes.func.isRequired,
 
+    resetComponent: PropTypes.element,
+    submitComponent: PropTypes.element,
+
     focusShortcuts: PropTypes.arrayOf(
       PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     ),
@@ -145,6 +148,18 @@ class SearchBox extends Component {
     } = this.props;
     const query = this.getQuery();
 
+    const submitComponent = this.props.submitComponent
+      ? this.props.submitComponent
+      : <svg role="img">
+          <use xlinkHref="#sbx-icon-search-13" />
+        </svg>;
+
+    const resetComponent = this.props.resetComponent
+      ? this.props.resetComponent
+      : <svg role="img">
+          <use xlinkHref="#sbx-icon-clear-3" />
+        </svg>;
+
     /* eslint-disable max-len */
     return (
       <form
@@ -182,14 +197,10 @@ class SearchBox extends Component {
             {...cx('input')}
           />
           <button type="submit" title={translate('submitTitle')} {...cx('submit')}>
-            <svg role="img">
-              <use xlinkHref="#sbx-icon-search-13"></use>
-            </svg>
+            {submitComponent}
           </button>
           <button type="reset" title={translate('resetTitle')} {...cx('reset')} onClick={this.onReset}>
-            <svg role="img">
-              <use xlinkHref="#sbx-icon-clear-3"></use>
-            </svg>
+            {resetComponent}
           </button>
         </div>
       </form>
@@ -199,8 +210,6 @@ class SearchBox extends Component {
 }
 
 export default translatable({
-  submit: null,
-  reset: null,
   resetTitle: 'Clear the search query.',
   submitTitle: 'Submit your search query.',
   placeholder: 'Search here…',

packages/react-instantsearch/src/components/SearchBox.test.js

@@ -48,13 +48,26 @@ describe('SearchBox', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('lets you give custom components for reset and submit', () => {
+    const tree = renderer.create(
+      <SearchBox
+        refine={() => null}
+        submitComponent={<span>🔍</span>}
+        resetComponent={
+          <svg viewBox="200 198 108 122">
+            <path d="M200.8 220l45 46.7-20 47.4 31.7-34 50.4 39.3-34.3-52.6 30.2-68.3-49.7 51.7" />
+          </svg>
+        }
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('lets you customize its translations', () => {
     const tree = renderer.create(
       <SearchBox
         refine={() => null}
         translations={{
-          submit: 'SUBMIT',
-          reset: 'RESET',
           resetTitle: 'RESET_TITLE',
           placeholder: 'PLACEHOLDER',
         }}

packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap

@@ -255,6 +255,71 @@ exports[`SearchBox lets you customize its translations 1`] = `
 </form>
 `;
 
+exports[`SearchBox lets you give custom components for reset and submit 1`] = `
+<form
+  className="ais-SearchBox__root"
+  noValidate={true}
+  onReset={[Function]}
+  onSubmit={[Function]}>
+  <svg
+    style={
+      Object {
+        "display": "none",
+      }
+    }
+    xmlns="http://www.w3.org/2000/svg">
+    <symbol
+      id="sbx-icon-search-13"
+      viewBox="0 0 40 40"
+      xmlns="http://www.w3.org/2000/svg">
+      <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"
+        fillRule="evenodd" />
+    </symbol>
+    <symbol
+      id="sbx-icon-clear-3"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg">
+      <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"
+        fillRule="evenodd" />
+    </symbol>
+  </svg>
+  <div
+    className="ais-SearchBox__wrapper"
+    role="search">
+    <input
+      autoComplete="off"
+      autoFocus={false}
+      className="ais-SearchBox__input"
+      onChange={[Function]}
+      placeholder="Search here…"
+      required={true}
+      type="search"
+      value="" />
+    <button
+      className="ais-SearchBox__submit"
+      title="Submit your search query."
+      type="submit">
+      <span>
+        🔍
+      </span>
+    </button>
+    <button
+      className="ais-SearchBox__reset"
+      onClick={[Function]}
+      title="Clear the search query."
+      type="reset">
+      <svg
+        viewBox="200 198 108 122">
+        <path
+          d="M200.8 220l45 46.7-20 47.4 31.7-34 50.4 39.3-34.3-52.6 30.2-68.3-49.7 51.7" />
+      </svg>
+    </button>
+  </div>
+</form>
+`;
+
 exports[`SearchBox transfers the autoFocus prop to the underlying input element 1`] = `
 <form
   action=""

stories/SearchBox.stories.js

@@ -16,8 +16,18 @@ stories.add('default', () =>
   <WrapWithHits searchBox={false} hasPlayground={true} linkedStoryGroup="SearchBox">
     <SearchBox defaultRefinement="battery" />
   </WrapWithHits>
-)
-.add('playground', () =>
+).add('with submit and reset components', () =>
+  <WrapWithHits searchBox={false} hasPlayground={true} linkedStoryGroup="SearchBox" >
+    <SearchBox
+      submitComponent={<span>🔍</span>}
+      resetComponent={
+        <svg viewBox="200 198 108 122">
+          <path d="M200.8 220l45 46.7-20 47.4 31.7-34 50.4 39.3-34.3-52.6 30.2-68.3-49.7 51.7" />
+        </svg>
+      }
+    />
+  </WrapWithHits>
+).add('playground', () =>
   <WrapWithHits searchBox={false}>
     <SearchBox
       focusShortcuts={['s']}