EuiSearchBox - pass rest to EuiFieldSearch (#514)

* add rest to search_box * pass box props to search_bar * change log * use local vars
elastic · Mar 15, 2018 · 74cd1cd · 74cd1cd
1 parent d925587
commit 74cd1cd
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
 - `EuiInMemoryTable` pass items to BasicTable when message is provided ([#517](https://github.com/elastic/eui/pull/517)).
+- `EuiSearchBox` now passes unused props through to `EuiFieldSearch` ([#514](https://github.com/elastic/eui/pull/514))
 
 # [`0.0.27`](https://github.com/elastic/eui/tree/v0.0.27)
 

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -523,6 +523,9 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
   <EuiSearchBar
     box={
       Object {
+        "aria-label": "aria-label",
+        "className": "testClass1 testClass2",
+        "data-test-subj": "test subject string",
         "incremental": true,
       }
     }

diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js
@@ -438,7 +438,8 @@ describe('EuiInMemoryTable', () => {
       search: {
         defaultQuery: 'name:name1',
         box: {
-          incremental: true
+          incremental: true,
+          ...requiredProps
         },
         filters: [
           {

diff --git a/src/components/search_bar/__snapshots__/search_bar.test.js.snap b/src/components/search_bar/__snapshots__/search_bar.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchBar render - no config, no query 1`] = `
+exports[`SearchBar render - box 1`] = `
 <EuiFlexGroup
   alignItems="center"
   component="div"
@@ -14,17 +14,20 @@ exports[`SearchBar render - no config, no query 1`] = `
     grow={true}
   >
     <EuiSearchBox
+      aria-label="aria-label"
+      className="testClass1 testClass2"
+      data-test-subj="test subject string"
       incremental={false}
       isInvalid={false}
       onSearch={[Function]}
-      placeholder="Search..."
+      placeholder="find something..."
       query=""
     />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
 
-exports[`SearchBar render - no query, custom box placeholder and incremental 1`] = `
+exports[`SearchBar render - no config, no query 1`] = `
 <EuiFlexGroup
   alignItems="center"
   component="div"

diff --git a/src/components/search_bar/__snapshots__/search_box.test.js.snap b/src/components/search_bar/__snapshots__/search_box.test.js.snap
@@ -2,6 +2,9 @@
 
 exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
 <EuiFieldSearch
+  aria-label="aria-label"
+  className="testClass1 testClass2"
+  data-test-subj="test subject string"
   defaultValue=""
   fullWidth={true}
   incremental={true}
@@ -14,6 +17,9 @@ exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
 
 exports[`EuiSearchBox render - no config 1`] = `
 <EuiFieldSearch
+  aria-label="aria-label"
+  className="testClass1 testClass2"
+  data-test-subj="test subject string"
   defaultValue=""
   fullWidth={true}
   incremental={false}

diff --git a/src/components/search_bar/search_bar.test.js b/src/components/search_bar/search_bar.test.js
@@ -32,14 +32,12 @@ describe('SearchBar', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('render - no query, custom box placeholder and incremental', () => {
+  test('render - box', () => {
     const props = {
-      ...requiredProps,
-      config: {
-        box: {
-          placeholder: 'find something...',
-          incremental: false
-        }
+      box: {
+        placeholder: 'find something...',
+        incremental: false,
+        ...requiredProps
       },
       onChange: () => {}
     };

diff --git a/src/components/search_bar/search_box.js b/src/components/search_bar/search_box.js
@@ -31,16 +31,27 @@ export class EuiSearchBox extends Component {
   }
 
   render() {
+    const {
+      placeholder,
+      query,
+      incremental,
+      onSearch,
+      isInvalid,
+      title,
+      ...rest
+    } = this.props;
+
     return (
       <EuiFieldSearch
         inputRef={input => this.inputElement = input}
         fullWidth
-        placeholder={this.props.placeholder}
-        defaultValue={this.props.query}
-        incremental={this.props.incremental}
-        onSearch={(query) => this.props.onSearch(query)}
-        isInvalid={this.props.isInvalid}
-        title={this.props.title}
+        placeholder={placeholder}
+        defaultValue={query}
+        incremental={incremental}
+        onSearch={(query) => onSearch(query)}
+        isInvalid={isInvalid}
+        title={title}
+        {...rest}
       />
     );
   }