From 888b768551c58356dd27b7ad5276b1c61683ada6 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Thu, 4 Jan 2018 14:30:08 -0500
Subject: [PATCH 1/5] feat(Toolbar): Add Toolbar and its components

---
 src/components/Filter/Filter.js               |  16 +-
 src/components/Filter/Filter.stories.js       |  10 +-
 src/components/Filter/Filter.test.js          |  59 +-
 src/components/Filter/FilterActiveLabel.js    |  17 +
 src/components/Filter/FilterItem.js           |  38 +
 src/components/Filter/FilterList.js           |  20 +
 .../Filter/__mocks__/mockFilterExample.js     | 200 ++++--
 .../Filter/__snapshots__/Filter.test.js.snap  | 194 +++++
 src/components/Filter/index.js                |  11 +-
 src/components/Sort/Sort.js                   |  21 +
 src/components/Sort/Sort.stories.js           |  57 ++
 src/components/Sort/Sort.test.js              |  86 +++
 src/components/Sort/SortDirectionSelector.js  |  38 +
 src/components/Sort/SortTypeSelector.js       |  60 ++
 .../Sort/__mocks__/mockSortExample.js         | 214 ++++++
 .../Sort/__snapshots__/Sort.test.js.snap      | 417 +++++++++++
 src/components/Sort/index.js                  |   8 +
 src/components/Toolbar/Toolbar.js             |  46 ++
 src/components/Toolbar/Toolbar.stories.js     |  48 ++
 src/components/Toolbar/Toolbar.test.js        |  82 +++
 src/components/Toolbar/ToolbarConstants.js    |  20 +
 src/components/Toolbar/ToolbarFind.js         | 158 +++++
 src/components/Toolbar/ToolbarResults.js      |  25 +
 src/components/Toolbar/ToolbarRightContent.js |  17 +
 src/components/Toolbar/ToolbarViewSelector.js |  17 +
 .../Toolbar/__mocks__/mockToolbarExample.js   | 671 ++++++++++++++++++
 .../__snapshots__/Toolbar.test.js.snap        | 496 +++++++++++++
 src/components/Toolbar/index.js               |  18 +
 src/index.js                                  |   2 +
 29 files changed, 2976 insertions(+), 90 deletions(-)
 create mode 100644 src/components/Filter/FilterActiveLabel.js
 create mode 100644 src/components/Filter/FilterItem.js
 create mode 100644 src/components/Filter/FilterList.js
 create mode 100644 src/components/Sort/Sort.js
 create mode 100644 src/components/Sort/Sort.stories.js
 create mode 100644 src/components/Sort/Sort.test.js
 create mode 100644 src/components/Sort/SortDirectionSelector.js
 create mode 100644 src/components/Sort/SortTypeSelector.js
 create mode 100644 src/components/Sort/__mocks__/mockSortExample.js
 create mode 100644 src/components/Sort/__snapshots__/Sort.test.js.snap
 create mode 100644 src/components/Sort/index.js
 create mode 100644 src/components/Toolbar/Toolbar.js
 create mode 100644 src/components/Toolbar/Toolbar.stories.js
 create mode 100644 src/components/Toolbar/Toolbar.test.js
 create mode 100644 src/components/Toolbar/ToolbarConstants.js
 create mode 100644 src/components/Toolbar/ToolbarFind.js
 create mode 100644 src/components/Toolbar/ToolbarResults.js
 create mode 100644 src/components/Toolbar/ToolbarRightContent.js
 create mode 100644 src/components/Toolbar/ToolbarViewSelector.js
 create mode 100644 src/components/Toolbar/__mocks__/mockToolbarExample.js
 create mode 100644 src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
 create mode 100644 src/components/Toolbar/index.js

diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
index ba9b048c018..d1e97833025 100644
--- a/src/components/Filter/Filter.js
+++ b/src/components/Filter/Filter.js
@@ -1,9 +1,19 @@
 import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getContext } from 'recompose';
+import { toolbarContextTypes } from '../Toolbar/ToolbarConstants';
+
+// Disabled eslint due to `isDescendantOfToolbar` being a context property we don't want passed by consumers
+const Filter = ({ children, className, isDescendantOfToolbar, ...rest }) => { // eslint-disable-line
+  const classes = cx(
+    {
+      'filter-pf form-group': true,
+      'toolbar-pf-filter': isDescendantOfToolbar
+    },
+    className
+  );
 
-const Filter = ({ children, className, ...rest }) => {
-  const classes = cx('filter-pf form-group', className);
   return (
     <div className={classes} {...rest}>
       <div className="filter-pf-fields">
@@ -20,4 +30,4 @@ Filter.propTypes = {
   className: PropTypes.string
 };
 
-export default Filter;
+export default getContext(toolbarContextTypes)(Filter);
diff --git a/src/components/Filter/Filter.stories.js b/src/components/Filter/Filter.stories.js
index 28454480ad1..e41f79525de 100644
--- a/src/components/Filter/Filter.stories.js
+++ b/src/components/Filter/Filter.stories.js
@@ -8,7 +8,10 @@ import {
   FilterTypeSelector,
   FilterValueSelector,
   FilterCategorySelector,
-  FilterCategoryValueSelector
+  FilterCategoryValueSelector,
+  FilterActiveLabel,
+  FilterList,
+  FilterItem
 } from '../../index';
 
 import {
@@ -34,7 +37,10 @@ stories.add(
       FilterTypeSelector,
       FilterValueSelector,
       FilterCategorySelector,
-      FilterCategoryValueSelector
+      FilterCategoryValueSelector,
+      FilterActiveLabel,
+      FilterList,
+      FilterItem
     ],
     propTablesExclude: [MockFilterExample],
     text: (
diff --git a/src/components/Filter/Filter.test.js b/src/components/Filter/Filter.test.js
index bc5e3d52154..3bd30ef6780 100644
--- a/src/components/Filter/Filter.test.js
+++ b/src/components/Filter/Filter.test.js
@@ -1,18 +1,12 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import {
-  Filter,
-  FilterTypeSelector,
-  FilterValueSelector,
-  FilterCategorySelector,
-  FilterCategoryValueSelector
-} from '../../index';
+import { Filter, Toolbar } from '../../index';
 import { mockFilterExampleFields } from './__mocks__/mockFilterExample';
 
 test('Filter input renders properly', () => {
   const component = renderer.create(
     <Filter>
-      <FilterTypeSelector
+      <Filter.TypeSelector
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[0]}
       />
@@ -32,11 +26,11 @@ test('Filter input renders properly', () => {
 test('Filter select renders properly', () => {
   const component = renderer.create(
     <Filter>
-      <FilterTypeSelector
+      <Filter.TypeSelector
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[2]}
       />
-      <FilterValueSelector
+      <Filter.ValueSelector
         filterValues={mockFilterExampleFields[2].filterValues}
         currentValue={mockFilterExampleFields[2].filterValues[4]}
       />
@@ -50,16 +44,16 @@ test('Filter select renders properly', () => {
 test('Filter categories renders properly', () => {
   const component = renderer.create(
     <Filter>
-      <FilterTypeSelector
+      <Filter.TypeSelector
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[3]}
       />
-      <FilterCategorySelector
+      <Filter.CategorySelector
         filterCategories={mockFilterExampleFields[3].filterCategories}
         currentCategory={mockFilterExampleFields[3].filterCategories[0]}
         placeholder={mockFilterExampleFields[3].placeholder}
       >
-        <FilterCategoryValueSelector
+        <Filter.CategoryValueSelector
           categoryValues={
             mockFilterExampleFields[3].filterCategories[0].filterValues
           }
@@ -68,10 +62,47 @@ test('Filter categories renders properly', () => {
           }
           placeholder={mockFilterExampleFields[3].filterCategoriesPlaceholder}
         />
-      </FilterCategorySelector>
+      </Filter.CategorySelector>
     </Filter>
   );
 
   const tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('Filter renders properly in a Toolbar', () => {
+  const component = renderer.create(
+    <Toolbar>
+      <Filter>
+        <Filter.TypeSelector
+          filterTypes={mockFilterExampleFields}
+          currentFilterType={mockFilterExampleFields[0]}
+        />
+        <input
+          className="form-control"
+          type={mockFilterExampleFields[0].filterType}
+          value=""
+          placeholder="Filter by Name"
+        />
+      </Filter>
+    </Toolbar>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Filter active components render properly', () => {
+  const component = renderer.create(
+    <Toolbar.Results>
+      <Filter.ActiveLabel title="Active Filters:" />
+      <Filter.List>
+        <Filter.Item label={'Name: John'} />
+        <Filter.Item label={'Address: Westford'} />
+      </Filter.List>
+    </Toolbar.Results>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Filter/FilterActiveLabel.js b/src/components/Filter/FilterActiveLabel.js
new file mode 100644
index 00000000000..0596c8a0eb6
--- /dev/null
+++ b/src/components/Filter/FilterActiveLabel.js
@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FilterActiveLabel = ({ className, title, ...rest }) => {
+  const classes = cx('filter-pf-active-label', className);
+  return <p className={classes}>{title}</p>;
+};
+
+FilterActiveLabel.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** Title for the list (ie. 'Active Filters:') */
+  title: PropTypes.string.isRequired
+};
+
+export default FilterActiveLabel;
diff --git a/src/components/Filter/FilterItem.js b/src/components/Filter/FilterItem.js
new file mode 100644
index 00000000000..8ce006da7f3
--- /dev/null
+++ b/src/components/Filter/FilterItem.js
@@ -0,0 +1,38 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FilterItem = ({ className, label, onRemove, filterData, ...rest }) => {
+  const classes = cx(className);
+
+  return (
+    <li className={classes} {...rest}>
+      <span className="label label-info">
+        {label}
+        <a
+          href="#"
+          onClick={e => {
+            e.preventDefault();
+            onRemove && onRemove(filterData);
+          }}
+        >
+          <span className="pficon pficon-close" aria-hidden="true" />
+          <span className="sr-only">Remove</span>
+        </a>
+      </span>
+    </li>
+  );
+};
+
+FilterItem.propTypes = {
+  /** additional filter item classes */
+  className: PropTypes.string,
+  /** Label to show for the filter item */
+  label: PropTypes.string.isRequired,
+  /** callback when filter is removed  */
+  onRemove: PropTypes.func,
+  /** Data to pass to onRemove function */
+  filterData: PropTypes.object
+};
+
+export default FilterItem;
diff --git a/src/components/Filter/FilterList.js b/src/components/Filter/FilterList.js
new file mode 100644
index 00000000000..d2a9cab1188
--- /dev/null
+++ b/src/components/Filter/FilterList.js
@@ -0,0 +1,20 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FilterList = ({ children, className, ...rest }) => {
+  if (!children) {
+    return null;
+  }
+  const classes = cx('list-inline', className);
+  return <ul className={classes}>{children}</ul>;
+};
+
+FilterList.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default FilterList;
diff --git a/src/components/Filter/__mocks__/mockFilterExample.js b/src/components/Filter/__mocks__/mockFilterExample.js
index 66d8ef4953a..f8a371fdc0c 100644
--- a/src/components/Filter/__mocks__/mockFilterExample.js
+++ b/src/components/Filter/__mocks__/mockFilterExample.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Col, Row, Filter } from '../../../index';
+import { Filter, Toolbar } from '../../../index';
 
 const bindMethods = (context, methods) => {
   methods.forEach(method => {
@@ -85,13 +85,15 @@ export class MockFilterExample extends React.Component {
       'selectFilterType',
       'filterValueSelected',
       'filterCategorySelected',
-      'categoryValueSelected'
+      'categoryValueSelected',
+      'removeFilter',
+      'clearFilters'
     ]);
 
     this.state = {
       currentFilterType: mockFilterExampleFields[0],
-      currentValue: '',
-      filtersText: ''
+      activeFilters: [],
+      currentValue: ''
     };
   }
 
@@ -114,8 +116,9 @@ export class MockFilterExample extends React.Component {
     } else {
       filterText += value;
     }
-    filterText += '\n';
-    this.setState({ filtersText: this.state.filtersText + filterText });
+
+    let activeFilters = [...this.state.activeFilters, { label: filterText }];
+    this.setState({ activeFilters: activeFilters });
   };
 
   selectFilterType(filterType) {
@@ -177,6 +180,23 @@ export class MockFilterExample extends React.Component {
     }
   }
 
+  removeFilter(filter) {
+    const { activeFilters } = this.state;
+
+    let index = activeFilters.indexOf(filter);
+    if (index > -1) {
+      let updated = [
+        ...activeFilters.slice(0, index),
+        ...activeFilters.slice(index + 1)
+      ];
+      this.setState({ activeFilters: updated });
+    }
+  }
+
+  clearFilters() {
+    this.setState({ activeFilters: [] });
+  }
+
   renderInput() {
     const { currentFilterType, currentValue, filterCategory } = this.state;
     if (!currentFilterType) {
@@ -222,45 +242,55 @@ export class MockFilterExample extends React.Component {
   }
 
   render() {
-    const { currentFilterType } = this.state;
+    const { currentFilterType, activeFilters } = this.state;
 
     return (
-      <Grid fluid>
-        <Row>
-          <Col xs={12} sm={4}>
-            <Filter>
-              <Filter.TypeSelector
-                filterTypes={mockFilterExampleFields}
-                currentFilterType={currentFilterType}
-                onFilterTypeSelected={this.selectFilterType}
-              />
-              {this.renderInput()}
-            </Filter>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12}>
-            <hr />
-          </Col>
-          <Col sm={12}>
-            <label className="events-label pull-left">Current Filters: </label>
-          </Col>
-          <Col sm={12}>
-            <textarea
-              rows="5"
-              style={{ width: '100%' }}
-              value={this.state.filtersText}
+      <div>
+        <div style={{ width: 300 }}>
+          <Filter>
+            <Filter.TypeSelector
+              filterTypes={mockFilterExampleFields}
+              currentFilterType={currentFilterType}
+              onFilterTypeSelected={this.selectFilterType}
             />
-          </Col>
-        </Row>
-      </Grid>
+            {this.renderInput()}
+          </Filter>
+        </div>
+        {activeFilters &&
+          activeFilters.length > 0 && (
+            <Toolbar.Results>
+              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.List>
+                {activeFilters.map((item, index) => {
+                  return (
+                    <Filter.Item
+                      label={item.label}
+                      key={index}
+                      onRemove={this.removeFilter}
+                      filterData={item}
+                    />
+                  );
+                })}
+              </Filter.List>
+              <a
+                href="#"
+                onClick={e => {
+                  e.preventDefault();
+                  this.clearFilters();
+                }}
+              >
+                Clear All Filters
+              </a>
+            </Toolbar.Results>
+          )}
+      </div>
     );
   }
 }
 
 export const mockFilterExampleSource = `
 import React from 'react';
-import { Grid, Col, Row, Filter } from '../../../index';
+import { Filter, Toolbar } from '../../../index';
 
 const bindMethods = (context, methods) => {
   methods.forEach(method => {
@@ -346,13 +376,15 @@ export class MockFilterExample extends React.Component {
       'selectFilterType',
       'filterValueSelected',
       'filterCategorySelected',
-      'categoryValueSelected'
+      'categoryValueSelected',
+      'removeFilter',
+      'clearFilters'
     ]);
 
     this.state = {
       currentFilterType: mockFilterExampleFields[0],
-      currentValue: '',
-      filtersText: ''
+      activeFilters: [],
+      currentValue: ''
     };
   }
 
@@ -375,8 +407,9 @@ export class MockFilterExample extends React.Component {
     } else {
       filterText += value;
     }
-    filterText += '\\n';
-    this.setState({ filtersText: this.state.filtersText + filterText });
+
+    let activeFilters = [...this.state.activeFilters, { label: filterText }];
+    this.setState({ activeFilters: activeFilters });
   };
 
   selectFilterType(filterType) {
@@ -438,6 +471,23 @@ export class MockFilterExample extends React.Component {
     }
   }
 
+  removeFilter(filter) {
+    const { activeFilters } = this.state;
+
+    let index = activeFilters.indexOf(filter);
+    if (index > -1) {
+      let updated = [
+        ...activeFilters.slice(0, index),
+        ...activeFilters.slice(index + 1)
+      ];
+      this.setState({ activeFilters: updated });
+    }
+  }
+
+  clearFilters() {
+    this.setState({ activeFilters: [] });
+  }
+
   renderInput() {
     const { currentFilterType, currentValue, filterCategory } = this.state;
     if (!currentFilterType) {
@@ -483,38 +533,48 @@ export class MockFilterExample extends React.Component {
   }
 
   render() {
-    const { currentFilterType } = this.state;
+    const { currentFilterType, activeFilters } = this.state;
 
     return (
-      <Grid fluid>
-        <Row>
-          <Col xs={12} sm={4}>
-            <Filter>
-              <Filter.TypeSelector
-                filterTypes={mockFilterExampleFields}
-                currentFilterType={currentFilterType}
-                onFilterTypeSelected={this.selectFilterType}
-              />
-              {this.renderInput()}
-            </Filter>
-          </Col>
-        </Row>
-        <Row>
-          <Col sm={12}>
-            <hr />
-          </Col>
-          <Col sm={12}>
-            <label className="events-label pull-left">Current Filters: </label>
-          </Col>
-          <Col sm={12}>
-            <textarea
-              rows="5"
-              style={{ width: '100%' }}
-              value={this.state.filtersText}
+      <div>
+        <div style={{ width: 300 }}>
+          <Filter>
+            <Filter.TypeSelector
+              filterTypes={mockFilterExampleFields}
+              currentFilterType={currentFilterType}
+              onFilterTypeSelected={this.selectFilterType}
             />
-          </Col>
-        </Row>
-      </Grid>
+            {this.renderInput()}
+          </Filter>
+        </div>
+        {activeFilters &&
+          activeFilters.length > 0 && (
+            <Toolbar.Results>
+              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.List>
+                {activeFilters.map((item, index) => {
+                  return (
+                    <Filter.Item
+                      label={item.label}
+                      key={index}
+                      onRemove={this.removeFilter}
+                      filterData={item}
+                    />
+                  );
+                })}
+              </Filter.List>
+              <a
+                href="#"
+                onClick={e => {
+                  e.preventDefault();
+                  this.clearFilters();
+                }}
+              >
+                Clear All Filters
+              </a>
+            </Toolbar.Results>
+          )}
+      </div>
     );
   }
 }
diff --git a/src/components/Filter/__snapshots__/Filter.test.js.snap b/src/components/Filter/__snapshots__/Filter.test.js.snap
index 07412084f6e..ca4f68e36bb 100644
--- a/src/components/Filter/__snapshots__/Filter.test.js.snap
+++ b/src/components/Filter/__snapshots__/Filter.test.js.snap
@@ -1,5 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Filter active components render properly 1`] = `
+<div
+  className="toolbar-pf-results row"
+>
+  <div
+    className="col-sm-12"
+  >
+    <p
+      className="filter-pf-active-label"
+    >
+      Active Filters:
+    </p>
+    <ul
+      className="list-inline"
+    >
+      <li
+        className=""
+      >
+        <span
+          className="label label-info"
+        >
+          Name: John
+          <a
+            href="#"
+            onClick={[Function]}
+          >
+            <span
+              aria-hidden="true"
+              className="pficon pficon-close"
+            />
+            <span
+              className="sr-only"
+            >
+              Remove
+            </span>
+          </a>
+        </span>
+      </li>
+      <li
+        className=""
+      >
+        <span
+          className="label label-info"
+        >
+          Address: Westford
+          <a
+            href="#"
+            onClick={[Function]}
+          >
+            <span
+              aria-hidden="true"
+              className="pficon pficon-close"
+            />
+            <span
+              className="sr-only"
+            >
+              Remove
+            </span>
+          </a>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`Filter categories renders properly 1`] = `
 <div
   className="filter-pf form-group"
@@ -391,6 +457,134 @@ exports[`Filter input renders properly 1`] = `
 </div>
 `;
 
+exports[`Filter renders properly in a Toolbar 1`] = `
+<div
+  className="container-fluid"
+>
+  <div
+    className="toolbar-pf row"
+  >
+    <div
+      className="col-sm-12"
+    >
+      <form
+        className="toolbar-pf-actions"
+      >
+        <div
+          className="filter-pf form-group toolbar-pf-filter"
+        >
+          <div
+            className="filter-pf-fields"
+          >
+            <div
+              className="input-group"
+            >
+              <div
+                className="input-group-btn"
+              >
+                <div
+                  className="dropdown btn-group"
+                >
+                  <button
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    className="dropdown-toggle btn btn-default"
+                    disabled={false}
+                    id="filterFieldTypeMenu"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    role="button"
+                    type="button"
+                  >
+                    Name
+                     
+                    <span
+                      className="caret"
+                    />
+                  </button>
+                  <ul
+                    aria-labelledby="filterFieldTypeMenu"
+                    className="dropdown-menu"
+                    role="menu"
+                  >
+                    <li
+                      className="selected"
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Name
+                      </a>
+                    </li>
+                    <li
+                      className=""
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Address
+                      </a>
+                    </li>
+                    <li
+                      className=""
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Birth Month
+                      </a>
+                    </li>
+                    <li
+                      className=""
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Car
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <input
+                className="form-control"
+                placeholder="Filter by Name"
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Filter select renders properly 1`] = `
 <div
   className="filter-pf form-group"
diff --git a/src/components/Filter/index.js b/src/components/Filter/index.js
index f982eaf7b69..2815463efb6 100644
--- a/src/components/Filter/index.js
+++ b/src/components/Filter/index.js
@@ -3,16 +3,25 @@ import FilterTypeSelector from './FilterTypeSelector';
 import FilterValueSelector from './FilterValueSelector';
 import FilterCategorySelector from './FilterCategorySelector';
 import FilterCategoryValueSelector from './FilterCategoryValueSelector';
+import FilterActiveLabel from './FilterActiveLabel';
+import FilterList from './FilterList';
+import FilterItem from './FilterItem';
 
 Filter.TypeSelector = FilterTypeSelector;
 Filter.ValueSelector = FilterValueSelector;
 Filter.CategorySelector = FilterCategorySelector;
 Filter.CategoryValueSelector = FilterCategoryValueSelector;
+Filter.ActiveLabel = FilterActiveLabel;
+Filter.List = FilterList;
+Filter.Item = FilterItem;
 
 export {
   Filter,
   FilterTypeSelector,
   FilterValueSelector,
   FilterCategorySelector,
-  FilterCategoryValueSelector
+  FilterCategoryValueSelector,
+  FilterActiveLabel,
+  FilterList,
+  FilterItem
 };
diff --git a/src/components/Sort/Sort.js b/src/components/Sort/Sort.js
new file mode 100644
index 00000000000..13f0927966f
--- /dev/null
+++ b/src/components/Sort/Sort.js
@@ -0,0 +1,21 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Sort = ({ children, className, ...rest }) => {
+  const classes = cx('form-group', className);
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+Sort.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default Sort;
diff --git a/src/components/Sort/Sort.stories.js b/src/components/Sort/Sort.stories.js
new file mode 100644
index 00000000000..addc68dcd67
--- /dev/null
+++ b/src/components/Sort/Sort.stories.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { withInfo } from '@storybook/addon-info/dist/index';
+import { Sort, SortTypeSelector, SortDirectionSelector } from '../../index';
+import {
+  MockSortExample,
+  mockSortExampleSource
+} from './__mocks__/mockSortExample';
+
+const stories = storiesOf('Sort', module);
+
+export const mockSortFields = [
+  {
+    id: 'name',
+    title: 'Name',
+    isNumeric: false
+  },
+  {
+    id: 'address',
+    title: 'Address',
+    isNumeric: false
+  },
+  {
+    id: 'birthMonth',
+    title: 'Birth Month',
+    isNumeric: true
+  },
+  {
+    id: 'car',
+    title: 'Car',
+    isNumeric: false
+  }
+];
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Sort',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/forms-and-controls/sort/'
+  })
+);
+
+stories.add(
+  'Sort',
+  withInfo({
+    source: false,
+    propTables: [Sort, SortTypeSelector, SortDirectionSelector],
+    propTablesExclude: [MockSortExample],
+    text: (
+      <div>
+        <h1>Story Source</h1>
+        <pre>{mockSortExampleSource}</pre>
+      </div>
+    )
+  })(() => <MockSortExample />)
+);
diff --git a/src/components/Sort/Sort.test.js b/src/components/Sort/Sort.test.js
new file mode 100644
index 00000000000..11c80c3fd51
--- /dev/null
+++ b/src/components/Sort/Sort.test.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Sort } from '../../index';
+
+const mockSortFields = [
+  {
+    id: 'name',
+    title: 'Name',
+    isNumeric: false
+  },
+  {
+    id: 'address',
+    title: 'Address',
+    isNumeric: false
+  },
+  {
+    id: 'birthMonth',
+    title: 'Birth Month',
+    isNumeric: true
+  },
+  {
+    id: 'car',
+    title: 'Car',
+    isNumeric: false
+  }
+];
+
+test('Sort renders numeric ascending properly', () => {
+  const component = renderer.create(
+    <Sort>
+      <Sort.TypeSelector
+        sortTypes={mockSortFields}
+        currentSortType={mockSortFields[0]}
+      />
+      <Sort.DirectionSelector />
+    </Sort>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Sort renders numeric descending properly', () => {
+  const component = renderer.create(
+    <Sort>
+      <Sort.TypeSelector
+        sortTypes={mockSortFields}
+        currentSortType={mockSortFields[0]}
+      />
+      <Sort.DirectionSelector isAscending={false} />
+    </Sort>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Sort renders alpha ascending properly', () => {
+  const component = renderer.create(
+    <Sort>
+      <Sort.TypeSelector
+        sortTypes={mockSortFields}
+        currentSortType={mockSortFields[0]}
+      />
+      <Sort.DirectionSelector isNumeric={false} />
+    </Sort>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Sort renders alpha descending properly', () => {
+  const component = renderer.create(
+    <Sort>
+      <Sort.TypeSelector
+        sortTypes={mockSortFields}
+        currentSortType={mockSortFields[0]}
+      />
+      <Sort.DirectionSelector isNumeric={false} isAscending={false} />
+    </Sort>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Sort/SortDirectionSelector.js b/src/components/Sort/SortDirectionSelector.js
new file mode 100644
index 00000000000..24da1f535a0
--- /dev/null
+++ b/src/components/Sort/SortDirectionSelector.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon } from '../../index';
+
+const SortDirectionSelector = ({
+  className,
+  isNumeric,
+  isAscending,
+  ...rest
+}) => {
+  let directionName;
+  if (isNumeric) {
+    directionName = isAscending ? 'sort-numeric-asc' : 'sort-numeric-desc';
+  } else {
+    directionName = isAscending ? 'sort-alpha-asc' : 'sort-alpha-desc';
+  }
+
+  return (
+    <Button bsStyle="link" className={className} {...rest}>
+      <Icon type="fa" className="sort-direction" name={directionName} />
+    </Button>
+  );
+};
+
+SortDirectionSelector.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** Boolean if current sort type is numeric */
+  isNumeric: PropTypes.bool,
+  /** Boolean if current sort direction is ascending */
+  isAscending: PropTypes.bool
+};
+
+SortDirectionSelector.defaultProps = {
+  isNumeric: true,
+  isAscending: true
+};
+export default SortDirectionSelector;
diff --git a/src/components/Sort/SortTypeSelector.js b/src/components/Sort/SortTypeSelector.js
new file mode 100644
index 00000000000..65f5843dedc
--- /dev/null
+++ b/src/components/Sort/SortTypeSelector.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownButton } from '../Button';
+import { MenuItem } from '../MenuItem';
+
+const SortTypeSelector = ({
+  className,
+  id,
+  sortTypes,
+  currentSortType,
+  onSortTypeSelected,
+  ...rest
+}) => {
+  let menuId = 'sortTypeMenu';
+  menuId += id ? `_${id}` : '';
+  if (sortTypes && sortTypes.length > 1) {
+    let title;
+    if (currentSortType) {
+      title = currentSortType.title || currentSortType;
+    } else {
+      title = currentSortType[0].title || currentSortType[0];
+    }
+
+    return (
+      <DropdownButton className={className} title={title} id={menuId} {...rest}>
+        {sortTypes.map((item, index) => {
+          let classes = {
+            selected: item === currentSortType
+          };
+          return (
+            <MenuItem
+              className={classes}
+              key={item.id || index}
+              onSelect={() => onSortTypeSelected && onSortTypeSelected(item)}
+            >
+              {item.title || item}
+            </MenuItem>
+          );
+        })}
+      </DropdownButton>
+    );
+  } else {
+    return null;
+  }
+};
+
+SortTypeSelector.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** ID for the sort component, necessary for accessibility if there are sort filters on a page */
+  id: PropTypes.string,
+  /** Array of sort types, can be a string or an object with a 'title' field */
+  sortTypes: PropTypes.array.isRequired,
+  /** Current selected sort type */
+  currentSortType: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  /** function(field, value) - Callback to call when a sort type is selected */
+  onSortTypeSelected: PropTypes.func
+};
+
+export default SortTypeSelector;
diff --git a/src/components/Sort/__mocks__/mockSortExample.js b/src/components/Sort/__mocks__/mockSortExample.js
new file mode 100644
index 00000000000..6f8ef0edb21
--- /dev/null
+++ b/src/components/Sort/__mocks__/mockSortExample.js
@@ -0,0 +1,214 @@
+import React from 'react';
+import { Sort, Toolbar } from '../../../index';
+
+const bindMethods = (context, methods) => {
+  methods.forEach(method => {
+    context[method] = context[method].bind(context);
+  });
+};
+
+export const mockSortFields = [
+  {
+    id: 'name',
+    title: 'Name',
+    isNumeric: false
+  },
+  {
+    id: 'address',
+    title: 'Address',
+    isNumeric: false
+  },
+  {
+    id: 'birthMonth',
+    title: 'Birth Month',
+    isNumeric: true
+  },
+  {
+    id: 'car',
+    title: 'Car',
+    isNumeric: false
+  }
+];
+
+export class MockSortExample extends React.Component {
+  constructor() {
+    super();
+
+    bindMethods(this, ['updateCurrentSortType', 'toggleCurrentSortDirection']);
+
+    this.state = {
+      currentSortType: mockSortFields[0],
+      isSortNumeric: mockSortFields[0].isNumeric,
+      isSortAscending: true
+    };
+  }
+
+  filterAdded = (field, value) => {
+    let filterText = '';
+    if (field.title) {
+      filterText = field.title;
+    } else {
+      filterText = field;
+    }
+    filterText += ': ';
+
+    if (value.filterCategory) {
+      filterText +=
+        (value.filterCategory.title || value.filterCategory) +
+        '-' +
+        (value.filterValue.title || value.filterValue);
+    } else if (value.title) {
+      filterText += value.title;
+    } else {
+      filterText += value;
+    }
+
+    let activeFilters = [...this.state.activeFilters, { label: filterText }];
+    this.setState({ activeFilters: activeFilters });
+  };
+
+  updateCurrentSortType(sortType) {
+    const { currentSortType } = this.state;
+    if (currentSortType !== sortType) {
+      this.setState({
+        currentSortType: sortType,
+        isSortNumeric: sortType.isNumeric,
+        isSortAscending: true
+      });
+    }
+  }
+
+  toggleCurrentSortDirection() {
+    const { isSortAscending } = this.state;
+
+    this.setState({ isSortAscending: !isSortAscending });
+  }
+  render() {
+    const { currentSortType, isSortNumeric, isSortAscending } = this.state;
+
+    return (
+      <Toolbar>
+        <Sort>
+          <Sort.TypeSelector
+            sortTypes={mockSortFields}
+            currentSortType={currentSortType}
+            onSortTypeSelected={this.updateCurrentSortType}
+          />
+          <Sort.DirectionSelector
+            isNumeric={isSortNumeric}
+            isAscending={isSortAscending}
+            onClick={() => this.toggleCurrentSortDirection()}
+          />
+        </Sort>
+      </Toolbar>
+    );
+  }
+}
+
+export const mockSortExampleSource = `
+import { Sort, Toolbar } from '../../../index';
+
+const bindMethods = (context, methods) => {
+  methods.forEach(method => {
+    context[method] = context[method].bind(context);
+  });
+};
+
+export const mockSortFields = [
+  {
+    id: 'name',
+    title: 'Name',
+    isNumeric: false
+  },
+  {
+    id: 'address',
+    title: 'Address',
+    isNumeric: false
+  },
+  {
+    id: 'birthMonth',
+    title: 'Birth Month',
+    isNumeric: true
+  },
+  {
+    id: 'car',
+    title: 'Car',
+    isNumeric: false
+  }
+];
+
+export class MockSortExample extends React.Component {
+  constructor() {
+    super();
+
+    bindMethods(this, ['updateCurrentSortType', 'toggleCurrentSortDirection']);
+
+    this.state = {
+      currentSortType: mockSortFields[0],
+      isSortNumeric: mockSortFields[0].isNumeric,
+      isSortAscending: true
+    };
+  }
+
+  filterAdded = (field, value) => {
+    let filterText = '';
+    if (field.title) {
+      filterText = field.title;
+    } else {
+      filterText = field;
+    }
+    filterText += ': ';
+
+    if (value.filterCategory) {
+      filterText +=
+        (value.filterCategory.title || value.filterCategory) +
+        '-' +
+        (value.filterValue.title || value.filterValue);
+    } else if (value.title) {
+      filterText += value.title;
+    } else {
+      filterText += value;
+    }
+
+    let activeFilters = [...this.state.activeFilters, { label: filterText }];
+    this.setState({ activeFilters: activeFilters });
+  };
+
+  updateCurrentSortType(sortType) {
+    const { currentSortType } = this.state;
+    if (currentSortType !== sortType) {
+      this.setState({
+        currentSortType: sortType,
+        isSortNumeric: sortType.isNumeric,
+        isSortAscending: true
+      });
+    }
+  }
+
+  toggleCurrentSortDirection() {
+    const { isSortAscending } = this.state;
+
+    this.setState({ isSortAscending: !isSortAscending });
+  }
+  render() {
+    const { currentSortType, isSortNumeric, isSortAscending } = this.state;
+
+    return (
+      <Toolbar>
+        <Sort>
+          <Sort.TypeSelector
+            sortTypes={mockSortFields}
+            currentSortType={currentSortType}
+            onSortTypeSelected={this.updateCurrentSortType}
+          />
+          <Sort.DirectionSelector
+            isNumeric={isSortNumeric}
+            isAscending={isSortAscending}
+            onClick={() => this.toggleCurrentSortDirection()}
+          />
+        </Sort>
+      </Toolbar>
+    );
+  }
+}
+`;
diff --git a/src/components/Sort/__snapshots__/Sort.test.js.snap b/src/components/Sort/__snapshots__/Sort.test.js.snap
new file mode 100644
index 00000000000..6f13c56b633
--- /dev/null
+++ b/src/components/Sort/__snapshots__/Sort.test.js.snap
@@ -0,0 +1,417 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sort renders alpha ascending properly 1`] = `
+<div
+  className="form-group"
+>
+  <div
+    className="dropdown btn-group"
+  >
+    <button
+      aria-expanded={false}
+      aria-haspopup={true}
+      className="dropdown-toggle btn btn-default"
+      disabled={false}
+      id="sortTypeMenu"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      type="button"
+    >
+      Name
+       
+      <span
+        className="caret"
+      />
+    </button>
+    <ul
+      aria-labelledby="sortTypeMenu"
+      className="dropdown-menu"
+      role="menu"
+    >
+      <li
+        className="selected"
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Name
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Address
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Birth Month
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Car
+        </a>
+      </li>
+    </ul>
+  </div>
+  <button
+    className="btn btn-link"
+    disabled={false}
+    type="button"
+  >
+    <span
+      aria-hidden={true}
+      className="fa fa-sort-alpha-asc sort-direction"
+    />
+  </button>
+</div>
+`;
+
+exports[`Sort renders alpha descending properly 1`] = `
+<div
+  className="form-group"
+>
+  <div
+    className="dropdown btn-group"
+  >
+    <button
+      aria-expanded={false}
+      aria-haspopup={true}
+      className="dropdown-toggle btn btn-default"
+      disabled={false}
+      id="sortTypeMenu"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      type="button"
+    >
+      Name
+       
+      <span
+        className="caret"
+      />
+    </button>
+    <ul
+      aria-labelledby="sortTypeMenu"
+      className="dropdown-menu"
+      role="menu"
+    >
+      <li
+        className="selected"
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Name
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Address
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Birth Month
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Car
+        </a>
+      </li>
+    </ul>
+  </div>
+  <button
+    className="btn btn-link"
+    disabled={false}
+    type="button"
+  >
+    <span
+      aria-hidden={true}
+      className="fa fa-sort-alpha-desc sort-direction"
+    />
+  </button>
+</div>
+`;
+
+exports[`Sort renders numeric ascending properly 1`] = `
+<div
+  className="form-group"
+>
+  <div
+    className="dropdown btn-group"
+  >
+    <button
+      aria-expanded={false}
+      aria-haspopup={true}
+      className="dropdown-toggle btn btn-default"
+      disabled={false}
+      id="sortTypeMenu"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      type="button"
+    >
+      Name
+       
+      <span
+        className="caret"
+      />
+    </button>
+    <ul
+      aria-labelledby="sortTypeMenu"
+      className="dropdown-menu"
+      role="menu"
+    >
+      <li
+        className="selected"
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Name
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Address
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Birth Month
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Car
+        </a>
+      </li>
+    </ul>
+  </div>
+  <button
+    className="btn btn-link"
+    disabled={false}
+    type="button"
+  >
+    <span
+      aria-hidden={true}
+      className="fa fa-sort-numeric-asc sort-direction"
+    />
+  </button>
+</div>
+`;
+
+exports[`Sort renders numeric descending properly 1`] = `
+<div
+  className="form-group"
+>
+  <div
+    className="dropdown btn-group"
+  >
+    <button
+      aria-expanded={false}
+      aria-haspopup={true}
+      className="dropdown-toggle btn btn-default"
+      disabled={false}
+      id="sortTypeMenu"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      type="button"
+    >
+      Name
+       
+      <span
+        className="caret"
+      />
+    </button>
+    <ul
+      aria-labelledby="sortTypeMenu"
+      className="dropdown-menu"
+      role="menu"
+    >
+      <li
+        className="selected"
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Name
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Address
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Birth Month
+        </a>
+      </li>
+      <li
+        className=""
+        role="presentation"
+        style={undefined}
+      >
+        <a
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          role="menuitem"
+          tabIndex="-1"
+        >
+          Car
+        </a>
+      </li>
+    </ul>
+  </div>
+  <button
+    className="btn btn-link"
+    disabled={false}
+    type="button"
+  >
+    <span
+      aria-hidden={true}
+      className="fa fa-sort-numeric-desc sort-direction"
+    />
+  </button>
+</div>
+`;
diff --git a/src/components/Sort/index.js b/src/components/Sort/index.js
new file mode 100644
index 00000000000..a3630b24de5
--- /dev/null
+++ b/src/components/Sort/index.js
@@ -0,0 +1,8 @@
+import Sort from './Sort';
+import SortTypeSelector from './SortTypeSelector';
+import SortDirectionSelector from './SortDirectionSelector';
+
+Sort.TypeSelector = SortTypeSelector;
+Sort.DirectionSelector = SortDirectionSelector;
+
+export { Sort, SortTypeSelector, SortDirectionSelector };
diff --git a/src/components/Toolbar/Toolbar.js b/src/components/Toolbar/Toolbar.js
new file mode 100644
index 00000000000..2f143b4d27a
--- /dev/null
+++ b/src/components/Toolbar/Toolbar.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withContext } from 'recompose';
+import { Grid, Col, Row, ToolbarResults } from '../../index';
+
+import {
+  toolbarContextTypes,
+  getToolbarContext,
+  ToolbarContextProvider
+} from './ToolbarConstants';
+
+const Toolbar = ({ children, className, ...rest }) => {
+  const childrenArray =
+    children &&
+    React.Children.count(children) > 0 &&
+    React.Children.toArray(children);
+
+  const toolbarChildren =
+    childrenArray &&
+    childrenArray.filter(child => child.type !== ToolbarResults);
+  const resultsChildren =
+    childrenArray &&
+    childrenArray.filter(child => child.type === ToolbarResults);
+
+  return (
+    <ToolbarContextProvider isDescendantOfToolbar>
+      <Grid fluid className={className}>
+        <Row className="toolbar-pf">
+          <Col sm={12}>
+            <form className="toolbar-pf-actions">{toolbarChildren}</form>
+            {resultsChildren}
+          </Col>
+        </Row>
+      </Grid>
+    </ToolbarContextProvider>
+  );
+};
+
+Toolbar.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default withContext(toolbarContextTypes, getToolbarContext)(Toolbar);
diff --git a/src/components/Toolbar/Toolbar.stories.js b/src/components/Toolbar/Toolbar.stories.js
new file mode 100644
index 00000000000..c572227f7b0
--- /dev/null
+++ b/src/components/Toolbar/Toolbar.stories.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import {
+  Toolbar,
+  ToolbarResults,
+  ToolbarRightContent,
+  ToolbarFind,
+  ToolbarViewSelector
+} from '../../index';
+
+import {
+  MockToolbarExample,
+  mockToolbarExampleSource
+} from './__mocks__/mockToolbarExample';
+
+import { withInfo } from '@storybook/addon-info/dist/index';
+
+const stories = storiesOf('Toolbar', module);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Toolbar',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/forms-and-controls/toolbar/'
+  })
+);
+
+stories.add(
+  'Toolbar',
+  withInfo({
+    source: false,
+    propTables: [
+      Toolbar,
+      ToolbarResults,
+      ToolbarRightContent,
+      ToolbarFind,
+      ToolbarViewSelector
+    ],
+    propTablesExclude: [MockToolbarExample],
+    text: (
+      <div>
+        <h1>Story Source</h1>
+        <pre>{mockToolbarExampleSource}</pre>
+      </div>
+    )
+  })(() => <MockToolbarExample />)
+);
diff --git a/src/components/Toolbar/Toolbar.test.js b/src/components/Toolbar/Toolbar.test.js
new file mode 100644
index 00000000000..cfd91738a82
--- /dev/null
+++ b/src/components/Toolbar/Toolbar.test.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {
+  Button,
+  DropdownKebab,
+  Filter,
+  Icon,
+  MenuItem,
+  Sort,
+  Toolbar
+} from '../../index';
+
+import { mockFilterExampleFields } from '../Filter/__mocks__/mockFilterExample';
+import { mockSortFields } from '../Sort/__mocks__/mockSortExample';
+
+test('Toolbar renders properly', () => {
+  const component = renderer.create(
+    <Toolbar>
+      <Filter>
+        <Filter.TypeSelector
+          filterTypes={mockFilterExampleFields}
+          currentFilterType={mockFilterExampleFields[0]}
+        />
+        <input
+          className="form-control"
+          type={mockFilterExampleFields[0].filterType}
+          placeholder="Filter by Name"
+        />
+      </Filter>
+      <Sort>
+        <Sort.TypeSelector
+          sortTypes={mockSortFields}
+          currentSortType={mockSortFields[0]}
+        />
+        <Sort.DirectionSelector
+          isNumeric={mockSortFields[0].isNumeric}
+          isAscending
+        />
+      </Sort>
+      <div className="form-group">
+        <Button>Action 1</Button>
+        <Button>Action 2</Button>
+        <DropdownKebab id="toolbarActionKebab">
+          <MenuItem>Action</MenuItem>
+          <MenuItem>Another Action</MenuItem>
+          <MenuItem>Something Else Here</MenuItem>
+          <MenuItem role="separator" className="divider" />
+          <MenuItem>Separated Link</MenuItem>
+        </DropdownKebab>
+      </div>
+      <Toolbar.RightContent>
+        <Toolbar.Find
+          placeholder="Find By Keyword..."
+          currentIndex={1}
+          totalCount={3}
+        />
+        <Toolbar.ViewSelector>
+          <Button title="List View" bsStyle="link" className="active">
+            <Icon type="fa" name="th-list" />
+          </Button>
+          <Button title="Card View" bsStyle="link">
+            <Icon type="fa" name="th" />
+          </Button>
+          <Button title="Table View" bsStyle="link">
+            <Icon type="fa" name="table" />
+          </Button>
+        </Toolbar.ViewSelector>
+      </Toolbar.RightContent>
+      <Toolbar.Results>
+        <h5>40 Results</h5>
+        <Filter.ActiveLabel title="Active Filters:" />
+        <Filter.List>
+          <Filter.Item label={'Name: John'} />
+          <Filter.Item label={'Address: Westford'} />
+        </Filter.List>
+      </Toolbar.Results>
+    </Toolbar>
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/Toolbar/ToolbarConstants.js b/src/components/Toolbar/ToolbarConstants.js
new file mode 100644
index 00000000000..ee8cf7e46f9
--- /dev/null
+++ b/src/components/Toolbar/ToolbarConstants.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withContext } from 'recompose';
+
+const toolbarContextTypes = { isDescendantOfToolbar: PropTypes.bool };
+
+const getToolbarContext = props => ({
+  isDescendantOfToolbar: props.isDescendantOfToolbar
+});
+
+const provideToolbarContext = withContext(
+  toolbarContextTypes,
+  getToolbarContext
+);
+
+const ToolbarContextProvider = provideToolbarContext(props => (
+  <React.Fragment>{props.children}</React.Fragment>
+));
+
+export { toolbarContextTypes, getToolbarContext, ToolbarContextProvider };
diff --git a/src/components/Toolbar/ToolbarFind.js b/src/components/Toolbar/ToolbarFind.js
new file mode 100644
index 00000000000..97299ec063c
--- /dev/null
+++ b/src/components/Toolbar/ToolbarFind.js
@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button, Icon } from '../../index';
+import { bindMethods } from '../../common/helpers';
+
+export class ToolbarFind extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      dropdownShown: false,
+      currentValue: ''
+    };
+
+    bindMethods(this, [
+      'toggleDropdownShown',
+      'hideDropdown',
+      'onValueKeyPress',
+      'handleValueChange',
+      'handleFindNext',
+      'handleFindPrevious'
+    ]);
+  }
+
+  toggleDropdownShown() {
+    const { dropdownShown } = this.state;
+    this.setState({ dropdownShown: !dropdownShown });
+  }
+
+  hideDropdown() {
+    this.setState({ dropdownShown: false });
+  }
+
+  onValueKeyPress(keyEvent) {
+    const { onEnter } = this.props;
+    const { currentValue } = this.state;
+
+    if (keyEvent.key === 'Enter' && onEnter) {
+      onEnter(currentValue);
+    }
+  }
+
+  handleValueChange(event) {
+    const { onChange } = this.props;
+
+    this.setState({ currentValue: event.target.value });
+
+    if (onChange) {
+      onChange(event.target.value);
+    }
+  }
+
+  handleFindNext() {
+    const { currentValue } = this.state;
+    const { onFindNext } = this.props;
+
+    if (onFindNext) {
+      onFindNext(currentValue);
+    }
+  }
+
+  handleFindPrevious() {
+    const { currentValue } = this.state;
+    const { onFindPrevious } = this.props;
+
+    if (onFindPrevious) {
+      onFindPrevious(currentValue);
+    }
+  }
+
+  renderCounts() {
+    const { currentValue } = this.state;
+    const { currentIndex, totalCount } = this.props;
+
+    if (currentValue && currentValue !== '') {
+      return (
+        <span>
+          <span className="find-pf-nums">
+            {currentIndex || 0} of {totalCount}
+          </span>
+          <Button bsStyle="link">
+            <Icon type="fa" name="angle-up" />
+          </Button>
+          <Button bsStyle="link">
+            <Icon type="fa" name="angle-down" />
+          </Button>
+        </span>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  render() {
+    const { dropdownShown, currentValue } = this.state;
+    const { className, placeholder } = this.props;
+
+    const classes = cx('form-group toolbar-pf-find', className);
+
+    const dropdownClasses = cx('find-pf-dropdown-container', {
+      show: dropdownShown
+    });
+
+    return (
+      <div className={classes}>
+        <Button
+          bsStyle="link"
+          className="btn-find"
+          onClick={this.toggleDropdownShown}
+        >
+          <Icon type="fa" name="search" />
+        </Button>
+        <div className={dropdownClasses}>
+          <input
+            type="text"
+            className="form-control"
+            id="find"
+            value={currentValue}
+            placeholder={placeholder}
+            onKeyPress={e => this.onValueKeyPress(e)}
+            onChange={this.handleValueChange}
+          />
+          <div className="find-pf-buttons">
+            {this.renderCounts()}
+            <Button
+              bsStyle="link"
+              className="btn-find-close"
+              onClick={this.hideDropdown}
+            >
+              <Icon type="pf" name="close" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ToolbarFind.propTypes = {
+  /** Additional css classes */
+  className: PropTypes.string,
+  /** index of current item */
+  currentIndex: PropTypes.number,
+  /** total number of items */
+  totalCount: PropTypes.number,
+  /** Placeholder text when empty */
+  placeholder: PropTypes.string,
+  /** Callback function when user hits the enter key */
+  onEnter: PropTypes.func,
+  /** Callback function when the find value changes */
+  onChange: PropTypes.func,
+  /** Callback function when the find next is selected */
+  onFindNext: PropTypes.func,
+  /** Callback function when the find previous is selected */
+  onFindPrevious: PropTypes.func
+};
+
+export default ToolbarFind;
diff --git a/src/components/Toolbar/ToolbarResults.js b/src/components/Toolbar/ToolbarResults.js
new file mode 100644
index 00000000000..5fc573bbcc2
--- /dev/null
+++ b/src/components/Toolbar/ToolbarResults.js
@@ -0,0 +1,25 @@
+import cx from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from '../../index';
+
+const ToolbarResults = ({ children, className, ...rest }) => {
+  const classes = cx('toolbar-pf-results', className);
+  if (!children) {
+    return null;
+  }
+  return (
+    <Row className={classes} {...rest}>
+      <Col sm={12}>{children}</Col>
+    </Row>
+  );
+};
+
+ToolbarResults.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default ToolbarResults;
diff --git a/src/components/Toolbar/ToolbarRightContent.js b/src/components/Toolbar/ToolbarRightContent.js
new file mode 100644
index 00000000000..a29b13069a1
--- /dev/null
+++ b/src/components/Toolbar/ToolbarRightContent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+const ToolbarRightContent = ({ children, className, ...rest }) => {
+  const classes = cx('toolbar-pf-action-right', className);
+  return <div className={classes}>{children}</div>;
+};
+
+ToolbarRightContent.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default ToolbarRightContent;
diff --git a/src/components/Toolbar/ToolbarViewSelector.js b/src/components/Toolbar/ToolbarViewSelector.js
new file mode 100644
index 00000000000..0cb6af45b5e
--- /dev/null
+++ b/src/components/Toolbar/ToolbarViewSelector.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+const ToolbarViewSelector = ({ children, className, ...rest }) => {
+  const classes = cx('form-group toolbar-pf-view-selector', className);
+  return <div className={classes}>{children}</div>;
+};
+
+ToolbarViewSelector.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
+  /** Additional css classes */
+  className: PropTypes.string
+};
+
+export default ToolbarViewSelector;
diff --git a/src/components/Toolbar/__mocks__/mockToolbarExample.js b/src/components/Toolbar/__mocks__/mockToolbarExample.js
new file mode 100644
index 00000000000..ee6e22e2289
--- /dev/null
+++ b/src/components/Toolbar/__mocks__/mockToolbarExample.js
@@ -0,0 +1,671 @@
+import React from 'react';
+
+import {
+  Button,
+  DropdownKebab,
+  Filter,
+  Icon,
+  MenuItem,
+  Sort,
+  Toolbar
+} from '../../../index';
+
+import { mockFilterExampleFields } from '../../Filter/__mocks__/mockFilterExample';
+import { mockSortFields } from '../../Sort/__mocks__/mockSortExample';
+
+const bindMethods = (context, methods) => {
+  methods.forEach(method => {
+    context[method] = context[method].bind(context);
+  });
+};
+
+export class MockToolbarExample extends React.Component {
+  constructor() {
+    super();
+
+    bindMethods(this, [
+      'updateCurrentValue',
+      'onValueKeyPress',
+      'selectFilterType',
+      'filterValueSelected',
+      'filterCategorySelected',
+      'categoryValueSelected',
+      'removeFilter',
+      'clearFilters',
+      'updateCurrentSortType',
+      'toggleCurrentSortDirection'
+    ]);
+
+    this.state = {
+      currentFilterType: mockFilterExampleFields[0],
+      activeFilters: [],
+      currentValue: '',
+      currentSortType: mockSortFields[0],
+      isSortNumeric: mockSortFields[0].isNumeric,
+      isSortAscending: true,
+      currentViewType: 'list'
+    };
+  }
+
+  filterAdded = (field, value) => {
+    let filterText = '';
+    if (field.title) {
+      filterText = field.title;
+    } else {
+      filterText = field;
+    }
+    filterText += ': ';
+
+    if (value.filterCategory) {
+      filterText +=
+        (value.filterCategory.title || value.filterCategory) +
+        '-' +
+        (value.filterValue.title || value.filterValue);
+    } else if (value.title) {
+      filterText += value.title;
+    } else {
+      filterText += value;
+    }
+
+    let activeFilters = [...this.state.activeFilters, { label: filterText }];
+    this.setState({ activeFilters: activeFilters });
+  };
+
+  selectFilterType(filterType) {
+    const { currentFilterType } = this.state;
+    if (currentFilterType !== filterType) {
+      this.setState({ currentValue: '', currentFilterType: filterType });
+
+      if (filterType.filterType === 'complex-select') {
+        this.setState({ filterCategory: undefined, categoryValue: '' });
+      }
+    }
+  }
+
+  filterValueSelected(filterValue) {
+    const { currentFilterType, currentValue } = this.state;
+
+    if (filterValue !== currentValue) {
+      this.setState({ currentValue: filterValue });
+      if (filterValue) {
+        this.filterAdded(currentFilterType, filterValue);
+      }
+    }
+  }
+
+  filterCategorySelected(category) {
+    const { filterCategory } = this.state;
+    if (filterCategory !== category) {
+      this.setState({ filterCategory: category, categoryValue: '' });
+    }
+  }
+
+  categoryValueSelected(value) {
+    const { currentValue, currentFilterType, filterCategory } = this.state;
+
+    if (filterCategory && currentValue !== value) {
+      this.setState({ currentValue: value });
+      if (value) {
+        let filterValue = {
+          filterCategory: filterCategory,
+          filterValue: value
+        };
+        this.filterAdded(currentFilterType, filterValue);
+      }
+    }
+  }
+
+  updateCurrentValue(event) {
+    this.setState({ currentValue: event.target.value });
+  }
+
+  onValueKeyPress(keyEvent) {
+    const { currentValue, currentFilterType } = this.state;
+
+    if (keyEvent.key === 'Enter' && currentValue && currentValue.length > 0) {
+      this.setState({ currentValue: '' });
+      this.filterAdded(currentFilterType, currentValue);
+      keyEvent.stopPropagation();
+      keyEvent.preventDefault();
+    }
+  }
+
+  removeFilter(filter) {
+    const { activeFilters } = this.state;
+
+    let index = activeFilters.indexOf(filter);
+    if (index > -1) {
+      let updated = [
+        ...activeFilters.slice(0, index),
+        ...activeFilters.slice(index + 1)
+      ];
+      this.setState({ activeFilters: updated });
+    }
+  }
+
+  clearFilters() {
+    this.setState({ activeFilters: [] });
+  }
+
+  updateCurrentSortType(sortType) {
+    const { currentSortType } = this.state;
+    if (currentSortType !== sortType) {
+      this.setState({
+        currentSortType: sortType,
+        isSortNumeric: sortType.isNumeric,
+        isSortAscending: true
+      });
+    }
+  }
+
+  toggleCurrentSortDirection() {
+    const { isSortAscending } = this.state;
+
+    this.setState({ isSortAscending: !isSortAscending });
+  }
+
+  setViewType(viewType) {
+    this.setState({ currentViewType: viewType });
+  }
+
+  renderInput() {
+    const { currentFilterType, currentValue, filterCategory } = this.state;
+    if (!currentFilterType) {
+      return null;
+    }
+
+    if (currentFilterType.filterType === 'select') {
+      return (
+        <Filter.ValueSelector
+          filterValues={currentFilterType.filterValues}
+          currentValue={currentValue}
+          onFilterValueSelected={this.filterValueSelected}
+        />
+      );
+    } else if (currentFilterType.filterType === 'complex-select') {
+      return (
+        <Filter.CategorySelector
+          filterCategories={currentFilterType.filterCategories}
+          currentCategory={filterCategory}
+          placeholder={currentFilterType.placeholder}
+          onFilterCategorySelected={this.filterCategorySelected}
+        >
+          <Filter.CategoryValueSelector
+            categoryValues={filterCategory && filterCategory.filterValues}
+            currentValue={currentValue}
+            placeholder={currentFilterType.filterCategoriesPlaceholder}
+            onCategoryValueSelected={this.categoryValueSelected}
+          />
+        </Filter.CategorySelector>
+      );
+    } else {
+      return (
+        <input
+          className="form-control"
+          type={currentFilterType.filterType}
+          value={currentValue}
+          placeholder={currentFilterType.placeholder}
+          onChange={e => this.updateCurrentValue(e)}
+          onKeyPress={e => this.onValueKeyPress(e)}
+        />
+      );
+    }
+  }
+
+  render() {
+    const {
+      currentFilterType,
+      activeFilters,
+      currentSortType,
+      isSortNumeric,
+      isSortAscending,
+      currentViewType
+    } = this.state;
+
+    return (
+      <Toolbar>
+        <Filter>
+          <Filter.TypeSelector
+            filterTypes={mockFilterExampleFields}
+            currentFilterType={currentFilterType}
+            onFilterTypeSelected={this.selectFilterType}
+          />
+          {this.renderInput()}
+        </Filter>
+        <Sort>
+          <Sort.TypeSelector
+            sortTypes={mockSortFields}
+            currentSortType={currentSortType}
+            onSortTypeSelected={this.updateCurrentSortType}
+          />
+          <Sort.DirectionSelector
+            isNumeric={isSortNumeric}
+            isAscending={isSortAscending}
+            onClick={() => this.toggleCurrentSortDirection()}
+          />
+        </Sort>
+        <div className="form-group">
+          <Button>Action 1</Button>
+          <Button>Action 2</Button>
+          <DropdownKebab id="toolbarActionKebab">
+            <MenuItem>Action</MenuItem>
+            <MenuItem>Another Action</MenuItem>
+            <MenuItem>Something Else Here</MenuItem>
+            <MenuItem role="separator" className="divider" />
+            <MenuItem>Separated Link</MenuItem>
+          </DropdownKebab>
+        </div>
+        <Toolbar.RightContent>
+          <Toolbar.Find
+            placeholder="Find By Keyword..."
+            currentIndex={1}
+            totalCount={3}
+          />
+          <Toolbar.ViewSelector>
+            <Button
+              title="List View"
+              bsStyle="link"
+              className={{ active: currentViewType === 'list' }}
+              onClick={() => {
+                this.setViewType('list');
+              }}
+            >
+              <Icon type="fa" name="th-list" />
+            </Button>
+            <Button
+              title="Card View"
+              bsStyle="link"
+              className={{ active: currentViewType === 'card' }}
+              onClick={() => {
+                this.setViewType('card');
+              }}
+            >
+              <Icon type="fa" name="th" />
+            </Button>
+            <Button
+              title="Table View"
+              bsStyle="link"
+              className={{ active: currentViewType === 'table' }}
+              onClick={() => {
+                this.setViewType('table');
+              }}
+            >
+              <Icon type="fa" name="table" />
+            </Button>
+          </Toolbar.ViewSelector>
+        </Toolbar.RightContent>
+        {!activeFilters ||
+          (activeFilters.length === 0 && (
+            <Toolbar.Results>
+              <h5>40 Results</h5>
+            </Toolbar.Results>
+          ))}
+        {activeFilters &&
+          activeFilters.length > 0 && (
+            <Toolbar.Results>
+              <h5>40 Results</h5>
+              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.List>
+                {activeFilters.map((item, index) => {
+                  return (
+                    <Filter.Item
+                      label={item.label}
+                      key={index}
+                      onRemove={this.removeFilter}
+                      filterData={item}
+                    />
+                  );
+                })}
+              </Filter.List>
+              <a
+                href="#"
+                onClick={e => {
+                  e.preventDefault();
+                  this.clearFilters();
+                }}
+              >
+                Clear All Filters
+              </a>
+            </Toolbar.Results>
+          )}
+      </Toolbar>
+    );
+  }
+}
+
+export const mockToolbarExampleSource = `
+import React from 'react';
+
+import {
+  Button,
+  DropdownKebab,
+  Filter,
+  Icon,
+  MenuItem,
+  Sort,
+  Toolbar
+} from '../../../index';
+
+import { mockFilterExampleFields } from '../../Filter/__mocks__/mockFilterExample';
+import { mockSortFields } from '../../Sort/__mocks__/mockSortExample';
+
+const bindMethods = (context, methods) => {
+  methods.forEach(method => {
+    context[method] = context[method].bind(context);
+  });
+};
+
+export class MockToolbarExample extends React.Component {
+  constructor() {
+    super();
+
+    bindMethods(this, [
+      'updateCurrentValue',
+      'onValueKeyPress',
+      'selectFilterType',
+      'filterValueSelected',
+      'filterCategorySelected',
+      'categoryValueSelected',
+      'removeFilter',
+      'clearFilters',
+      'updateCurrentSortType',
+      'toggleCurrentSortDirection'
+    ]);
+
+    this.state = {
+      currentFilterType: mockFilterExampleFields[0],
+      activeFilters: [],
+      currentValue: '',
+      currentSortType: mockSortFields[0],
+      isSortNumeric: mockSortFields[0].isNumeric,
+      isSortAscending: true,
+      currentViewType: 'list'
+    };
+  }
+
+  filterAdded = (field, value) => {
+    let filterText = '';
+    if (field.title) {
+      filterText = field.title;
+    } else {
+      filterText = field;
+    }
+    filterText += ': ';
+
+    if (value.filterCategory) {
+      filterText +=
+        (value.filterCategory.title || value.filterCategory) +
+        '-' +
+        (value.filterValue.title || value.filterValue);
+    } else if (value.title) {
+      filterText += value.title;
+    } else {
+      filterText += value;
+    }
+
+    let activeFilters = [...this.state.activeFilters, { label: filterText }];
+    this.setState({ activeFilters: activeFilters });
+  };
+
+  selectFilterType(filterType) {
+    const { currentFilterType } = this.state;
+    if (currentFilterType !== filterType) {
+      this.setState({ currentValue: '', currentFilterType: filterType });
+
+      if (filterType.filterType === 'complex-select') {
+        this.setState({ filterCategory: undefined, categoryValue: '' });
+      }
+    }
+  }
+
+  filterValueSelected(filterValue) {
+    const { currentFilterType, currentValue } = this.state;
+
+    if (filterValue !== currentValue) {
+      this.setState({ currentValue: filterValue });
+      if (filterValue) {
+        this.filterAdded(currentFilterType, filterValue);
+      }
+    }
+  }
+
+  filterCategorySelected(category) {
+    const { filterCategory } = this.state;
+    if (filterCategory !== category) {
+      this.setState({ filterCategory: category, categoryValue: '' });
+    }
+  }
+
+  categoryValueSelected(value) {
+    const { currentValue, currentFilterType, filterCategory } = this.state;
+
+    if (filterCategory && currentValue !== value) {
+      this.setState({ currentValue: value });
+      if (value) {
+        let filterValue = {
+          filterCategory: filterCategory,
+          filterValue: value
+        };
+        this.filterAdded(currentFilterType, filterValue);
+      }
+    }
+  }
+
+  updateCurrentValue(event) {
+    this.setState({ currentValue: event.target.value });
+  }
+
+  onValueKeyPress(keyEvent) {
+    const { currentValue, currentFilterType } = this.state;
+
+    if (keyEvent.key === 'Enter' && currentValue && currentValue.length > 0) {
+      this.setState({ currentValue: '' });
+      this.filterAdded(currentFilterType, currentValue);
+      keyEvent.stopPropagation();
+      keyEvent.preventDefault();
+    }
+  }
+
+  removeFilter(filter) {
+    const { activeFilters } = this.state;
+
+    let index = activeFilters.indexOf(filter);
+    if (index > -1) {
+      let updated = [
+        ...activeFilters.slice(0, index),
+        ...activeFilters.slice(index + 1)
+      ];
+      this.setState({ activeFilters: updated });
+    }
+  }
+
+  clearFilters() {
+    this.setState({ activeFilters: [] });
+  }
+
+  updateCurrentSortType(sortType) {
+    const { currentSortType } = this.state;
+    if (currentSortType !== sortType) {
+      this.setState({
+        currentSortType: sortType,
+        isSortNumeric: sortType.isNumeric,
+        isSortAscending: true
+      });
+    }
+  }
+
+  toggleCurrentSortDirection() {
+    const { isSortAscending } = this.state;
+
+    this.setState({ isSortAscending: !isSortAscending });
+  }
+
+  setViewType(viewType) {
+    this.setState({ currentViewType: viewType });
+  }
+
+  renderInput() {
+    const { currentFilterType, currentValue, filterCategory } = this.state;
+    if (!currentFilterType) {
+      return null;
+    }
+
+    if (currentFilterType.filterType === 'select') {
+      return (
+        <Filter.ValueSelector
+          filterValues={currentFilterType.filterValues}
+          currentValue={currentValue}
+          onFilterValueSelected={this.filterValueSelected}
+        />
+      );
+    } else if (currentFilterType.filterType === 'complex-select') {
+      return (
+        <Filter.CategorySelector
+          filterCategories={currentFilterType.filterCategories}
+          currentCategory={filterCategory}
+          placeholder={currentFilterType.placeholder}
+          onFilterCategorySelected={this.filterCategorySelected}
+        >
+          <Filter.CategoryValueSelector
+            categoryValues={filterCategory && filterCategory.filterValues}
+            currentValue={currentValue}
+            placeholder={currentFilterType.filterCategoriesPlaceholder}
+            onCategoryValueSelected={this.categoryValueSelected}
+          />
+        </Filter.CategorySelector>
+      );
+    } else {
+      return (
+        <input
+          className="form-control"
+          type={currentFilterType.filterType}
+          value={currentValue}
+          placeholder={currentFilterType.placeholder}
+          onChange={e => this.updateCurrentValue(e)}
+          onKeyPress={e => this.onValueKeyPress(e)}
+        />
+      );
+    }
+  }
+
+  render() {
+    const {
+      currentFilterType,
+      activeFilters,
+      currentSortType,
+      isSortNumeric,
+      isSortAscending,
+      currentViewType
+    } = this.state;
+
+    return (
+      <Toolbar>
+        <Filter>
+          <Filter.TypeSelector
+            filterTypes={mockFilterExampleFields}
+            currentFilterType={currentFilterType}
+            onFilterTypeSelected={this.selectFilterType}
+          />
+          {this.renderInput()}
+        </Filter>
+        <Sort>
+          <Sort.TypeSelector
+            sortTypes={mockSortFields}
+            currentSortType={currentSortType}
+            onSortTypeSelected={this.updateCurrentSortType}
+          />
+          <Sort.DirectionSelector
+            isNumeric={isSortNumeric}
+            isAscending={isSortAscending}
+            onClick={() => this.toggleCurrentSortDirection()}
+          />
+        </Sort>
+        <div className="form-group">
+          <Button>Action 1</Button>
+          <Button>Action 2</Button>
+          <DropdownKebab id="toolbarActionKebab">
+            <MenuItem>Action</MenuItem>
+            <MenuItem>Another Action</MenuItem>
+            <MenuItem>Something Else Here</MenuItem>
+            <MenuItem role="separator" className="divider" />
+            <MenuItem>Separated Link</MenuItem>
+          </DropdownKebab>
+        </div>
+        <Toolbar.RightContent>
+          <Toolbar.Find
+            placeholder="Find By Keyword..."
+            currentIndex={1}
+            totalCount={3}
+          />
+          <Toolbar.ViewSelector>
+            <Button
+              title="List View"
+              bsStyle="link"
+              className={{ active: currentViewType === 'list' }}
+              onClick={() => {
+                this.setViewType('list');
+              }}
+            >
+              <Icon type="fa" name="th-list" />
+            </Button>
+            <Button
+              title="Card View"
+              bsStyle="link"
+              className={{ active: currentViewType === 'card' }}
+              onClick={() => {
+                this.setViewType('card');
+              }}
+            >
+              <Icon type="fa" name="th" />
+            </Button>
+            <Button
+              title="Table View"
+              bsStyle="link"
+              className={{ active: currentViewType === 'table' }}
+              onClick={() => {
+                this.setViewType('table');
+              }}
+            >
+              <Icon type="fa" name="table" />
+            </Button>
+          </Toolbar.ViewSelector>
+        </Toolbar.RightContent>
+        {!activeFilters ||
+          (activeFilters.length === 0 && (
+            <Toolbar.Results>
+              <h5>40 Results</h5>
+            </Toolbar.Results>
+          ))}
+        {activeFilters &&
+          activeFilters.length > 0 && (
+            <Toolbar.Results>
+              <h5>40 Results</h5>
+              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.List>
+                {activeFilters.map((item, index) => {
+                  return (
+                    <Filter.Item
+                      label={item.label}
+                      key={index}
+                      onRemove={this.removeFilter}
+                      filterData={item}
+                    />
+                  );
+                })}
+              </Filter.List>
+              <a
+                href="#"
+                onClick={e => {
+                  e.preventDefault();
+                  this.clearFilters();
+                }}
+              >
+                Clear All Filters
+              </a>
+            </Toolbar.Results>
+          )}
+      </Toolbar>
+    );
+  }
+}
+`;
diff --git a/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap b/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
new file mode 100644
index 00000000000..381ca365545
--- /dev/null
+++ b/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
@@ -0,0 +1,496 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toolbar renders properly 1`] = `
+<div
+  className="container-fluid"
+>
+  <div
+    className="toolbar-pf row"
+  >
+    <div
+      className="col-sm-12"
+    >
+      <form
+        className="toolbar-pf-actions"
+      >
+        <div
+          className="filter-pf form-group toolbar-pf-filter"
+        >
+          <div
+            className="filter-pf-fields"
+          >
+            <div
+              className="input-group"
+            >
+              <div
+                className="input-group-btn"
+              >
+                <div
+                  className="dropdown btn-group"
+                >
+                  <button
+                    aria-expanded={false}
+                    aria-haspopup={true}
+                    className="dropdown-toggle btn btn-default"
+                    disabled={false}
+                    id="filterFieldTypeMenu"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    role="button"
+                    type="button"
+                  >
+                    Name
+                     
+                    <span
+                      className="caret"
+                    />
+                  </button>
+                  <ul
+                    aria-labelledby="filterFieldTypeMenu"
+                    className="dropdown-menu"
+                    role="menu"
+                  >
+                    <li
+                      className="selected"
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Name
+                      </a>
+                    </li>
+                    <li
+                      className=""
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Address
+                      </a>
+                    </li>
+                    <li
+                      className=""
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Birth Month
+                      </a>
+                    </li>
+                    <li
+                      className=""
+                      role="presentation"
+                      style={undefined}
+                    >
+                      <a
+                        href="#"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        role="menuitem"
+                        tabIndex="-1"
+                      >
+                        Car
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <input
+                className="form-control"
+                placeholder="Filter by Name"
+                type="text"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <div
+            className="dropdown btn-group"
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup={true}
+              className="dropdown-toggle btn btn-default"
+              disabled={false}
+              id="sortTypeMenu"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              type="button"
+            >
+              Name
+               
+              <span
+                className="caret"
+              />
+            </button>
+            <ul
+              aria-labelledby="sortTypeMenu"
+              className="dropdown-menu"
+              role="menu"
+            >
+              <li
+                className="selected"
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Name
+                </a>
+              </li>
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Address
+                </a>
+              </li>
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Birth Month
+                </a>
+              </li>
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Car
+                </a>
+              </li>
+            </ul>
+          </div>
+          <button
+            className="btn btn-link"
+            disabled={false}
+            type="button"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-sort-alpha-asc sort-direction"
+            />
+          </button>
+        </div>
+        <div
+          className="form-group"
+        >
+          <button
+            className="btn btn-default"
+            disabled={false}
+            type="button"
+          >
+            Action 1
+          </button>
+          <button
+            className="btn btn-default"
+            disabled={false}
+            type="button"
+          >
+            Action 2
+          </button>
+          <div
+            className="dropdown-kebab-pf dropdown btn-group"
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup={true}
+              className="dropdown-toggle btn btn-link"
+              disabled={false}
+              id="toolbarActionKebab"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              role="button"
+              type="button"
+            >
+              <span
+                aria-hidden={true}
+                className="fa fa-ellipsis-v"
+              />
+            </button>
+            <ul
+              aria-labelledby="toolbarActionKebab"
+              className="dropdown-menu"
+              role="menu"
+            >
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Action
+                </a>
+              </li>
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Another Action
+                </a>
+              </li>
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Something Else Here
+                </a>
+              </li>
+              <li
+                className="divider"
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                />
+              </li>
+              <li
+                className=""
+                role="presentation"
+                style={undefined}
+              >
+                <a
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="menuitem"
+                  tabIndex="-1"
+                >
+                  Separated Link
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          className="toolbar-pf-action-right"
+        >
+          <div
+            className="form-group toolbar-pf-find"
+          >
+            <button
+              className="btn-find btn btn-link"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                aria-hidden={true}
+                className="fa fa-search"
+              />
+            </button>
+            <div
+              className="find-pf-dropdown-container"
+            >
+              <input
+                className="form-control"
+                id="find"
+                onChange={[Function]}
+                onKeyPress={[Function]}
+                placeholder="Find By Keyword..."
+                type="text"
+                value=""
+              />
+              <div
+                className="find-pf-buttons"
+              >
+                <button
+                  className="btn-find-close btn btn-link"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="pficon pficon-close"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="form-group toolbar-pf-view-selector"
+          >
+            <button
+              className="active btn btn-link"
+              disabled={false}
+              title="List View"
+              type="button"
+            >
+              <span
+                aria-hidden={true}
+                className="fa fa-th-list"
+              />
+            </button>
+            <button
+              className="btn btn-link"
+              disabled={false}
+              title="Card View"
+              type="button"
+            >
+              <span
+                aria-hidden={true}
+                className="fa fa-th"
+              />
+            </button>
+            <button
+              className="btn btn-link"
+              disabled={false}
+              title="Table View"
+              type="button"
+            >
+              <span
+                aria-hidden={true}
+                className="fa fa-table"
+              />
+            </button>
+          </div>
+        </div>
+      </form>
+      <div
+        className="toolbar-pf-results row"
+      >
+        <div
+          className="col-sm-12"
+        >
+          <h5>
+            40 Results
+          </h5>
+          <p
+            className="filter-pf-active-label"
+          >
+            Active Filters:
+          </p>
+          <ul
+            className="list-inline"
+          >
+            <li
+              className=""
+            >
+              <span
+                className="label label-info"
+              >
+                Name: John
+                <a
+                  href="#"
+                  onClick={[Function]}
+                >
+                  <span
+                    aria-hidden="true"
+                    className="pficon pficon-close"
+                  />
+                  <span
+                    className="sr-only"
+                  >
+                    Remove
+                  </span>
+                </a>
+              </span>
+            </li>
+            <li
+              className=""
+            >
+              <span
+                className="label label-info"
+              >
+                Address: Westford
+                <a
+                  href="#"
+                  onClick={[Function]}
+                >
+                  <span
+                    aria-hidden="true"
+                    className="pficon pficon-close"
+                  />
+                  <span
+                    className="sr-only"
+                  >
+                    Remove
+                  </span>
+                </a>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Toolbar/index.js b/src/components/Toolbar/index.js
new file mode 100644
index 00000000000..e49919ca714
--- /dev/null
+++ b/src/components/Toolbar/index.js
@@ -0,0 +1,18 @@
+import Toolbar from './Toolbar';
+import ToolbarResults from './ToolbarResults';
+import ToolbarRightContent from './ToolbarRightContent';
+import ToolbarFind from './ToolbarFind';
+import ToolbarViewSelector from './ToolbarViewSelector';
+
+Toolbar.Results = ToolbarResults;
+Toolbar.RightContent = ToolbarRightContent;
+Toolbar.Find = ToolbarFind;
+Toolbar.ViewSelector = ToolbarViewSelector;
+
+export {
+  Toolbar,
+  ToolbarResults,
+  ToolbarRightContent,
+  ToolbarFind,
+  ToolbarViewSelector
+};
diff --git a/src/index.js b/src/index.js
index 42aece93133..8608b9f67a1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,8 +17,10 @@ export * from './components/MenuItem';
 export * from './components/Modal';
 export * from './components/OverlayTrigger';
 export * from './components/Popover';
+export * from './components/Sort';
 export * from './components/Spinner';
 export * from './components/ToastNotification';
+export * from './components/Toolbar';
 export * from './components/Tooltip';
 export * from './components/Wizard';
 export { patternfly } from './common/patternfly';

From ba0310359152102647838be0dbd20d46e7aaf568 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Fri, 5 Jan 2018 07:31:40 -0500
Subject: [PATCH 2/5] remove extraneous span wrapper from ToolbarFind

---
 src/components/Toolbar/ToolbarFind.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/Toolbar/ToolbarFind.js b/src/components/Toolbar/ToolbarFind.js
index 97299ec063c..14c79dbbf2d 100644
--- a/src/components/Toolbar/ToolbarFind.js
+++ b/src/components/Toolbar/ToolbarFind.js
@@ -73,19 +73,17 @@ export class ToolbarFind extends React.Component {
     const { currentIndex, totalCount } = this.props;
 
     if (currentValue && currentValue !== '') {
-      return (
-        <span>
-          <span className="find-pf-nums">
-            {currentIndex || 0} of {totalCount}
-          </span>
-          <Button bsStyle="link">
-            <Icon type="fa" name="angle-up" />
-          </Button>
-          <Button bsStyle="link">
-            <Icon type="fa" name="angle-down" />
-          </Button>
-        </span>
-      );
+      return [
+        <span className="find-pf-nums">
+          {currentIndex || 0} of {totalCount}
+        </span>,
+        <Button bsStyle="link">
+          <Icon type="fa" name="angle-up" />
+        </Button>,
+        <Button bsStyle="link">
+          <Icon type="fa" name="angle-down" />
+        </Button>
+      ];
     } else {
       return null;
     }

From 1c1b780efb8a172a3f3245acb81fd9b908576932 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Mon, 8 Jan 2018 07:23:23 -0500
Subject: [PATCH 3/5] Updates per review comments

---
 package-lock.json                             | 10 +--
 src/components/Filter/FilterActiveLabel.js    | 10 +--
 src/components/Filter/FilterItem.js           |  8 +--
 .../Filter/__mocks__/mockFilterExample.js     | 70 +++++++++++--------
 .../Filter/__snapshots__/Filter.test.js.snap  |  8 +--
 .../Sort/__mocks__/mockSortExample.js         | 29 +++-----
 src/components/Toolbar/ToolbarFind.js         |  5 +-
 .../Toolbar/__mocks__/mockToolbarExample.js   | 28 +++-----
 .../__snapshots__/Toolbar.test.js.snap        |  8 +--
 9 files changed, 86 insertions(+), 90 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2b9cff338e9..c4eeafed30a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -158,7 +158,7 @@
         "mime": "2.2.0",
         "p-reduce": "1.0.0",
         "parse-github-url": "1.0.2",
-        "url-join": "2.0.2"
+        "url-join": "2.0.3"
       },
       "dependencies": {
         "debug": {
@@ -14703,7 +14703,7 @@
         "p-retry": "1.0.0",
         "semver": "5.4.1",
         "update-notifier": "2.3.0",
-        "url-join": "2.0.2",
+        "url-join": "2.0.3",
         "yargs": "10.1.1"
       },
       "dependencies": {
@@ -15028,9 +15028,9 @@
       }
     },
     "url-join": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.2.tgz",
-      "integrity": "sha1-wHJ1aWetJLi1nldBVRyqx49QuLc=",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.3.tgz",
+      "integrity": "sha1-Fdsf3ekFZRw6Ihp42l/rj8gJ03I=",
       "dev": true
     },
     "url-loader": {
diff --git a/src/components/Filter/FilterActiveLabel.js b/src/components/Filter/FilterActiveLabel.js
index 0596c8a0eb6..1822f2a1c17 100644
--- a/src/components/Filter/FilterActiveLabel.js
+++ b/src/components/Filter/FilterActiveLabel.js
@@ -2,16 +2,16 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const FilterActiveLabel = ({ className, title, ...rest }) => {
+const FilterActiveLabel = ({ children, className, ...rest }) => {
   const classes = cx('filter-pf-active-label', className);
-  return <p className={classes}>{title}</p>;
+  return <p className={classes}>{children}</p>;
 };
 
 FilterActiveLabel.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
   /** Additional css classes */
-  className: PropTypes.string,
-  /** Title for the list (ie. 'Active Filters:') */
-  title: PropTypes.string.isRequired
+  className: PropTypes.string
 };
 
 export default FilterActiveLabel;
diff --git a/src/components/Filter/FilterItem.js b/src/components/Filter/FilterItem.js
index 8ce006da7f3..d344afc5cd7 100644
--- a/src/components/Filter/FilterItem.js
+++ b/src/components/Filter/FilterItem.js
@@ -2,13 +2,13 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const FilterItem = ({ className, label, onRemove, filterData, ...rest }) => {
+const FilterItem = ({ children, className, onRemove, filterData, ...rest }) => {
   const classes = cx(className);
 
   return (
     <li className={classes} {...rest}>
       <span className="label label-info">
-        {label}
+        {children}
         <a
           href="#"
           onClick={e => {
@@ -25,10 +25,10 @@ const FilterItem = ({ className, label, onRemove, filterData, ...rest }) => {
 };
 
 FilterItem.propTypes = {
+  /** Children nodes */
+  children: PropTypes.node,
   /** additional filter item classes */
   className: PropTypes.string,
-  /** Label to show for the filter item */
-  label: PropTypes.string.isRequired,
   /** callback when filter is removed  */
   onRemove: PropTypes.func,
   /** Data to pass to onRemove function */
diff --git a/src/components/Filter/__mocks__/mockFilterExample.js b/src/components/Filter/__mocks__/mockFilterExample.js
index f8a371fdc0c..72169ce4d2c 100644
--- a/src/components/Filter/__mocks__/mockFilterExample.js
+++ b/src/components/Filter/__mocks__/mockFilterExample.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import { Filter, Toolbar } from '../../../index';
+import { bindMethods } from '../../../common/helpers';
 
-const bindMethods = (context, methods) => {
-  methods.forEach(method => {
-    context[method] = context[method].bind(context);
-  });
-};
 export const mockFilterExampleFields = [
   {
     id: 'name',
@@ -124,11 +120,20 @@ export class MockFilterExample extends React.Component {
   selectFilterType(filterType) {
     const { currentFilterType } = this.state;
     if (currentFilterType !== filterType) {
-      this.setState({ currentValue: '', currentFilterType: filterType });
-
-      if (filterType.filterType === 'complex-select') {
-        this.setState({ filterCategory: undefined, categoryValue: '' });
-      }
+      this.setState(prevState => {
+        return {
+          currentValue: '',
+          currentFilterType: filterType,
+          filterCategory:
+            filterType.filterType === 'complex-select'
+              ? undefined
+              : prevState.filterCategory,
+          categoryValue:
+            filterType.filterType === 'complex-select'
+              ? ''
+              : prevState.categoryValue
+        };
+      });
     }
   }
 
@@ -146,7 +151,7 @@ export class MockFilterExample extends React.Component {
   filterCategorySelected(category) {
     const { filterCategory } = this.state;
     if (filterCategory !== category) {
-      this.setState({ filterCategory: category, categoryValue: '' });
+      this.setState({ filterCategory: category, currentValue: '' });
     }
   }
 
@@ -207,6 +212,7 @@ export class MockFilterExample extends React.Component {
       return (
         <Filter.ValueSelector
           filterValues={currentFilterType.filterValues}
+          placeholder={currentFilterType.placeholder}
           currentValue={currentValue}
           onFilterValueSelected={this.filterValueSelected}
         />
@@ -259,16 +265,17 @@ export class MockFilterExample extends React.Component {
         {activeFilters &&
           activeFilters.length > 0 && (
             <Toolbar.Results>
-              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.ActiveLabel>{'Active Filters:'}</Filter.ActiveLabel>
               <Filter.List>
                 {activeFilters.map((item, index) => {
                   return (
                     <Filter.Item
-                      label={item.label}
                       key={index}
                       onRemove={this.removeFilter}
                       filterData={item}
-                    />
+                    >
+                      {item.label}
+                    </Filter.Item>
                   );
                 })}
               </Filter.List>
@@ -291,12 +298,8 @@ export class MockFilterExample extends React.Component {
 export const mockFilterExampleSource = `
 import React from 'react';
 import { Filter, Toolbar } from '../../../index';
+import { bindMethods } from '../../../common/helpers';
 
-const bindMethods = (context, methods) => {
-  methods.forEach(method => {
-    context[method] = context[method].bind(context);
-  });
-};
 export const mockFilterExampleFields = [
   {
     id: 'name',
@@ -415,11 +418,20 @@ export class MockFilterExample extends React.Component {
   selectFilterType(filterType) {
     const { currentFilterType } = this.state;
     if (currentFilterType !== filterType) {
-      this.setState({ currentValue: '', currentFilterType: filterType });
-
-      if (filterType.filterType === 'complex-select') {
-        this.setState({ filterCategory: undefined, categoryValue: '' });
-      }
+      this.setState(prevState => {
+        return {
+          currentValue: '',
+          currentFilterType: filterType,
+          filterCategory:
+            filterType.filterType === 'complex-select'
+              ? undefined
+              : prevState.filterCategory,
+          categoryValue:
+            filterType.filterType === 'complex-select'
+              ? ''
+              : prevState.categoryValue
+        };
+      });
     }
   }
 
@@ -437,7 +449,7 @@ export class MockFilterExample extends React.Component {
   filterCategorySelected(category) {
     const { filterCategory } = this.state;
     if (filterCategory !== category) {
-      this.setState({ filterCategory: category, categoryValue: '' });
+      this.setState({ filterCategory: category, currentValue: '' });
     }
   }
 
@@ -498,6 +510,7 @@ export class MockFilterExample extends React.Component {
       return (
         <Filter.ValueSelector
           filterValues={currentFilterType.filterValues}
+          placeholder={currentFilterType.placeholder}
           currentValue={currentValue}
           onFilterValueSelected={this.filterValueSelected}
         />
@@ -550,16 +563,17 @@ export class MockFilterExample extends React.Component {
         {activeFilters &&
           activeFilters.length > 0 && (
             <Toolbar.Results>
-              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.ActiveLabel>{'Active Filters:'}</Filter.ActiveLabel>
               <Filter.List>
                 {activeFilters.map((item, index) => {
                   return (
                     <Filter.Item
-                      label={item.label}
                       key={index}
                       onRemove={this.removeFilter}
                       filterData={item}
-                    />
+                    >
+                      {item.label}
+                    </Filter.Item>
                   );
                 })}
               </Filter.List>
diff --git a/src/components/Filter/__snapshots__/Filter.test.js.snap b/src/components/Filter/__snapshots__/Filter.test.js.snap
index ca4f68e36bb..0d693961233 100644
--- a/src/components/Filter/__snapshots__/Filter.test.js.snap
+++ b/src/components/Filter/__snapshots__/Filter.test.js.snap
@@ -9,19 +9,17 @@ exports[`Filter active components render properly 1`] = `
   >
     <p
       className="filter-pf-active-label"
-    >
-      Active Filters:
-    </p>
+    />
     <ul
       className="list-inline"
     >
       <li
         className=""
+        label="Name: John"
       >
         <span
           className="label label-info"
         >
-          Name: John
           <a
             href="#"
             onClick={[Function]}
@@ -40,11 +38,11 @@ exports[`Filter active components render properly 1`] = `
       </li>
       <li
         className=""
+        label="Address: Westford"
       >
         <span
           className="label label-info"
         >
-          Address: Westford
           <a
             href="#"
             onClick={[Function]}
diff --git a/src/components/Sort/__mocks__/mockSortExample.js b/src/components/Sort/__mocks__/mockSortExample.js
index 6f8ef0edb21..971a6c3e2ce 100644
--- a/src/components/Sort/__mocks__/mockSortExample.js
+++ b/src/components/Sort/__mocks__/mockSortExample.js
@@ -1,11 +1,6 @@
 import React from 'react';
 import { Sort, Toolbar } from '../../../index';
-
-const bindMethods = (context, methods) => {
-  methods.forEach(method => {
-    context[method] = context[method].bind(context);
-  });
-};
+import { bindMethods } from '../../../common/helpers';
 
 export const mockSortFields = [
   {
@@ -79,10 +74,11 @@ export class MockSortExample extends React.Component {
   }
 
   toggleCurrentSortDirection() {
-    const { isSortAscending } = this.state;
-
-    this.setState({ isSortAscending: !isSortAscending });
+    this.setState(prevState => {
+      return { isSortAscending: !prevState.isSortAscending };
+    });
   }
+
   render() {
     const { currentSortType, isSortNumeric, isSortAscending } = this.state;
 
@@ -106,13 +102,9 @@ export class MockSortExample extends React.Component {
 }
 
 export const mockSortExampleSource = `
+import React from 'react';
 import { Sort, Toolbar } from '../../../index';
-
-const bindMethods = (context, methods) => {
-  methods.forEach(method => {
-    context[method] = context[method].bind(context);
-  });
-};
+import { bindMethods } from '../../../common/helpers';
 
 export const mockSortFields = [
   {
@@ -186,10 +178,11 @@ export class MockSortExample extends React.Component {
   }
 
   toggleCurrentSortDirection() {
-    const { isSortAscending } = this.state;
-
-    this.setState({ isSortAscending: !isSortAscending });
+    this.setState(prevState => {
+      return { isSortAscending: !prevState.isSortAscending };
+    });
   }
+
   render() {
     const { currentSortType, isSortNumeric, isSortAscending } = this.state;
 
diff --git a/src/components/Toolbar/ToolbarFind.js b/src/components/Toolbar/ToolbarFind.js
index 14c79dbbf2d..dba541f4e1e 100644
--- a/src/components/Toolbar/ToolbarFind.js
+++ b/src/components/Toolbar/ToolbarFind.js
@@ -23,8 +23,9 @@ export class ToolbarFind extends React.Component {
   }
 
   toggleDropdownShown() {
-    const { dropdownShown } = this.state;
-    this.setState({ dropdownShown: !dropdownShown });
+    this.setState(prevState => {
+      return { dropdownShown: !prevState.dropdownShown };
+    });
   }
 
   hideDropdown() {
diff --git a/src/components/Toolbar/__mocks__/mockToolbarExample.js b/src/components/Toolbar/__mocks__/mockToolbarExample.js
index ee6e22e2289..fea26c3ec90 100644
--- a/src/components/Toolbar/__mocks__/mockToolbarExample.js
+++ b/src/components/Toolbar/__mocks__/mockToolbarExample.js
@@ -9,16 +9,11 @@ import {
   Sort,
   Toolbar
 } from '../../../index';
+import { bindMethods } from '../../../common/helpers';
 
 import { mockFilterExampleFields } from '../../Filter/__mocks__/mockFilterExample';
 import { mockSortFields } from '../../Sort/__mocks__/mockSortExample';
 
-const bindMethods = (context, methods) => {
-  methods.forEach(method => {
-    context[method] = context[method].bind(context);
-  });
-};
-
 export class MockToolbarExample extends React.Component {
   constructor() {
     super();
@@ -304,16 +299,17 @@ export class MockToolbarExample extends React.Component {
           activeFilters.length > 0 && (
             <Toolbar.Results>
               <h5>40 Results</h5>
-              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.ActiveLabel>{'Active Filters:'}</Filter.ActiveLabel>
               <Filter.List>
                 {activeFilters.map((item, index) => {
                   return (
                     <Filter.Item
-                      label={item.label}
                       key={index}
                       onRemove={this.removeFilter}
                       filterData={item}
-                    />
+                    >
+                      label={item.label}
+                    </Filter.Item>
                   );
                 })}
               </Filter.List>
@@ -345,16 +341,11 @@ import {
   Sort,
   Toolbar
 } from '../../../index';
+import { bindMethods } from '../../../common/helpers';
 
 import { mockFilterExampleFields } from '../../Filter/__mocks__/mockFilterExample';
 import { mockSortFields } from '../../Sort/__mocks__/mockSortExample';
 
-const bindMethods = (context, methods) => {
-  methods.forEach(method => {
-    context[method] = context[method].bind(context);
-  });
-};
-
 export class MockToolbarExample extends React.Component {
   constructor() {
     super();
@@ -640,16 +631,17 @@ export class MockToolbarExample extends React.Component {
           activeFilters.length > 0 && (
             <Toolbar.Results>
               <h5>40 Results</h5>
-              <Filter.ActiveLabel title={'Active Filters:'} />
+              <Filter.ActiveLabel>{'Active Filters:'}</Filter.ActiveLabel>
               <Filter.List>
                 {activeFilters.map((item, index) => {
                   return (
                     <Filter.Item
-                      label={item.label}
                       key={index}
                       onRemove={this.removeFilter}
                       filterData={item}
-                    />
+                    >
+                      label={item.label}
+                    </Filter.Item>
                   );
                 })}
               </Filter.List>
diff --git a/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap b/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
index 381ca365545..23ff193b2c2 100644
--- a/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
+++ b/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
@@ -435,19 +435,17 @@ exports[`Toolbar renders properly 1`] = `
           </h5>
           <p
             className="filter-pf-active-label"
-          >
-            Active Filters:
-          </p>
+          />
           <ul
             className="list-inline"
           >
             <li
               className=""
+              label="Name: John"
             >
               <span
                 className="label label-info"
               >
-                Name: John
                 <a
                   href="#"
                   onClick={[Function]}
@@ -466,11 +464,11 @@ exports[`Toolbar renders properly 1`] = `
             </li>
             <li
               className=""
+              label="Address: Westford"
             >
               <span
                 className="label label-info"
               >
-                Address: Westford
                 <a
                   href="#"
                   onClick={[Function]}

From 175e3efb4b60fb26b8336ffd8d0de3d9cb6fd1d9 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Tue, 9 Jan 2018 13:39:37 -0500
Subject: [PATCH 4/5] More updates per review comments

---
 src/components/Filter/Filter.test.js          | 10 +++----
 .../Filter/__mocks__/mockFilterExample.js     | 10 +++----
 .../Filter/__snapshots__/Filter.test.js.snap  |  2 ++
 src/components/Toolbar/Toolbar.stories.js     |  8 ++++-
 src/components/Toolbar/Toolbar.test.js        |  5 ++--
 src/components/Toolbar/ToolbarFind.js         | 11 ++++---
 src/components/Toolbar/ToolbarRightContent.js |  6 +++-
 src/components/Toolbar/ToolbarViewSelector.js |  6 +++-
 .../Toolbar/__mocks__/mockToolbarExample.js   | 30 ++++++++++++++++---
 .../__snapshots__/Toolbar.test.js.snap        |  1 +
 10 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/src/components/Filter/Filter.test.js b/src/components/Filter/Filter.test.js
index 3bd30ef6780..774c81bd1ed 100644
--- a/src/components/Filter/Filter.test.js
+++ b/src/components/Filter/Filter.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Filter, Toolbar } from '../../index';
+import { Filter, FormControl, Toolbar } from '../../index';
 import { mockFilterExampleFields } from './__mocks__/mockFilterExample';
 
 test('Filter input renders properly', () => {
@@ -10,9 +10,9 @@ test('Filter input renders properly', () => {
         filterTypes={mockFilterExampleFields}
         currentFilterType={mockFilterExampleFields[0]}
       />
-      <input
-        className="form-control"
+      <FormControl
         type={mockFilterExampleFields[0].filterType}
+        id="filterInput"
         value=""
         placeholder="Filter by Name"
       />
@@ -78,9 +78,9 @@ test('Filter renders properly in a Toolbar', () => {
           filterTypes={mockFilterExampleFields}
           currentFilterType={mockFilterExampleFields[0]}
         />
-        <input
-          className="form-control"
+        <FormControl
           type={mockFilterExampleFields[0].filterType}
+          id="filterInput"
           value=""
           placeholder="Filter by Name"
         />
diff --git a/src/components/Filter/__mocks__/mockFilterExample.js b/src/components/Filter/__mocks__/mockFilterExample.js
index 72169ce4d2c..fe607d50a8f 100644
--- a/src/components/Filter/__mocks__/mockFilterExample.js
+++ b/src/components/Filter/__mocks__/mockFilterExample.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Filter, Toolbar } from '../../../index';
+import { Filter, FormControl, Toolbar } from '../../../index';
 import { bindMethods } from '../../../common/helpers';
 
 export const mockFilterExampleFields = [
@@ -235,8 +235,7 @@ export class MockFilterExample extends React.Component {
       );
     } else {
       return (
-        <input
-          className="form-control"
+        <FormControl
           type={currentFilterType.filterType}
           value={currentValue}
           placeholder={currentFilterType.placeholder}
@@ -297,7 +296,7 @@ export class MockFilterExample extends React.Component {
 
 export const mockFilterExampleSource = `
 import React from 'react';
-import { Filter, Toolbar } from '../../../index';
+import { Filter, FormControl, Toolbar } from '../../../index';
 import { bindMethods } from '../../../common/helpers';
 
 export const mockFilterExampleFields = [
@@ -533,8 +532,7 @@ export class MockFilterExample extends React.Component {
       );
     } else {
       return (
-        <input
-          className="form-control"
+        <FormControl
           type={currentFilterType.filterType}
           value={currentValue}
           placeholder={currentFilterType.placeholder}
diff --git a/src/components/Filter/__snapshots__/Filter.test.js.snap b/src/components/Filter/__snapshots__/Filter.test.js.snap
index 0d693961233..ce8ddff5510 100644
--- a/src/components/Filter/__snapshots__/Filter.test.js.snap
+++ b/src/components/Filter/__snapshots__/Filter.test.js.snap
@@ -446,6 +446,7 @@ exports[`Filter input renders properly 1`] = `
       </div>
       <input
         className="form-control"
+        id="filterInput"
         placeholder="Filter by Name"
         type="text"
         value=""
@@ -570,6 +571,7 @@ exports[`Filter renders properly in a Toolbar 1`] = `
               </div>
               <input
                 className="form-control"
+                id="filterInput"
                 placeholder="Filter by Name"
                 type="text"
                 value=""
diff --git a/src/components/Toolbar/Toolbar.stories.js b/src/components/Toolbar/Toolbar.stories.js
index c572227f7b0..c5603391b0e 100644
--- a/src/components/Toolbar/Toolbar.stories.js
+++ b/src/components/Toolbar/Toolbar.stories.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { decorateAction } from '@storybook/addon-actions';
 import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
 import {
   Toolbar,
@@ -44,5 +45,10 @@ stories.add(
         <pre>{mockToolbarExampleSource}</pre>
       </div>
     )
-  })(() => <MockToolbarExample />)
+  })(() => {
+    const filterChanged = decorateAction([args => args]);
+    return (
+      <MockToolbarExample onFiltersChanged={filterChanged('filterChanged')} />
+    );
+  })
 );
diff --git a/src/components/Toolbar/Toolbar.test.js b/src/components/Toolbar/Toolbar.test.js
index cfd91738a82..cea703c0c0d 100644
--- a/src/components/Toolbar/Toolbar.test.js
+++ b/src/components/Toolbar/Toolbar.test.js
@@ -4,6 +4,7 @@ import {
   Button,
   DropdownKebab,
   Filter,
+  FormControl,
   Icon,
   MenuItem,
   Sort,
@@ -21,9 +22,9 @@ test('Toolbar renders properly', () => {
           filterTypes={mockFilterExampleFields}
           currentFilterType={mockFilterExampleFields[0]}
         />
-        <input
-          className="form-control"
+        <FormControl
           type={mockFilterExampleFields[0].filterType}
+          id="filterInput"
           placeholder="Filter by Name"
         />
       </Filter>
diff --git a/src/components/Toolbar/ToolbarFind.js b/src/components/Toolbar/ToolbarFind.js
index dba541f4e1e..702ea81685a 100644
--- a/src/components/Toolbar/ToolbarFind.js
+++ b/src/components/Toolbar/ToolbarFind.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Icon } from '../../index';
+import { Button, Icon, FormControl } from '../../index';
 import { bindMethods } from '../../common/helpers';
 
 export class ToolbarFind extends React.Component {
@@ -75,13 +75,13 @@ export class ToolbarFind extends React.Component {
 
     if (currentValue && currentValue !== '') {
       return [
-        <span className="find-pf-nums">
+        <span className="find-pf-nums" key="findCountText">
           {currentIndex || 0} of {totalCount}
         </span>,
-        <Button bsStyle="link">
+        <Button bsStyle="link" key="findPrevious">
           <Icon type="fa" name="angle-up" />
         </Button>,
-        <Button bsStyle="link">
+        <Button bsStyle="link" key="findNext">
           <Icon type="fa" name="angle-down" />
         </Button>
       ];
@@ -110,9 +110,8 @@ export class ToolbarFind extends React.Component {
           <Icon type="fa" name="search" />
         </Button>
         <div className={dropdownClasses}>
-          <input
+          <FormControl
             type="text"
-            className="form-control"
             id="find"
             value={currentValue}
             placeholder={placeholder}
diff --git a/src/components/Toolbar/ToolbarRightContent.js b/src/components/Toolbar/ToolbarRightContent.js
index a29b13069a1..c33a29e571d 100644
--- a/src/components/Toolbar/ToolbarRightContent.js
+++ b/src/components/Toolbar/ToolbarRightContent.js
@@ -4,7 +4,11 @@ import cx from 'classnames';
 
 const ToolbarRightContent = ({ children, className, ...rest }) => {
   const classes = cx('toolbar-pf-action-right', className);
-  return <div className={classes}>{children}</div>;
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
 };
 
 ToolbarRightContent.propTypes = {
diff --git a/src/components/Toolbar/ToolbarViewSelector.js b/src/components/Toolbar/ToolbarViewSelector.js
index 0cb6af45b5e..42cd1f34d63 100644
--- a/src/components/Toolbar/ToolbarViewSelector.js
+++ b/src/components/Toolbar/ToolbarViewSelector.js
@@ -4,7 +4,11 @@ import cx from 'classnames';
 
 const ToolbarViewSelector = ({ children, className, ...rest }) => {
   const classes = cx('form-group toolbar-pf-view-selector', className);
-  return <div className={classes}>{children}</div>;
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
 };
 
 ToolbarViewSelector.propTypes = {
diff --git a/src/components/Toolbar/__mocks__/mockToolbarExample.js b/src/components/Toolbar/__mocks__/mockToolbarExample.js
index fea26c3ec90..14f77dc6816 100644
--- a/src/components/Toolbar/__mocks__/mockToolbarExample.js
+++ b/src/components/Toolbar/__mocks__/mockToolbarExample.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import {
   Button,
   DropdownKebab,
   Filter,
+  FormControl,
   Icon,
   MenuItem,
   Sort,
@@ -43,6 +45,7 @@ export class MockToolbarExample extends React.Component {
   }
 
   filterAdded = (field, value) => {
+    const { onFiltersChanged } = this.props;
     let filterText = '';
     if (field.title) {
       filterText = field.title;
@@ -64,6 +67,7 @@ export class MockToolbarExample extends React.Component {
 
     let activeFilters = [...this.state.activeFilters, { label: filterText }];
     this.setState({ activeFilters: activeFilters });
+    onFiltersChanged && onFiltersChanged('Filter Added: ' + filterText);
   };
 
   selectFilterType(filterType) {
@@ -126,6 +130,7 @@ export class MockToolbarExample extends React.Component {
   }
 
   removeFilter(filter) {
+    const { onFiltersChanged } = this.props;
     const { activeFilters } = this.state;
 
     let index = activeFilters.indexOf(filter);
@@ -136,10 +141,13 @@ export class MockToolbarExample extends React.Component {
       ];
       this.setState({ activeFilters: updated });
     }
+    onFiltersChanged && onFiltersChanged('Filter Removed: ' + filter.label);
   }
 
   clearFilters() {
+    const { onFiltersChanged } = this.props;
     this.setState({ activeFilters: [] });
+    onFiltersChanged && onFiltersChanged('Filters cleared.');
   }
 
   updateCurrentSortType(sortType) {
@@ -195,8 +203,7 @@ export class MockToolbarExample extends React.Component {
       );
     } else {
       return (
-        <input
-          className="form-control"
+        <FormControl
           type={currentFilterType.filterType}
           value={currentValue}
           placeholder={currentFilterType.placeholder}
@@ -329,13 +336,19 @@ export class MockToolbarExample extends React.Component {
   }
 }
 
+MockToolbarExample.propTypes = {
+  onFiltersChanged: PropTypes.func
+};
+
 export const mockToolbarExampleSource = `
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import {
   Button,
   DropdownKebab,
   Filter,
+  FormControl,
   Icon,
   MenuItem,
   Sort,
@@ -375,6 +388,7 @@ export class MockToolbarExample extends React.Component {
   }
 
   filterAdded = (field, value) => {
+    const { onFiltersChanged } = this.props;
     let filterText = '';
     if (field.title) {
       filterText = field.title;
@@ -396,6 +410,7 @@ export class MockToolbarExample extends React.Component {
 
     let activeFilters = [...this.state.activeFilters, { label: filterText }];
     this.setState({ activeFilters: activeFilters });
+    onFiltersChanged && onFiltersChanged('Filter Added: ' + filterText);
   };
 
   selectFilterType(filterType) {
@@ -458,6 +473,7 @@ export class MockToolbarExample extends React.Component {
   }
 
   removeFilter(filter) {
+    const { onFiltersChanged } = this.props;
     const { activeFilters } = this.state;
 
     let index = activeFilters.indexOf(filter);
@@ -468,10 +484,13 @@ export class MockToolbarExample extends React.Component {
       ];
       this.setState({ activeFilters: updated });
     }
+    onFiltersChanged && onFiltersChanged('Filter Removed: ' + filter.label);
   }
 
   clearFilters() {
+    const { onFiltersChanged } = this.props;
     this.setState({ activeFilters: [] });
+    onFiltersChanged && onFiltersChanged('Filters cleared.');
   }
 
   updateCurrentSortType(sortType) {
@@ -527,8 +546,7 @@ export class MockToolbarExample extends React.Component {
       );
     } else {
       return (
-        <input
-          className="form-control"
+        <FormControl
           type={currentFilterType.filterType}
           value={currentValue}
           placeholder={currentFilterType.placeholder}
@@ -660,4 +678,8 @@ export class MockToolbarExample extends React.Component {
     );
   }
 }
+
+MockToolbarExample.propTypes = {
+  onFiltersChanged: PropTypes.func
+};
 `;
diff --git a/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap b/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
index 23ff193b2c2..d0e3b9e2d3c 100644
--- a/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
+++ b/src/components/Toolbar/__snapshots__/Toolbar.test.js.snap
@@ -115,6 +115,7 @@ exports[`Toolbar renders properly 1`] = `
               </div>
               <input
                 className="form-control"
+                id="filterInput"
                 placeholder="Filter by Name"
                 type="text"
               />

From 6f48c8d30aad897555473f7333efa6be7216a311 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Tue, 9 Jan 2018 14:15:21 -0500
Subject: [PATCH 5/5] Add more action logging for toolbar

---
 src/components/Toolbar/Toolbar.stories.js     |  10 +-
 src/components/Toolbar/ToolbarFind.js         |   8 +-
 .../Toolbar/__mocks__/mockToolbarExample.js   | 150 ++++++++++++++++--
 3 files changed, 150 insertions(+), 18 deletions(-)

diff --git a/src/components/Toolbar/Toolbar.stories.js b/src/components/Toolbar/Toolbar.stories.js
index c5603391b0e..4703eeb92bf 100644
--- a/src/components/Toolbar/Toolbar.stories.js
+++ b/src/components/Toolbar/Toolbar.stories.js
@@ -46,9 +46,15 @@ stories.add(
       </div>
     )
   })(() => {
-    const filterChanged = decorateAction([args => args]);
+    const logAction = decorateAction([args => args]);
     return (
-      <MockToolbarExample onFiltersChanged={filterChanged('filterChanged')} />
+      <MockToolbarExample
+        onFiltersChanged={logAction('filterChanged')}
+        onSortChanged={logAction('sortChanged')}
+        onViewChanged={logAction('viewChanged')}
+        onActionPerformed={logAction('actionPerformed')}
+        onFindAction={logAction('findAction')}
+      />
     );
   })
 );
diff --git a/src/components/Toolbar/ToolbarFind.js b/src/components/Toolbar/ToolbarFind.js
index 702ea81685a..a22e44a5157 100644
--- a/src/components/Toolbar/ToolbarFind.js
+++ b/src/components/Toolbar/ToolbarFind.js
@@ -78,10 +78,14 @@ export class ToolbarFind extends React.Component {
         <span className="find-pf-nums" key="findCountText">
           {currentIndex || 0} of {totalCount}
         </span>,
-        <Button bsStyle="link" key="findPrevious">
+        <Button
+          bsStyle="link"
+          key="findPrevious"
+          onClick={this.handleFindPrevious}
+        >
           <Icon type="fa" name="angle-up" />
         </Button>,
-        <Button bsStyle="link" key="findNext">
+        <Button bsStyle="link" key="findNext" onClick={this.handleFindNext}>
           <Icon type="fa" name="angle-down" />
         </Button>
       ];
diff --git a/src/components/Toolbar/__mocks__/mockToolbarExample.js b/src/components/Toolbar/__mocks__/mockToolbarExample.js
index 14f77dc6816..5c1e634554a 100644
--- a/src/components/Toolbar/__mocks__/mockToolbarExample.js
+++ b/src/components/Toolbar/__mocks__/mockToolbarExample.js
@@ -152,6 +152,8 @@ export class MockToolbarExample extends React.Component {
 
   updateCurrentSortType(sortType) {
     const { currentSortType } = this.state;
+    const { onSortChanged } = this.props;
+
     if (currentSortType !== sortType) {
       this.setState({
         currentSortType: sortType,
@@ -159,16 +161,21 @@ export class MockToolbarExample extends React.Component {
         isSortAscending: true
       });
     }
+    onSortChanged && onSortChanged('sort type: ' + sortType.title);
   }
 
   toggleCurrentSortDirection() {
     const { isSortAscending } = this.state;
+    const { onSortChanged } = this.props;
 
     this.setState({ isSortAscending: !isSortAscending });
+    onSortChanged && onSortChanged('sort ascending: ' + !isSortAscending);
   }
 
   setViewType(viewType) {
+    const { onViewChanged } = this.props;
     this.setState({ currentViewType: viewType });
+    onViewChanged && onViewChanged(viewType);
   }
 
   renderInput() {
@@ -224,6 +231,8 @@ export class MockToolbarExample extends React.Component {
       currentViewType
     } = this.state;
 
+    const { onActionPerformed, onFindAction } = this.props;
+
     return (
       <Toolbar>
         <Filter>
@@ -247,14 +256,53 @@ export class MockToolbarExample extends React.Component {
           />
         </Sort>
         <div className="form-group">
-          <Button>Action 1</Button>
-          <Button>Action 2</Button>
+          <Button
+            onClick={() => {
+              onActionPerformed && onActionPerformed('Action: Action 1');
+            }}
+          >
+            Action 1
+          </Button>
+          <Button
+            onClick={() => {
+              onActionPerformed && onActionPerformed('Action: Action 2');
+            }}
+          >
+            Action 2
+          </Button>
           <DropdownKebab id="toolbarActionKebab">
-            <MenuItem>Action</MenuItem>
-            <MenuItem>Another Action</MenuItem>
-            <MenuItem>Something Else Here</MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed && onActionPerformed('Action: Action');
+              }}
+            >
+              Action
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed &&
+                  onActionPerformed('Action: Another Action');
+              }}
+            >
+              Another Action
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed &&
+                  onActionPerformed('Action: Something Else Here');
+              }}
+            >
+              Something Else Here
+            </MenuItem>
             <MenuItem role="separator" className="divider" />
-            <MenuItem>Separated Link</MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed &&
+                  onActionPerformed('Action: Separated Link');
+              }}
+            >
+              Separated Link
+            </MenuItem>
           </DropdownKebab>
         </div>
         <Toolbar.RightContent>
@@ -262,6 +310,16 @@ export class MockToolbarExample extends React.Component {
             placeholder="Find By Keyword..."
             currentIndex={1}
             totalCount={3}
+            onChange={value => onFindAction && onFindAction('Find: ' + value)}
+            onEnter={value =>
+              onFindAction && onFindAction('Find again: ' + value)
+            }
+            onFindNext={value =>
+              onFindAction && onFindAction('Find Next: ' + value)
+            }
+            onFindPrevious={value =>
+              onFindAction && onFindAction('Find Previous: ' + value)
+            }
           />
           <Toolbar.ViewSelector>
             <Button
@@ -337,7 +395,11 @@ export class MockToolbarExample extends React.Component {
 }
 
 MockToolbarExample.propTypes = {
-  onFiltersChanged: PropTypes.func
+  onFiltersChanged: PropTypes.func,
+  onSortChanged: PropTypes.func,
+  onViewChanged: PropTypes.func,
+  onActionPerformed: PropTypes.func,
+  onFindAction: PropTypes.func
 };
 
 export const mockToolbarExampleSource = `
@@ -495,6 +557,8 @@ export class MockToolbarExample extends React.Component {
 
   updateCurrentSortType(sortType) {
     const { currentSortType } = this.state;
+    const { onSortChanged } = this.props;
+
     if (currentSortType !== sortType) {
       this.setState({
         currentSortType: sortType,
@@ -502,16 +566,21 @@ export class MockToolbarExample extends React.Component {
         isSortAscending: true
       });
     }
+    onSortChanged && onSortChanged('sort type: ' + sortType.title);
   }
 
   toggleCurrentSortDirection() {
     const { isSortAscending } = this.state;
+    const { onSortChanged } = this.props;
 
     this.setState({ isSortAscending: !isSortAscending });
+    onSortChanged && onSortChanged('sort ascending: ' + !isSortAscending);
   }
 
   setViewType(viewType) {
+    const { onViewChanged } = this.props;
     this.setState({ currentViewType: viewType });
+    onViewChanged && onViewChanged(viewType);
   }
 
   renderInput() {
@@ -567,6 +636,8 @@ export class MockToolbarExample extends React.Component {
       currentViewType
     } = this.state;
 
+    const { onActionPerformed, onFindAction } = this.props;
+
     return (
       <Toolbar>
         <Filter>
@@ -590,14 +661,53 @@ export class MockToolbarExample extends React.Component {
           />
         </Sort>
         <div className="form-group">
-          <Button>Action 1</Button>
-          <Button>Action 2</Button>
+          <Button
+            onClick={() => {
+              onActionPerformed && onActionPerformed('Action: Action 1');
+            }}
+          >
+            Action 1
+          </Button>
+          <Button
+            onClick={() => {
+              onActionPerformed && onActionPerformed('Action: Action 2');
+            }}
+          >
+            Action 2
+          </Button>
           <DropdownKebab id="toolbarActionKebab">
-            <MenuItem>Action</MenuItem>
-            <MenuItem>Another Action</MenuItem>
-            <MenuItem>Something Else Here</MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed && onActionPerformed('Action: Action');
+              }}
+            >
+              Action
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed &&
+                  onActionPerformed('Action: Another Action');
+              }}
+            >
+              Another Action
+            </MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed &&
+                  onActionPerformed('Action: Something Else Here');
+              }}
+            >
+              Something Else Here
+            </MenuItem>
             <MenuItem role="separator" className="divider" />
-            <MenuItem>Separated Link</MenuItem>
+            <MenuItem
+              onClick={() => {
+                onActionPerformed &&
+                  onActionPerformed('Action: Separated Link');
+              }}
+            >
+              Separated Link
+            </MenuItem>
           </DropdownKebab>
         </div>
         <Toolbar.RightContent>
@@ -605,6 +715,14 @@ export class MockToolbarExample extends React.Component {
             placeholder="Find By Keyword..."
             currentIndex={1}
             totalCount={3}
+            onChange={value => onFindAction && onFindAction('Find: ' + value)}
+            onEnter={value => onFindAction && onFindAction('Find again: ' + value)}
+            onFindNext={value =>
+              onFindAction && onFindAction('Find Next: ' + value)
+            }
+            onFindPrevious={value =>
+              onFindAction && onFindAction('Find Previous: ' + value)
+            }
           />
           <Toolbar.ViewSelector>
             <Button
@@ -680,6 +798,10 @@ export class MockToolbarExample extends React.Component {
 }
 
 MockToolbarExample.propTypes = {
-  onFiltersChanged: PropTypes.func
+  onFiltersChanged: PropTypes.func,
+  onSortChanged: PropTypes.func,
+  onViewChanged: PropTypes.func,
+  onActionPerformed: PropTypes.func,
+  onFindAction: PropTypes.func
 };
 `;