fix(DataTable): removed hardcoded id, resolves #735 (#760)

* fix(DataTable): removed hardcoded id

* chore(TableToolBarSearch): added correct definition for prop

* fix(TableToolbarSearch): added default prop for id

* chore(TableToolbarSearch): default prop

Author: bellsworth13

src/components/DataTable/TableToolbarSearch.js

@@ -2,11 +2,15 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Search from '../Search';
+import setupGetInstanceId from './tools/instanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 const TableToolbarSearch = ({
   className,
   searchContainerClass,
   onChange,
+  id = `data-table-search-${getInstanceId()}`,
   ...rest
 }) => {
   const searchContainerClasses = cx(
@@ -19,7 +23,7 @@ const TableToolbarSearch = ({
         className={className}
         {...rest}
         small
-        id="search-2"
+        id={id}
         labelText="Filter table"
         placeHolderText="Search"
         onChange={onChange}
@@ -30,10 +34,16 @@ const TableToolbarSearch = ({
 
 TableToolbarSearch.propTypes = {
   children: PropTypes.node,
-  className: PropTypes.string,
+
   /**
    * Provide an optional class name for the search container
    */
+  className: PropTypes.string,
+
+  /**
+   * Provide an optional id for the search container
+   */
+  id: PropTypes.string,
   searchContainerClasses: PropTypes.string,
 
   /**

src/components/DataTable/__tests__/DataTable-test.js

@@ -64,7 +64,7 @@ describe('DataTable', () => {
       render: jest.fn(({ rows, headers, getHeaderProps, onInputChange }) => (
         <TableContainer title="DataTable with toolbar">
           <TableToolbar>
-            <TableToolbarSearch onChange={onInputChange} />
+            <TableToolbarSearch onChange={onInputChange} id="custom-id" />
             <TableToolbarContent>
               <TableToolbarAction
                 iconName="download"

src/components/DataTable/__tests__/TableToolbarSearch-test.js

@@ -5,7 +5,11 @@ import { TableToolbarSearch } from '../';
 describe('DataTable.TableToolbarSearch', () => {
   it('should render', () => {
     const wrapper = mount(
-      <TableToolbarSearch className="custom-class" onChange={jest.fn()} />
+      <TableToolbarSearch
+        className="custom-class"
+        onChange={jest.fn()}
+        id="custom-id"
+      />
     );
     expect(wrapper).toMatchSnapshot();
   });

src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -871,13 +871,14 @@ exports[`DataTable should render 1`] = `
           className="bx--table-toolbar"
         >
           <TableToolbarSearch
+            id="custom-id"
             onChange={[Function]}
           >
             <div
               className="bx--toolbar-search-container"
             >
               <Search
-                id="search-2"
+                id="custom-id"
                 labelText="Filter table"
                 onChange={[Function]}
                 placeHolderText="Search"
@@ -921,13 +922,13 @@ exports[`DataTable should render 1`] = `
                   </Icon>
                   <label
                     className="bx--label"
-                    htmlFor="search-2"
+                    htmlFor="custom-id"
                   >
                     Filter table
                   </label>
                   <input
                     className="bx--search-input"
-                    id="search-2"
+                    id="custom-id"
                     onChange={[Function]}
                     placeholder="Search"
                     type="text"

src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap

@@ -3,14 +3,15 @@
 exports[`DataTable.TableToolbarSearch should render 1`] = `
 <TableToolbarSearch
   className="custom-class"
+  id="custom-id"
   onChange={[MockFunction]}
 >
   <div
     className="bx--toolbar-search-container"
   >
     <Search
       className="custom-class"
-      id="search-2"
+      id="custom-id"
       labelText="Filter table"
       onChange={[MockFunction]}
       placeHolderText="Search"
@@ -54,13 +55,13 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
         </Icon>
         <label
           className="bx--label"
-          htmlFor="search-2"
+          htmlFor="custom-id"
         >
           Filter table
         </label>
         <input
           className="bx--search-input"
-          id="search-2"
+          id="custom-id"
           onChange={[Function]}
           placeholder="Search"
           type="text"