[UI Framework] Allow custom placeholder for Tool Bar Search Box (#12959)

ui_framework/components/tool_bar/__snapshots__/tool_bar_search_box.test.js.snap

@@ -21,6 +21,26 @@ exports[`filter initializes search box value 1`] = `
 </div>
 `;
 
+exports[`placeholder initializes search box placeholder 1`] = `
+<div
+  class="kuiToolBarSearch"
+>
+  <div
+    class="kuiToolBarSearchBox"
+  >
+    <div
+      class="kuiToolBarSearchBox__icon kuiIcon fa-search"
+    />
+    <input
+      aria-label="Filter"
+      class="kuiToolBarSearchBox__input"
+      placeholder="Filter items..."
+      type="text"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders KuiToolBarSearchBox 1`] = `
 <div
   aria-label="aria-label"

ui_framework/components/tool_bar/tool_bar_search_box.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export function KuiToolBarSearchBox({ filter, onFilter, className, ...rest }) {
+export function KuiToolBarSearchBox({ filter, onFilter, placeholder, className, ...rest }) {
   function onChange(event) {
     onFilter(event.target.value);
   }
@@ -12,7 +12,7 @@ export function KuiToolBarSearchBox({ filter, onFilter, className, ...rest }) {
       <input
         className="kuiToolBarSearchBox__input"
         type="text"
-        placeholder="Search..."
+        placeholder={ placeholder }
         aria-label="Filter"
         defaultValue={ filter }
         onChange={ onChange }
@@ -25,3 +25,7 @@ KuiToolBarSearchBox.propTypes = {
   filter: React.PropTypes.string,
   onFilter: React.PropTypes.func.isRequired
 };
+
+KuiToolBarSearchBox.defaultProps = {
+  placeholder: 'Search...'
+};

ui_framework/components/tool_bar/tool_bar_search_box.test.js

@@ -31,3 +31,10 @@ describe('filter', () => {
   });
 });
 
+describe('placeholder', () => {
+  test('initializes search box placeholder', () => {
+    const component = <KuiToolBarSearchBox onFilter={onFilter} placeholder="Filter items..." />;
+    expect(render(component)).toMatchSnapshot();
+  });
+});
+