From f1e5784de6a6d9a6fba3a1bd128100fed003312b Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Tue, 16 Jul 2019 14:35:33 +0200
Subject: [PATCH 1/2] feat(RefinementList): forward class names to input

fixes #644
---
 src/components/RefinementList.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/RefinementList.vue b/src/components/RefinementList.vue
index f9ed8bc64..2de1224e1 100644
--- a/src/components/RefinementList.vue
+++ b/src/components/RefinementList.vue
@@ -25,6 +25,7 @@
         <search-input
           v-model="searchForFacetValues"
           :placeholder="searchablePlaceholder"
+          :class-names="classNames"
         />
       </div>
       <slot

From db37bcf32c0355d156d19f54c538f280d6d7a093 Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Tue, 16 Jul 2019 14:44:04 +0200
Subject: [PATCH 2/2] test: add test for this behaviour

---
 src/components/__tests__/RefinementList.js    |  20 +++
 .../__snapshots__/RefinementList.js.snap      | 162 ++++++++++++++++++
 2 files changed, 182 insertions(+)

diff --git a/src/components/__tests__/RefinementList.js b/src/components/__tests__/RefinementList.js
index 58e650623..1622c66d7 100644
--- a/src/components/__tests__/RefinementList.js
+++ b/src/components/__tests__/RefinementList.js
@@ -103,6 +103,26 @@ it("allows override of placeholder when it's searchable", () => {
   );
 });
 
+it("allows search bar classes override when it's searchable", () => {
+  __setState({
+    ...defaultState,
+  });
+  const wrapper = mount(RefinementList, {
+    propsData: {
+      searchable: true,
+      attribute: 'something',
+      classNames: {
+        'ais-SearchBox-form': 'moar-classes',
+      },
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+
+  expect(wrapper.find('.ais-SearchBox-form').hasClass('moar-classes')).toBe(
+    true
+  );
+});
+
 it("disables show more if can't refine", () => {
   __setState({
     ...defaultState,
diff --git a/src/components/__tests__/__snapshots__/RefinementList.js.snap b/src/components/__tests__/__snapshots__/RefinementList.js.snap
index c7771366d..6adff0248 100644
--- a/src/components/__tests__/__snapshots__/RefinementList.js.snap
+++ b/src/components/__tests__/__snapshots__/RefinementList.js.snap
@@ -1,5 +1,167 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`allows search bar classes override when it's searchable 1`] = `
+
+<div class="ais-RefinementList ais-RefinementList--noRefinement">
+  <div class="ais-RefinementList-searchBox">
+    <form action
+          role="search"
+          novalidate="novalidate"
+          class="ais-SearchBox-form moar-classes"
+    >
+      <input type="search"
+             autocorrect="off"
+             autocapitalize="off"
+             autocomplete="off"
+             spellcheck="false"
+             required="required"
+             maxlength="512"
+             aria-label="Search"
+             placeholder="Search here…"
+             class="ais-SearchBox-input"
+      >
+      <button type="submit"
+              title="Search"
+              class="ais-SearchBox-submit"
+      >
+        <svg role="img"
+             xmlns="http://www.w3.org/2000/svg"
+             width="10"
+             height="10"
+             viewbox="0 0 40 40"
+             class="ais-SearchBox-submitIcon"
+        >
+          <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"
+          >
+          </path>
+        </svg>
+      </button>
+      <button type="reset"
+              title="Clear"
+              hidden="hidden"
+              class="ais-SearchBox-reset"
+      >
+        <svg role="img"
+             xmlns="http://www.w3.org/2000/svg"
+             width="1em"
+             height="1em"
+             viewbox="0 0 20 20"
+             class="ais-SearchBox-resetIcon"
+        >
+          <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"
+          >
+          </path>
+        </svg>
+      </button>
+    </form>
+  </div>
+  <ul class="ais-RefinementList-list">
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input type="checkbox"
+               class="ais-RefinementList-checkbox"
+               value="yo"
+        >
+        <span class="ais-RefinementList-labelText">
+          <span class="ais-Highlight">
+            y
+            <mark class="ais-Highlight-highlighted">
+              o
+            </mark>
+          </span>
+        </span>
+        <span class="ais-RefinementList-count">
+          20
+        </span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input type="checkbox"
+               class="ais-RefinementList-checkbox"
+               value="how"
+        >
+        <span class="ais-RefinementList-labelText">
+          <span class="ais-Highlight">
+            how
+          </span>
+        </span>
+        <span class="ais-RefinementList-count">
+          10
+        </span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input type="checkbox"
+               class="ais-RefinementList-checkbox"
+               value="are"
+        >
+        <span class="ais-RefinementList-labelText">
+          <span class="ais-Highlight">
+            are
+          </span>
+        </span>
+        <span class="ais-RefinementList-count">
+          8
+        </span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input type="checkbox"
+               class="ais-RefinementList-checkbox"
+               value="you"
+        >
+        <span class="ais-RefinementList-labelText">
+          <span class="ais-Highlight">
+            you
+          </span>
+        </span>
+        <span class="ais-RefinementList-count">
+          9
+        </span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input type="checkbox"
+               class="ais-RefinementList-checkbox"
+               value="doing"
+        >
+        <span class="ais-RefinementList-labelText">
+          <span class="ais-Highlight">
+            doing
+          </span>
+        </span>
+        <span class="ais-RefinementList-count">
+          100
+        </span>
+      </label>
+    </li>
+    <li class="ais-RefinementList-item">
+      <label class="ais-RefinementList-label">
+        <input type="checkbox"
+               class="ais-RefinementList-checkbox"
+               value="?"
+        >
+        <span class="ais-RefinementList-labelText">
+          <span class="ais-Highlight">
+            ?
+          </span>
+        </span>
+        <span class="ais-RefinementList-count">
+          0
+        </span>
+      </label>
+    </li>
+  </ul>
+</div>
+
+`;
+
 exports[`renders correctly (empty) 1`] = `
 
 <div class="ais-RefinementList ais-RefinementList--noRefinement">