feat: new search component

1. Added new Search component
2. Removed the old Search and SearchBar component
3. Changed props of TreePicker component
4. Updated related docs

docs/components/Layout/index.jsx

@@ -52,15 +52,14 @@ import HelpIconPopoverExample from '../../examples/HelpIconPopoverExample';
 import ListPickerExample from '../../examples/ListPickerExample';
 import PagedGridExample from '../../examples/PagedGridExample';
 import PanelExample from '../../examples/PanelExample';
-import SearchExample from '../../examples/SearchExample';
-import SearchBarExample from '../../examples/SearchBarExample';
 import TreePickerExample from '../../examples/TreePickerExample';
 import UserListPickerExample from '../../examples/UserListPickerExample';
 import InformationBoxExample from '../../examples/InformationBoxExample';
 import SplitPaneExample from '../../examples/SplitPaneExample';
 import HoverDropdownMenuExample from '../../examples/HoverDropdownMenuExample';
 import NavigationExample from '../../examples/NavigationExample';
 import OverlayLoaderExample from '../../examples/OverlayLoaderExample';
+import SearchExample from '../../examples/SearchExample';
 
 import './styles.scss';
 import '../../examples/styles.scss';
@@ -97,7 +96,7 @@ const componentsBySection = {
   'feedback-and-states': ['alert', 'empty', 'spinner', 'overlay-loader', 'pretty-diff', 'status-pill'],
   dialogue: ['popover', 'help-icon-popover', 'avatar'],
   modals: ['confirm-modal'],
-  search: ['search', 'search-bar', 'tag'],
+  search: ['search', 'tag'],
   grouping: [
     'page-title',
     'card',
@@ -228,7 +227,6 @@ class PageLayout extends React.Component {
 
             <PageTitle title="Search" />
             <SearchExample />
-            <SearchBarExample />
             <TagExample />
 
             <PageTitle title="Grouping" />

docs/components/MigrationNote/index.jsx

@@ -30,6 +30,45 @@ class MigrationNote extends React.Component {
           <div>
             <h2>Migration Guide</h2>
             <hr />
+            <h3>Search Component</h3>
+            <p>
+              The new {`<Search />`} component will replace the old {`<Search />`} amd {`<SearchBar />`} component.
+            </p>
+            <p>
+              1. <b>onSearch</b> function is the only required prop. It can work as an uncontrolled component without{' '}
+              <b>value</b> and <b>onChange</b>.
+            </p>
+            <p>
+              2. New Search bar will by default trigger <b>onSearch</b> when input changes. You can set{' '}
+              <b>searchOnEnter</b> to true and <b>onSearch</b> will be triggered only when user press Enter or click the
+              search button.
+            </p>
+            <p>
+              3. <b>icons</b> needs to be provided as an object of nodes:
+            </p>
+            <SyntaxHighlighter language="jsx" style={coy}>
+              {`
+                {
+                  search: React.Node,
+                  close: React.Node,
+                  loader: React.Node
+                }
+              `}
+            </SyntaxHighlighter>
+            <p>New Search component will use its default icons if none or some of the icons are not provided.</p>
+            <p>
+              For more information check the example: <a href="#search-example">Search Example</a>
+            </p>
+            <br />
+            <h3>TreePicker Component</h3>
+            <p>
+              <b>searchOnChange</b> prop is removed and <b>searchOnEnterKey</b> prop is renamed <b>searchOnEnter</b>.
+              Tree picker is search on input by default.
+            </p>
+            <p>
+              For more information check the example: <a href="#tree-picker-example">TreePicker Example</a>
+            </p>
+            <br />
             <h3>Popover Component</h3>
             <p>
               The {`<Popover />`} component can be themed by providing one of the following values to the <b>theme</b>{' '}

docs/components/SearchBar/index.jsx

@@ -1,32 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { SearchBar } from '../../../src';
+import { Search } from '../../../src';
 import './styles.scss';
 
-class SearchBarComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchBarString: '',
-    };
-    this.handleStringChange = searchBarString => {
-      this.setState({ searchBarString: searchBarString.trim() });
-    };
-  }
-
-  render() {
-    return (
-      <SearchBar
-        additionalClassNames={['adslot-ui-searchbar']}
-        searchString={this.state.searchBarString}
-        searchPlaceholder="Search for component."
-        searchIconHref="/assets/svg-symbols.svg#search"
-        onSearchStringChange={this.handleStringChange}
-        onSearch={() => this.props.onSearch(this.state.searchBarString)}
-      />
-    );
-  }
-}
+const SearchBarComponent = ({ onSearch }) => (
+  <Search
+    className="adslot-ui-searchbar"
+    placeholder="Search for component"
+    onSearch={value => onSearch(value.trim())}
+    searchOnEnter
+  />
+);
 
 SearchBarComponent.propTypes = {
   onSearch: PropTypes.func.isRequired,