fix(RefinementList): allow overriding of searchable placeholder (#576)

* fix(RefinementList): allow overriding of searchable placeholder

Also noticed that the test was broken for `searchable`, so fixed that one too.

New prop: placeholder on `RefinementList`

fixes #572

* Update RefinementList.md

* chore: searchablePlaceholder

Author: Haroenv

docs/src/components/RefinementList.md

@@ -25,6 +25,7 @@ Name | Type | Default | Description | Required
 ---|---|---|---|---
 attribute | string | | The attribute to refine on click | yes
 searchable | boolean | `false` | You can also search within the options of this | no
+searchablePlaceholder | string | "Search here …" | If searchable is `true`, this will be the placeholder for that search box | no
 operator | "or" / "and" | "or" | How to apply refinements | no
 limit | number | 10 | Number of items to show | no
 showMoreLimit | number | 20 | Number of items to show when the user clicked on “show more items” | no

src/components/RefinementList.vue

@@ -22,7 +22,10 @@
         :class="suit('searchBox')"
         v-if="searchable"
       >
-        <search-input v-model="searchForFacetValues" />
+        <search-input
+          v-model="searchForFacetValues"
+          :placeholder="searchablePlaceholder"
+        />
       </div>
       <slot
         name="noResults"
@@ -121,6 +124,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    searchablePlaceholder: {
+      default: 'Search here…',
+      type: String,
+      required: false,
+    },
     operator: {
       default: 'or',
       validator(value) {

src/components/__tests__/RefinementList.js

@@ -72,14 +72,35 @@ it('renders correctly (empty)', () => {
 it("renders correctly when it's searchable", () => {
   __setState({
     ...defaultState,
-    searchable: true,
   });
   const wrapper = mount(RefinementList, {
     propsData: {
+      searchable: true,
       attribute: 'something',
     },
   });
   expect(wrapper.html()).toMatchSnapshot();
+
+  expect(wrapper.find('.ais-SearchBox-input').exists()).toBe(true);
+});
+
+it("allows override of placeholder when it's searchable", () => {
+  __setState({
+    ...defaultState,
+    searchable: true,
+  });
+  const placeholder = 'search in dogs';
+  const wrapper = mount(RefinementList, {
+    propsData: {
+      searchable: true,
+      attribute: 'something',
+      searchablePlaceholder: placeholder,
+    },
+  });
+
+  expect(wrapper.find('.ais-SearchBox-input').attributes('placeholder')).toBe(
+    placeholder
+  );
 });
 
 it("disables show more if can't refine", () => {

src/components/__tests__/__snapshots__/RefinementList.js.snap

@@ -105,6 +105,60 @@ exports[`renders correctly 1`] = `
 exports[`renders correctly 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"
+    >
+      <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">
@@ -113,7 +167,12 @@ exports[`renders correctly when it's searchable 1`] = `
                value="yo"
         >
         <span class="ais-RefinementList-labelText">
-          yo
+          <span class="ais-Highlight">
+            y
+            <mark class="ais-Highlight-highlighted">
+              o
+            </mark>
+          </span>
         </span>
         <span class="ais-RefinementList-count">
           20
@@ -127,7 +186,9 @@ exports[`renders correctly when it's searchable 1`] = `
                value="how"
         >
         <span class="ais-RefinementList-labelText">
-          how
+          <span class="ais-Highlight">
+            how
+          </span>
         </span>
         <span class="ais-RefinementList-count">
           10
@@ -141,7 +202,9 @@ exports[`renders correctly when it's searchable 1`] = `
                value="are"
         >
         <span class="ais-RefinementList-labelText">
-          are
+          <span class="ais-Highlight">
+            are
+          </span>
         </span>
         <span class="ais-RefinementList-count">
           8
@@ -155,7 +218,9 @@ exports[`renders correctly when it's searchable 1`] = `
                value="you"
         >
         <span class="ais-RefinementList-labelText">
-          you
+          <span class="ais-Highlight">
+            you
+          </span>
         </span>
         <span class="ais-RefinementList-count">
           9
@@ -169,7 +234,9 @@ exports[`renders correctly when it's searchable 1`] = `
                value="doing"
         >
         <span class="ais-RefinementList-labelText">
-          doing
+          <span class="ais-Highlight">
+            doing
+          </span>
         </span>
         <span class="ais-RefinementList-count">
           100
@@ -183,7 +250,9 @@ exports[`renders correctly when it's searchable 1`] = `
                value="?"
         >
         <span class="ais-RefinementList-labelText">
-          ?
+          <span class="ais-Highlight">
+            ?
+          </span>
         </span>
         <span class="ais-RefinementList-count">
           0