From e84a6718ed1fc1a3acd9ac347b1779670562b787 Mon Sep 17 00:00:00 2001
From: Chris Hale <chris.hale@me.com>
Date: Mon, 19 Mar 2018 15:05:49 -0600
Subject: [PATCH] refactor(classNames): Updated how classNames package is
 referenced

Made it consistent across the project how classNames package is imported and used by all components

Fix #230
---
 CONTRIBUTING.md                               |  1 +
 .../AboutModal/AboutModalVersions.js          |  4 +-
 src/components/Alert/Alert.js                 |  4 +-
 src/components/Breadcrumb/Breadcrumb.js       |  4 +-
 src/components/DropdownKebab/DropdownKebab.js |  4 +-
 src/components/EmptyState/EmptyState.js       |  4 +-
 src/components/EmptyState/EmptyStateAction.js |  4 +-
 src/components/EmptyState/EmptyStateHelp.js   |  4 +-
 src/components/EmptyState/EmptyStateIcon.js   |  4 +-
 src/components/EmptyState/EmptyStateInfo.js   |  4 +-
 src/components/EmptyState/EmptyStateTitle.js  |  4 +-
 src/components/Filter/Filter.js               |  4 +-
 src/components/Filter/FilterActiveLabel.js    |  4 +-
 .../Filter/FilterCategorySelector.js          |  4 +-
 .../Filter/FilterCategoryValueSelector.js     |  4 +-
 src/components/Filter/FilterItem.js           |  4 +-
 src/components/Filter/FilterList.js           |  4 +-
 src/components/Filter/FilterTypeSelector.js   |  4 +-
 src/components/Filter/FilterValueSelector.js  |  4 +-
 .../Icon/InnerComponents/PatternflyIcon.js    |  4 +-
 src/components/InfoTip/InfoTipMenu.js         |  4 +-
 src/components/Label/RemoveButton.js          |  4 +-
 src/components/ListView/ListView.js           |  7 +++-
 src/components/ListView/ListView.stories.js   |  6 +--
 src/components/ListView/ListViewCheckbox.js   |  6 ++-
 src/components/ListView/ListViewExpand.js     |  6 +--
 src/components/ListView/ListViewGroupItem.js  |  4 +-
 .../ListView/ListViewGroupItemContainer.js    |  4 +-
 src/components/ListView/ListViewIcon.js       |  4 +-
 src/components/ListView/ListViewInfoItem.js   |  4 +-
 .../__mocks__/mockCompoundExpansionExample.js | 10 ++---
 .../ListView/__mocks__/mockListItems.js       |  6 +--
 src/components/Modal/ModalCloseButton.js      |  4 +-
 src/components/Pagination/PaginationRow.js    |  4 +-
 .../Pagination/PaginationRowBack.js           |  4 +-
 .../Pagination/PaginationRowButtonGroup.js    |  7 +++-
 .../Pagination/PaginationRowForward.js        |  4 +-
 src/components/Sort/Sort.js                   |  4 +-
 src/components/Spinner/Spinner.js             |  4 +-
 src/components/Table/TableActions.js          |  4 +-
 src/components/Table/TableButton.js           |  4 +-
 src/components/Table/TableCell.js             |  4 +-
 src/components/Table/TableHeading.js          |  6 +--
 src/components/Table/TablePfProvider.js       |  4 +-
 src/components/Table/TableSelectionCell.js    |  4 +-
 src/components/Table/TableSelectionHeading.js |  4 +-
 .../__mocks__/mockClientPaginationTable.js    |  8 ++--
 .../__mocks__/mockServerPaginationTable.js    |  8 ++--
 src/components/Tabs/Tabs.stories.js           | 12 +++---
 .../ToastNotification/ToastNotification.js    |  4 +-
 .../ToastNotificationList.js                  |  4 +-
 src/components/Toolbar/ToolbarFind.js         |  6 +--
 src/components/Toolbar/ToolbarResults.js      |  4 +-
 src/components/Toolbar/ToolbarRightContent.js |  4 +-
 src/components/Toolbar/ToolbarViewSelector.js |  4 +-
 src/components/TreeView/TreeView.js           |  4 +-
 src/components/TreeView/TreeViewExpand.js     |  4 +-
 src/components/TreeView/TreeViewIcon.js       |  4 +-
 src/components/TreeView/TreeViewNode.js       |  4 +-
 src/components/UtilizationBar/helpers.js      |  6 +--
 src/components/VerticalNav/VerticalNav.js     | 39 ++++++++++---------
 .../VerticalNav/VerticalNav.stories.js        |  4 +-
 .../VerticalNav/VerticalNavBadge.js           |  4 +-
 .../VerticalNav/VerticalNavItemHelper.js      | 11 ++++--
 src/components/Wizard/WizardBody.js           |  4 +-
 src/components/Wizard/WizardContents.js       |  4 +-
 src/components/Wizard/WizardFooter.js         |  4 +-
 src/components/Wizard/WizardHeader.js         |  4 +-
 src/components/Wizard/WizardMain.js           |  4 +-
 src/components/Wizard/WizardReviewContent.js  |  4 +-
 src/components/Wizard/WizardReviewItem.js     |  4 +-
 src/components/Wizard/WizardReviewSteps.js    |  4 +-
 src/components/Wizard/WizardReviewSubSteps.js |  4 +-
 src/components/Wizard/WizardRow.js            |  4 +-
 src/components/Wizard/WizardSidebar.js        |  4 +-
 src/components/Wizard/WizardSidebarGroup.js   |  7 +++-
 .../Wizard/WizardSidebarGroupItem.js          |  4 +-
 src/components/Wizard/WizardStep.js           |  4 +-
 src/components/Wizard/WizardSteps.js          |  4 +-
 src/components/Wizard/WizardSubStep.js        |  4 +-
 80 files changed, 211 insertions(+), 193 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2d6aedcf78b..cb3c5edf68f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -141,6 +141,7 @@ when possible and accept [props](https://facebook.github.io/react/docs/component
   * Provide a storybook with your component named on the parent component with a `.stories.js` suffix (e.g., `ListGroup.stories.js`)
   * When your stories contain multiple files, put them in a subfolder named `Stories`
   * `src/**/*.stories.js` and `src/**/Stories/` are excluded from the package build output
+* When writing a component and you want to use the classnames package, be sure to import and name it `classNames`. For example - ` import classNames from 'classnames' `
 * Exporting components from other libraries (without manipulating them)
   to consumers is a common task, use:
   ```js
diff --git a/src/components/AboutModal/AboutModalVersions.js b/src/components/AboutModal/AboutModalVersions.js
index 4e938c9ebc3..337db5cd89b 100644
--- a/src/components/AboutModal/AboutModalVersions.js
+++ b/src/components/AboutModal/AboutModalVersions.js
@@ -1,9 +1,9 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const AboutModalVersions = ({ children, className, ...rest }) => {
-  const classes = cx('product-versions-pf', className);
+  const classes = classNames('product-versions-pf', className);
 
   return (
     <div className={classes} {...rest}>
diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js
index 853089ed25a..f0a32016343 100644
--- a/src/components/Alert/Alert.js
+++ b/src/components/Alert/Alert.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '../Button';
@@ -16,7 +16,7 @@ import {
 const Alert = ({ children, className, onDismiss, type, ...props }) => {
   warnIfDeprecatedType(type);
 
-  const alertClass = ClassNames('alert', className, getClassName(type), {
+  const alertClass = classNames('alert', className, getClassName(type), {
     'alert-dismissable': onDismiss
   });
 
diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js
index e205b0d51df..99650d6de54 100644
--- a/src/components/Breadcrumb/Breadcrumb.js
+++ b/src/components/Breadcrumb/Breadcrumb.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Breadcrumb as BsBreadcrumb } from 'react-bootstrap';
 
 const Breadcrumb = ({ title, ...props }) => {
-  const breadcrumbClass = cx({
+  const breadcrumbClass = classNames({
     'breadcrumbs-pf-title': title
   });
   return <BsBreadcrumb className={breadcrumbClass} {...props} />;
diff --git a/src/components/DropdownKebab/DropdownKebab.js b/src/components/DropdownKebab/DropdownKebab.js
index 3fa14cf1613..de114ff98b8 100644
--- a/src/components/DropdownKebab/DropdownKebab.js
+++ b/src/components/DropdownKebab/DropdownKebab.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
@@ -16,7 +16,7 @@ const DropdownKebab = ({
   componentClass,
   toggleStyle
 }) => {
-  const kebabClass = ClassNames('dropdown-kebab-pf', className);
+  const kebabClass = classNames('dropdown-kebab-pf', className);
   return (
     <Dropdown
       className={kebabClass}
diff --git a/src/components/EmptyState/EmptyState.js b/src/components/EmptyState/EmptyState.js
index 4dc8d00c44c..fb0136cc364 100644
--- a/src/components/EmptyState/EmptyState.js
+++ b/src/components/EmptyState/EmptyState.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * Empty State Component for Patternfly React
  */
 const EmptyState = ({ children, className, ...props }) => {
-  const classes = ClassNames('blank-slate-pf', className);
+  const classes = classNames('blank-slate-pf', className);
 
   return (
     <div className={classes} {...props}>
diff --git a/src/components/EmptyState/EmptyStateAction.js b/src/components/EmptyState/EmptyStateAction.js
index 5ac9104914d..f0d471b549d 100644
--- a/src/components/EmptyState/EmptyStateAction.js
+++ b/src/components/EmptyState/EmptyStateAction.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * EmptyStateAction renders contents of the element
  */
 const EmptyStateAction = ({ children, className, secondary, ...props }) => {
-  const classes = ClassNames(
+  const classes = classNames(
     {
       'blank-slate-pf-main-action': !secondary,
       'blank-slate-pf-secondary-action': secondary
diff --git a/src/components/EmptyState/EmptyStateHelp.js b/src/components/EmptyState/EmptyStateHelp.js
index 575fc2d7876..ea56880d641 100644
--- a/src/components/EmptyState/EmptyStateHelp.js
+++ b/src/components/EmptyState/EmptyStateHelp.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * EmptyStateHelp renders contents of the element
  */
 const EmptyStateHelp = ({ children, className, ...props }) => {
-  const classes = ClassNames('blank-slate-pf-helpLink', className);
+  const classes = classNames('blank-slate-pf-helpLink', className);
 
   return (
     <p className={classes} {...props}>
diff --git a/src/components/EmptyState/EmptyStateIcon.js b/src/components/EmptyState/EmptyStateIcon.js
index 943fa7fecd1..7e0e647f5fb 100644
--- a/src/components/EmptyState/EmptyStateIcon.js
+++ b/src/components/EmptyState/EmptyStateIcon.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
@@ -7,7 +7,7 @@ import { Icon } from '../Icon';
  * EmptyStateIcon renders element
  */
 const EmptyStateIcon = ({ className, type, name, ...props }) => {
-  const classes = ClassNames('blank-slate-pf-icon', className);
+  const classes = classNames('blank-slate-pf-icon', className);
 
   return (
     <div className={classes}>
diff --git a/src/components/EmptyState/EmptyStateInfo.js b/src/components/EmptyState/EmptyStateInfo.js
index 88407e77ef6..ecea8a1a374 100644
--- a/src/components/EmptyState/EmptyStateInfo.js
+++ b/src/components/EmptyState/EmptyStateInfo.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * EmptyStateInfo renders contents of the element
  */
 const EmptyStateInfo = ({ children, className, ...props }) => {
-  const classes = ClassNames('blank-slate-pf-info', className);
+  const classes = classNames('blank-slate-pf-info', className);
 
   return (
     <p className={classes} {...props}>
diff --git a/src/components/EmptyState/EmptyStateTitle.js b/src/components/EmptyState/EmptyStateTitle.js
index 636bef3935b..36f0eaf90f6 100644
--- a/src/components/EmptyState/EmptyStateTitle.js
+++ b/src/components/EmptyState/EmptyStateTitle.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * EmptyStateTitle renders contents of the element
  */
 const EmptyStateTitle = ({ children, className, ...props }) => {
-  const classes = ClassNames('h1', 'blank-slate-pf-title', className);
+  const classes = classNames('h1', 'blank-slate-pf-title', className);
   return (
     <h4 className={classes} {...props}>
       {children}
diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
index 5014fd84af3..2f3749100b1 100644
--- a/src/components/Filter/Filter.js
+++ b/src/components/Filter/Filter.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getContext } from 'recompose';
@@ -7,7 +7,7 @@ import { toolbarContextTypes } from '../Toolbar/ToolbarConstants';
 // Disabled eslint due to `isDescendantOfToolbar` being a context property we don't want passed by consumers
 // eslint-disable-next-line react/prop-types
 const Filter = ({ children, className, isDescendantOfToolbar, ...rest }) => {
-  const classes = cx(
+  const classes = classNames(
     {
       'filter-pf form-group': true,
       'toolbar-pf-filter': isDescendantOfToolbar
diff --git a/src/components/Filter/FilterActiveLabel.js b/src/components/Filter/FilterActiveLabel.js
index f6c5a511879..cac7bf117f2 100644
--- a/src/components/Filter/FilterActiveLabel.js
+++ b/src/components/Filter/FilterActiveLabel.js
@@ -1,9 +1,9 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const FilterActiveLabel = ({ children, className, ...rest }) => {
-  const classes = cx('filter-pf-active-label', className);
+  const classes = classNames('filter-pf-active-label', className);
   return <p className={classes}>{children}</p>;
 };
 
diff --git a/src/components/Filter/FilterCategorySelector.js b/src/components/Filter/FilterCategorySelector.js
index 1ec0e3c21b6..d38c6e8121d 100644
--- a/src/components/Filter/FilterCategorySelector.js
+++ b/src/components/Filter/FilterCategorySelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -15,7 +15,7 @@ const FilterCategorySelector = ({
   onFilterCategorySelected,
   ...rest
 }) => {
-  const classes = cx('filter-pf-category-select', className);
+  const classes = classNames('filter-pf-category-select', className);
 
   if (placeholder || (filterCategories && filterCategories.length > 1)) {
     let title;
diff --git a/src/components/Filter/FilterCategoryValueSelector.js b/src/components/Filter/FilterCategoryValueSelector.js
index b1f4b4183de..762cc78773a 100644
--- a/src/components/Filter/FilterCategoryValueSelector.js
+++ b/src/components/Filter/FilterCategoryValueSelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -14,7 +14,7 @@ const FilterCategoryValueSelector = ({
   onCategoryValueSelected,
   ...rest
 }) => {
-  const classes = cx('filter-pf-select', className);
+  const classes = classNames('filter-pf-select', className);
 
   if (placeholder || (categoryValues && categoryValues.length > 1)) {
     let title;
diff --git a/src/components/Filter/FilterItem.js b/src/components/Filter/FilterItem.js
index e86b1143304..0bd69131d88 100644
--- a/src/components/Filter/FilterItem.js
+++ b/src/components/Filter/FilterItem.js
@@ -1,11 +1,11 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noop } from '../../common/helpers';
 import { DisposableLabel } from '../Label';
 
 const FilterItem = ({ children, className, onRemove, filterData, ...rest }) => {
-  const classes = ClassNames(className);
+  const classes = classNames(className);
 
   return (
     <li className={classes} {...rest}>
diff --git a/src/components/Filter/FilterList.js b/src/components/Filter/FilterList.js
index 881f187a304..9acc511c51a 100644
--- a/src/components/Filter/FilterList.js
+++ b/src/components/Filter/FilterList.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ const FilterList = ({ children, className, ...rest }) => {
   if (!children) {
     return null;
   }
-  const classes = cx('list-inline', className);
+  const classes = classNames('list-inline', className);
   return <ul className={classes}>{children}</ul>;
 };
 
diff --git a/src/components/Filter/FilterTypeSelector.js b/src/components/Filter/FilterTypeSelector.js
index 636d012b2e0..5a7dfdbb322 100644
--- a/src/components/Filter/FilterTypeSelector.js
+++ b/src/components/Filter/FilterTypeSelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -14,7 +14,7 @@ const FilterTypeSelector = ({
   onFilterTypeSelected,
   ...rest
 }) => {
-  const classes = cx('input-group-btn', className);
+  const classes = classNames('input-group-btn', className);
   if (placeholder || (filterTypes && filterTypes.length > 1)) {
     let title;
     if (currentFilterType) {
diff --git a/src/components/Filter/FilterValueSelector.js b/src/components/Filter/FilterValueSelector.js
index 1cc35d4bae9..0d5ab4f1468 100644
--- a/src/components/Filter/FilterValueSelector.js
+++ b/src/components/Filter/FilterValueSelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -14,7 +14,7 @@ const FilterValueSelector = ({
   onFilterValueSelected,
   ...rest
 }) => {
-  const classes = cx('filter-pf-select', className);
+  const classes = classNames('filter-pf-select', className);
 
   if (placeholder || (filterValues && filterValues.length > 1)) {
     let title;
diff --git a/src/components/Icon/InnerComponents/PatternflyIcon.js b/src/components/Icon/InnerComponents/PatternflyIcon.js
index fb780f0c703..72f9be3133d 100644
--- a/src/components/Icon/InnerComponents/PatternflyIcon.js
+++ b/src/components/Icon/InnerComponents/PatternflyIcon.js
@@ -1,11 +1,11 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const PatternflyIcon = ({ name, className, ...props }) => (
   <span
     aria-hidden="true"
-    className={cx('pficon', `pficon-${name}`, className)}
+    className={classNames('pficon', `pficon-${name}`, className)}
     {...props}
   />
 );
diff --git a/src/components/InfoTip/InfoTipMenu.js b/src/components/InfoTip/InfoTipMenu.js
index be0803c816a..2f8a4ce4368 100644
--- a/src/components/InfoTip/InfoTipMenu.js
+++ b/src/components/InfoTip/InfoTipMenu.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 // eslint-disable-next-line react/prefer-stateless-function
@@ -16,7 +16,7 @@ class InfoTipMenu extends React.Component {
       ...props
     } = this.props;
 
-    const infoTipMenuClass = ClassNames(
+    const infoTipMenuClass = classNames(
       'dropdown-menu',
       'infotip',
       'bottom-right',
diff --git a/src/components/Label/RemoveButton.js b/src/components/Label/RemoveButton.js
index dd153a1b284..fd20d1a0b33 100644
--- a/src/components/Label/RemoveButton.js
+++ b/src/components/Label/RemoveButton.js
@@ -1,10 +1,10 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noop } from '../../common/helpers';
 
 const RemoveButton = ({ className, title, onRemoveClick, ...rest }) => {
-  const classes = ClassNames('pficon pficon-close', className);
+  const classes = classNames('pficon pficon-close', className);
 
   return (
     <a
diff --git a/src/components/ListView/ListView.js b/src/components/ListView/ListView.js
index 4b6226569bf..cb6e6b46e6b 100644
--- a/src/components/ListView/ListView.js
+++ b/src/components/ListView/ListView.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -56,7 +56,10 @@ import PropTypes from 'prop-types';
  * ListView component wraps ListViewItems
  */
 const ListView = ({ children, className, ...rest }) => {
-  const classes = cx('list-group list-view-pf list-view-pf-view', className);
+  const classes = classNames(
+    'list-group list-view-pf list-view-pf-view',
+    className
+  );
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/ListView/ListView.stories.js b/src/components/ListView/ListView.stories.js
index 27d04dc112f..bf3e551d464 100644
--- a/src/components/ListView/ListView.stories.js
+++ b/src/components/ListView/ListView.stories.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
@@ -37,7 +37,7 @@ const renderActions = () => (
 const renderAdditionalInfoItems = itemProperties =>
   itemProperties &&
   Object.keys(itemProperties).map(prop => {
-    const classNames = cx('pficon', {
+    const cssClassNames = classNames('pficon', {
       'pficon-flavor': prop === 'hosts',
       'pficon-cluster': prop === 'clusters',
       'pficon-container-node': prop === 'nodes',
@@ -45,7 +45,7 @@ const renderAdditionalInfoItems = itemProperties =>
     });
     return (
       <ListView.InfoItem key={prop}>
-        <span className={classNames} />
+        <span className={cssClassNames} />
         <strong>{itemProperties[prop]}</strong> {prop}
       </ListView.InfoItem>
     );
diff --git a/src/components/ListView/ListViewCheckbox.js b/src/components/ListView/ListViewCheckbox.js
index 1dc03c935ed..5ebe030d24f 100644
--- a/src/components/ListView/ListViewCheckbox.js
+++ b/src/components/ListView/ListViewCheckbox.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -8,7 +8,9 @@ import PropTypes from 'prop-types';
  * in case of redux-form)
  */
 const ListViewCheckbox = ({ children, className }) => (
-  <div className={cx('list-view-pf-checkbox', className)}>{children}</div>
+  <div className={classNames('list-view-pf-checkbox', className)}>
+    {children}
+  </div>
 );
 
 ListViewCheckbox.propTypes = {
diff --git a/src/components/ListView/ListViewExpand.js b/src/components/ListView/ListViewExpand.js
index beeedab867e..e5ee5aa0ce6 100644
--- a/src/components/ListView/ListViewExpand.js
+++ b/src/components/ListView/ListViewExpand.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -7,13 +7,13 @@ import PropTypes from 'prop-types';
  * The caret icon points to the right when it is closed and down when it is expanded.
  */
 const ListViewExpand = ({ children, expanded, toggleExpanded }) => {
-  const classes = cx({
+  const classes = classNames({
     'fa fa-angle-right': true,
     'fa-angle-down': expanded
   });
   return (
     <div
-      className={cx('list-view-pf-expand', { active: expanded })}
+      className={classNames('list-view-pf-expand', { active: expanded })}
       onClick={e => {
         e.stopPropagation();
         toggleExpanded();
diff --git a/src/components/ListView/ListViewGroupItem.js b/src/components/ListView/ListViewGroupItem.js
index d9c1c7cc165..94f70fdc732 100644
--- a/src/components/ListView/ListViewGroupItem.js
+++ b/src/components/ListView/ListViewGroupItem.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -12,7 +12,7 @@ const ListViewGroupItem = ({
   expanded,
   ...rest
 }) => {
-  const classes = cx(
+  const classes = classNames(
     'list-group-item',
     {
       'list-view-pf-expand-active': expanded,
diff --git a/src/components/ListView/ListViewGroupItemContainer.js b/src/components/ListView/ListViewGroupItemContainer.js
index d36f083c19c..5afc7bb4606 100644
--- a/src/components/ListView/ListViewGroupItemContainer.js
+++ b/src/components/ListView/ListViewGroupItemContainer.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noop } from '../../common/helpers';
@@ -8,7 +8,7 @@ import { noop } from '../../common/helpers';
  * expanded content
  */
 const ListViewGroupItemContainer = ({ children, expanded, onClose }) => {
-  const classes = cx({
+  const classes = classNames({
     'list-group-item-container container-fluid': true,
     hidden: !expanded
   });
diff --git a/src/components/ListView/ListViewIcon.js b/src/components/ListView/ListViewIcon.js
index 3cbc5a292b2..5b0ca796c4f 100644
--- a/src/components/ListView/ListViewIcon.js
+++ b/src/components/ListView/ListViewIcon.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
@@ -10,7 +10,7 @@ const ListViewIcon = ({ type, name, className, size, ...props }) => (
   <Icon
     type={type}
     name={name}
-    className={cx(`list-view-pf-icon-${size}`, className)}
+    className={classNames(`list-view-pf-icon-${size}`, className)}
     {...props}
   />
 );
diff --git a/src/components/ListView/ListViewInfoItem.js b/src/components/ListView/ListViewInfoItem.js
index e88952f8a4c..0a06e32e63c 100644
--- a/src/components/ListView/ListViewInfoItem.js
+++ b/src/components/ListView/ListViewInfoItem.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * ListViewInfoItem renders contents of individual Info item
  */
 const ListViewInfoItem = ({ children, className, stacked, ...rest }) => {
-  const classes = cx(
+  const classes = classNames(
     { 'list-view-pf-additional-info-item-stacked': stacked },
     'list-view-pf-additional-info-item',
     className
diff --git a/src/components/ListView/__mocks__/mockCompoundExpansionExample.js b/src/components/ListView/__mocks__/mockCompoundExpansionExample.js
index ad449b11af2..d93bec08fa9 100644
--- a/src/components/ListView/__mocks__/mockCompoundExpansionExample.js
+++ b/src/components/ListView/__mocks__/mockCompoundExpansionExample.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { boolean } from '@storybook/addon-knobs/dist/index';
 import { bindMethods } from '../../../common/helpers';
 import { mockListItems } from './mockListItems';
@@ -42,7 +42,7 @@ export class MockCompoundExpansion extends React.Component {
     return (
       item.properties &&
       Object.keys(item.properties).map(prop => {
-        const classNames = cx('pficon', {
+        const cssClassNames = classNames('pficon', {
           'pficon-flavor': prop === 'hosts',
           'pficon-cluster': prop === 'clusters',
           'pficon-container-node': prop === 'nodes',
@@ -56,7 +56,7 @@ export class MockCompoundExpansion extends React.Component {
                 this.toggleExpand(item, prop);
               }}
             >
-              <span className={classNames} />
+              <span className={cssClassNames} />
               <strong>{item.properties[prop]}</strong> {prop}
             </ListView.Expand>
           </ListView.InfoItem>
@@ -100,7 +100,7 @@ import { bindMethods } from '../../../common/helpers';
 
 import { mockListItems } from './mockListItems';
 import { boolean } from '@storybook/addon-knobs/dist/index';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 import { Button, Grid, ListView } from '../../../index';
 
@@ -145,7 +145,7 @@ export class MockCompoundExpansion extends React.Component {
     return (
       item.properties &&
       Object.keys(item.properties).map(prop => {
-        const classNames = cx('pficon', {
+        const classNames = classNames('pficon', {
           'pficon-flavor': prop === 'hosts',
           'pficon-cluster': prop === 'clusters',
           'pficon-container-node': prop === 'nodes',
diff --git a/src/components/ListView/__mocks__/mockListItems.js b/src/components/ListView/__mocks__/mockListItems.js
index 234153ce577..8652bdbd295 100644
--- a/src/components/ListView/__mocks__/mockListItems.js
+++ b/src/components/ListView/__mocks__/mockListItems.js
@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 
 import { Button } from '../../Button';
@@ -88,7 +88,7 @@ export const renderActions = () => (
 export const renderAdditionalInfoItems = itemProperties =>
   itemProperties &&
   Object.keys(itemProperties).map(prop => {
-    const classNames = cx('pficon', {
+    const cssClassNames = classNames('pficon', {
       'pficon-flavor': prop === 'hosts',
       'pficon-cluster': prop === 'clusters',
       'pficon-container-node': prop === 'nodes',
@@ -96,7 +96,7 @@ export const renderAdditionalInfoItems = itemProperties =>
     });
     return (
       <ListView.InfoItem key={prop}>
-        <span className={classNames} />
+        <span className={cssClassNames} />
         <strong>{itemProperties[prop]}</strong> {prop}
       </ListView.InfoItem>
     );
diff --git a/src/components/Modal/ModalCloseButton.js b/src/components/Modal/ModalCloseButton.js
index 3cc8164c9a4..33b9e80c729 100644
--- a/src/components/Modal/ModalCloseButton.js
+++ b/src/components/Modal/ModalCloseButton.js
@@ -1,10 +1,10 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../../index';
 
 const ModalCloseButton = ({ className, closeText, ...rest }) => (
-  <button className={cx(`close`, className)} {...rest}>
+  <button className={classNames(`close`, className)} {...rest}>
     <Icon type="pf" name="close" aria-hidden="true" title={closeText} />
     <span className="sr-only">{closeText}</span>
   </button>
diff --git a/src/components/Pagination/PaginationRow.js b/src/components/Pagination/PaginationRow.js
index ebbd9407436..cb9a2b7c8fd 100644
--- a/src/components/Pagination/PaginationRow.js
+++ b/src/components/Pagination/PaginationRow.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PaginationRowAmountOfPages from './PaginationRowAmountOfPages';
 import PaginationRowButtonGroup from './PaginationRowButtonGroup';
 import PaginationRowItems from './PaginationRowItems';
@@ -37,7 +37,7 @@ const PaginationRow = ({
   onLastPage
 }) => {
   const { page, perPage, perPageOptions = [] } = pagination;
-  const classes = cx(baseClassName, className, {
+  const classes = classNames(baseClassName, className, {
     'list-view-pf-pagination': viewType === PAGINATION_VIEW.LIST,
     'card-view-pf-pagination': viewType === PAGINATION_VIEW.CARD,
     'table-view-pf-pagination': viewType === PAGINATION_VIEW.TABLE,
diff --git a/src/components/Pagination/PaginationRowBack.js b/src/components/Pagination/PaginationRowBack.js
index 115eeba882c..980559e3575 100644
--- a/src/components/Pagination/PaginationRowBack.js
+++ b/src/components/Pagination/PaginationRowBack.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PaginationRowArrowIcon from './PaginationRowArrowIcon';
 import { noop } from '../../common/helpers';
 
@@ -16,7 +16,7 @@ const PaginationRowBack = ({
   onPreviousPage,
   ...props
 }) => {
-  const classes = cx('pagination', 'pagination-pf-back', className);
+  const classes = classNames('pagination', 'pagination-pf-back', className);
   return (
     <ul className={classes} {...props}>
       <li className={page === 1 ? 'disabled' : ''}>
diff --git a/src/components/Pagination/PaginationRowButtonGroup.js b/src/components/Pagination/PaginationRowButtonGroup.js
index 574b69d55f9..e2c41ef01b6 100644
--- a/src/components/Pagination/PaginationRowButtonGroup.js
+++ b/src/components/Pagination/PaginationRowButtonGroup.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { ButtonGroup } from '../Button';
 
 const PaginationRowButtonGroup = ({ className, ...props }) => (
-  <ButtonGroup {...props} className={cx(className, 'pagination-pf-pagesize')} />
+  <ButtonGroup
+    {...props}
+    className={classNames(className, 'pagination-pf-pagesize')}
+  />
 );
 PaginationRowButtonGroup.propTypes = {
   /** additional classes */
diff --git a/src/components/Pagination/PaginationRowForward.js b/src/components/Pagination/PaginationRowForward.js
index 8f4f23e0202..8b07030a60d 100644
--- a/src/components/Pagination/PaginationRowForward.js
+++ b/src/components/Pagination/PaginationRowForward.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PaginationRowArrowIcon from './PaginationRowArrowIcon';
 import { noop } from '../../common/helpers';
 
@@ -17,7 +17,7 @@ const PaginationRowForward = ({
   onLastPage,
   ...props
 }) => {
-  const classes = cx('pagination', 'pagination-pf-forward', className);
+  const classes = classNames('pagination', 'pagination-pf-forward', className);
   return (
     <ul className={classes}>
       <li className={page === amountOfPages ? 'disabled' : ''}>
diff --git a/src/components/Sort/Sort.js b/src/components/Sort/Sort.js
index 49527e03784..b45f45f9b85 100644
--- a/src/components/Sort/Sort.js
+++ b/src/components/Sort/Sort.js
@@ -1,9 +1,9 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const Sort = ({ children, className, ...rest }) => {
-  const classes = cx('form-group', className);
+  const classes = classNames('form-group', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/Spinner/Spinner.js b/src/components/Spinner/Spinner.js
index 90c3de37f05..996a56f7052 100644
--- a/src/components/Spinner/Spinner.js
+++ b/src/components/Spinner/Spinner.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 const Spinner = ({
   loading,
@@ -12,7 +12,7 @@ const Spinner = ({
   ...props
 }) => {
   if (loading) {
-    const classes = cx(className, 'spinner', `spinner-${size}`, {
+    const classes = classNames(className, 'spinner', `spinner-${size}`, {
       'spinner-inline': inline,
       'spinner-inverse': inverse
     });
diff --git a/src/components/Table/TableActions.js b/src/components/Table/TableActions.js
index ccb367583b9..bd5b88e0e40 100644
--- a/src/components/Table/TableActions.js
+++ b/src/components/Table/TableActions.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * TableActions component for Patternfly React
  */
 const TableActions = ({ children, className, ...props }) => {
-  const classes = cx('table-view-pf-actions', className);
+  const classes = classNames('table-view-pf-actions', className);
   return (
     <td className={classes} {...props}>
       {children}
diff --git a/src/components/Table/TableButton.js b/src/components/Table/TableButton.js
index 2578df015e3..57382cb0e67 100644
--- a/src/components/Table/TableButton.js
+++ b/src/components/Table/TableButton.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { Button } from '../Button';
 import { noop } from '../../common/helpers';
 
@@ -8,7 +8,7 @@ import { noop } from '../../common/helpers';
  * TableButton component for Patternfly React
  */
 const TableButton = ({ children, className, onClick, ...props }) => {
-  const classes = cx('table-view-pf-btn', className);
+  const classes = classNames('table-view-pf-btn', className);
   return (
     <div className={classes} {...props}>
       <Button onClick={onClick}>{children}</Button>
diff --git a/src/components/Table/TableCell.js b/src/components/Table/TableCell.js
index 67bdf1c2cc1..4e3a03dfd9c 100644
--- a/src/components/Table/TableCell.js
+++ b/src/components/Table/TableCell.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { TABLE_ALIGN, TABLE_ALIGNMENT_TYPES } from './TableConstants';
 /**
  * TableCell component for Patternfly React
  */
 const TableCell = ({ children, className, align, ...props }) => {
-  const classes = cx(
+  const classes = classNames(
     {
       'text-right': align === TABLE_ALIGN.RIGHT,
       'text-center': align === TABLE_ALIGN.CENTER
diff --git a/src/components/Table/TableHeading.js b/src/components/Table/TableHeading.js
index 35937ccfe61..ad362dac353 100644
--- a/src/components/Table/TableHeading.js
+++ b/src/components/Table/TableHeading.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import {
   TABLE_ALIGN,
   TABLE_ALIGNMENT_TYPES,
@@ -19,11 +19,11 @@ const TableHeading = ({
   sortDirection,
   ...props
 }) => {
-  const sortingClass = cx({
+  const sortingClass = classNames({
     sorting_asc: sortDirection === TABLE_SORT_DIRECTION.ASC,
     sorting_desc: sortDirection === TABLE_SORT_DIRECTION.DESC
   });
-  const classes = cx(
+  const classes = classNames(
     {
       'text-right': align === TABLE_ALIGN.RIGHT,
       'text-center': align === TABLE_ALIGN.CENTER
diff --git a/src/components/Table/TablePfProvider.js b/src/components/Table/TablePfProvider.js
index 988a3b0cc4c..7dd46c56bc9 100644
--- a/src/components/Table/TablePfProvider.js
+++ b/src/components/Table/TablePfProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { Table } from './index';
 /**
  * TablePfProvider component for Patternfly React
@@ -22,7 +22,7 @@ const TablePfProvider = ({
     { header: { cell: headerCell }, body: { cell: tableCell } },
     components
   );
-  const classes = cx(
+  const classes = classNames(
     {
       table: true,
       dataTable,
diff --git a/src/components/Table/TableSelectionCell.js b/src/components/Table/TableSelectionCell.js
index 292b7e6e551..0dde31a3aa6 100644
--- a/src/components/Table/TableSelectionCell.js
+++ b/src/components/Table/TableSelectionCell.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * TableSelectionCell component for Patternfly React
  */
 const TableSelectionCell = ({ children, className, ...props }) => {
-  const classes = cx('table-view-pf-select', className);
+  const classes = classNames('table-view-pf-select', className);
   return (
     <td className={classes} {...props}>
       {children}
diff --git a/src/components/Table/TableSelectionHeading.js b/src/components/Table/TableSelectionHeading.js
index 23a04a3927b..682aeda4e63 100644
--- a/src/components/Table/TableSelectionHeading.js
+++ b/src/components/Table/TableSelectionHeading.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * TableSelectionHeading component for Patternfly React
  */
 const TableSelectionHeading = ({ children, className, ...props }) => {
-  const classes = cx('table-view-pf-select', className);
+  const classes = classNames('table-view-pf-select', className);
   return (
     <th className={classes} {...props}>
       {children}
diff --git a/src/components/Table/__mocks__/mockClientPaginationTable.js b/src/components/Table/__mocks__/mockClientPaginationTable.js
index 4ebe58f0e8f..e7eec076f3f 100644
--- a/src/components/Table/__mocks__/mockClientPaginationTable.js
+++ b/src/components/Table/__mocks__/mockClientPaginationTable.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import orderBy from 'lodash.orderby';
-import cx from 'classnames';
+import classNames from 'classnames';
 import * as sort from 'sortabular';
 import * as resolve from 'table-resolver';
 import { compose } from 'recompose';
@@ -305,7 +305,7 @@ export class MockClientPaginationTable extends React.Component {
     const { selectedRows } = this.state;
     const selected = selectedRows.indexOf(row.id) > -1;
     return {
-      className: cx({ selected }),
+      className: classNames({ selected }),
       role: 'row'
     };
   }
@@ -464,7 +464,7 @@ export const mockClientPaginationTableSource = `
 import React from 'react';
 import PropTypes from 'prop-types';
 import orderBy from 'lodash.orderby';
-import cx from 'classnames';
+import classNames from 'classnames';
 import * as sort from 'sortabular';
 import * as resolve from 'table-resolver';
 import { bindMethods } from '../../../common/helpers';
@@ -859,7 +859,7 @@ export class MockClientPaginationTable extends React.Component {
     const { selectedRows } = this.state;
     const selected = selectedRows.indexOf(row.id) > -1;
     return {
-      className: cx({ selected: selected }),
+      className: classNames({ selected: selected }),
       role: 'row'
     };
   }
diff --git a/src/components/Table/__mocks__/mockServerPaginationTable.js b/src/components/Table/__mocks__/mockServerPaginationTable.js
index 7e04b23bcb0..20a4783fe7b 100644
--- a/src/components/Table/__mocks__/mockServerPaginationTable.js
+++ b/src/components/Table/__mocks__/mockServerPaginationTable.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import * as resolve from 'table-resolver';
 import { bindMethods } from '../../../common/helpers';
 import {
@@ -21,7 +21,7 @@ import MockServerApi from './mockServerApi';
 export class MockServerPaginationTable extends React.Component {
   static onRow(row, { rowIndex }) {
     return {
-      className: cx({ selected: row.selected }),
+      className: classNames({ selected: row.selected }),
       role: 'row'
     };
   }
@@ -345,7 +345,7 @@ MockServerPaginationTable.propTypes = {
 export const mockServerPaginationTableSource = `
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import * as resolve from 'table-resolver';
 import { bindMethods } from '../../../common/helpers';
 import {
@@ -366,7 +366,7 @@ import MockServerApi from './mockServerApi';
 export class MockServerPaginationTable extends React.Component {
   static onRow(row, { rowIndex }) {
     return {
-      className: cx({ selected: row.selected }),
+      className: classNames({ selected: row.selected }),
       role: 'row'
     };
   }
diff --git a/src/components/Tabs/Tabs.stories.js b/src/components/Tabs/Tabs.stories.js
index eaac626b46e..ea9fb94a256 100644
--- a/src/components/Tabs/Tabs.stories.js
+++ b/src/components/Tabs/Tabs.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
@@ -35,7 +35,7 @@ stories.addDecorator(
 );
 
 stories.addWithInfo('Basic Tabs', () => {
-  const bsClass = ClassNames('nav nav-tabs', {
+  const bsClass = classNames('nav nav-tabs', {
     'nav-justified': boolean('Justified', false)
   });
   const t1Disabled = boolean('Tab 1 Disabled', false);
@@ -88,7 +88,7 @@ stories.addWithInfo('Basic Tabs', () => {
 });
 
 stories.addWithInfo('Basic Tabs - PF style', () => {
-  const bsClass = ClassNames('nav nav-tabs nav-tabs-pf', {
+  const bsClass = classNames('nav nav-tabs nav-tabs-pf', {
     'nav-justified': boolean('Justified', false)
   });
   const t1Disabled = boolean('Tab 1 Disabled', false);
@@ -141,7 +141,7 @@ stories.addWithInfo('Basic Tabs - PF style', () => {
 });
 
 stories.addWithInfo('Tabs with Dropdown', () => {
-  const bsClass = ClassNames('nav nav-tabs', {
+  const bsClass = classNames('nav nav-tabs', {
     'nav-justified': boolean('Justified', false)
   });
 
@@ -178,7 +178,7 @@ stories.addWithInfo('Tabs with Dropdown', () => {
 });
 
 stories.addWithInfo('Tabs with Dropdown - PF style', () => {
-  const bsClass = ClassNames('nav nav-tabs nav-tabs-pf', {
+  const bsClass = classNames('nav nav-tabs nav-tabs-pf', {
     'nav-justified': boolean('Justified', false)
   });
 
@@ -215,7 +215,7 @@ stories.addWithInfo('Tabs with Dropdown - PF style', () => {
 });
 
 stories.addWithInfo('Secondary Tabs', () => {
-  const bsClass = ClassNames('nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary', {
+  const bsClass = classNames('nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary', {
     'nav-justified': boolean('Secondary Tabs Justified', false)
   });
 
diff --git a/src/components/ToastNotification/ToastNotification.js b/src/components/ToastNotification/ToastNotification.js
index b96df29efd9..ca432c06f6a 100644
--- a/src/components/ToastNotification/ToastNotification.js
+++ b/src/components/ToastNotification/ToastNotification.js
@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import { Alert } from '../Alert';
 
@@ -6,7 +6,7 @@ import { Alert } from '../Alert';
  * ToastNotification Component for Patternfly React
  */
 const ToastNotification = ({ children, className, ...props }) => {
-  const notificationClasses = ClassNames('toast-pf', className);
+  const notificationClasses = classNames('toast-pf', className);
 
   return (
     <Alert className={notificationClasses} {...props}>
diff --git a/src/components/ToastNotification/ToastNotificationList.js b/src/components/ToastNotification/ToastNotificationList.js
index 06f12f4e509..2056208401a 100644
--- a/src/components/ToastNotification/ToastNotificationList.js
+++ b/src/components/ToastNotification/ToastNotificationList.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { bindMethods, noop } from '../../common/helpers';
 import TimedToastNotification from './TimedToastNotification';
 
@@ -53,7 +53,7 @@ class ToastNotificationList extends React.Component {
   }
   render() {
     const { className } = this.props;
-    const classes = cx('toast-notifications-list-pf', className);
+    const classes = classNames('toast-notifications-list-pf', className);
 
     return (
       <div
diff --git a/src/components/Toolbar/ToolbarFind.js b/src/components/Toolbar/ToolbarFind.js
index a4bfe4688e4..5c48e9b0be0 100644
--- a/src/components/Toolbar/ToolbarFind.js
+++ b/src/components/Toolbar/ToolbarFind.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { Button, Icon, FormControl } from '../../index';
 import { bindMethods, noop } from '../../common/helpers';
 
@@ -95,9 +95,9 @@ class ToolbarFind extends React.Component {
     const { dropdownShown, currentValue } = this.state;
     const { className, placeholder } = this.props;
 
-    const classes = cx('form-group toolbar-pf-find', className);
+    const classes = classNames('form-group toolbar-pf-find', className);
 
-    const dropdownClasses = cx('find-pf-dropdown-container', {
+    const dropdownClasses = classNames('find-pf-dropdown-container', {
       show: dropdownShown
     });
 
diff --git a/src/components/Toolbar/ToolbarResults.js b/src/components/Toolbar/ToolbarResults.js
index 44b40f441cb..df65de138ef 100644
--- a/src/components/Toolbar/ToolbarResults.js
+++ b/src/components/Toolbar/ToolbarResults.js
@@ -1,10 +1,10 @@
-import cx from 'classnames';
+import classNames 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);
+  const classes = classNames('toolbar-pf-results', className);
   if (!children) {
     return null;
   }
diff --git a/src/components/Toolbar/ToolbarRightContent.js b/src/components/Toolbar/ToolbarRightContent.js
index c092eac64d2..c2415147a26 100644
--- a/src/components/Toolbar/ToolbarRightContent.js
+++ b/src/components/Toolbar/ToolbarRightContent.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 const ToolbarRightContent = ({ children, className, ...rest }) => {
-  const classes = cx('toolbar-pf-action-right', className);
+  const classes = classNames('toolbar-pf-action-right', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/Toolbar/ToolbarViewSelector.js b/src/components/Toolbar/ToolbarViewSelector.js
index 3bd706e5f77..1311feac73a 100644
--- a/src/components/Toolbar/ToolbarViewSelector.js
+++ b/src/components/Toolbar/ToolbarViewSelector.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 const ToolbarViewSelector = ({ children, className, ...rest }) => {
-  const classes = cx('form-group toolbar-pf-view-selector', className);
+  const classes = classNames('form-group toolbar-pf-view-selector', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/TreeView/TreeView.js b/src/components/TreeView/TreeView.js
index 08ff662c7c2..f72762d228c 100644
--- a/src/components/TreeView/TreeView.js
+++ b/src/components/TreeView/TreeView.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { noop } from '../../common/helpers';
 
 import TreeViewNode from './TreeViewNode';
@@ -11,7 +11,7 @@ const TreeView = ({
   highlightOnSelect,
   highlightOnHover
 }) => {
-  const classes = cx('list-group', {
+  const classes = classNames('list-group', {
     'treeview-pf-select': highlightOnSelect,
     'treeview-pf-hover': highlightOnHover
   });
diff --git a/src/components/TreeView/TreeViewExpand.js b/src/components/TreeView/TreeViewExpand.js
index 4358dbf0c22..a6dd2cac94a 100644
--- a/src/components/TreeView/TreeViewExpand.js
+++ b/src/components/TreeView/TreeViewExpand.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { noop } from '../../common/helpers';
 
 const TreeViewExpand = ({ nodes, expanded, toggleExpand }) => {
   const hasChildren = nodes.length > 0;
-  const classes = cx(
+  const classes = classNames(
     'icon indent',
     { 'expand-icon fa fa-angle-right': hasChildren && !expanded },
     { 'expand-icon fa fa-angle-down': hasChildren && expanded },
diff --git a/src/components/TreeView/TreeViewIcon.js b/src/components/TreeView/TreeViewIcon.js
index 13ff18d7d2e..874a213e599 100644
--- a/src/components/TreeView/TreeViewIcon.js
+++ b/src/components/TreeView/TreeViewIcon.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 const TreeViewIcon = ({ icon }) => {
-  const classes = cx('icon node-icon indent', icon);
+  const classes = classNames('icon node-icon indent', icon);
   return <span className={classes} />;
 };
 
diff --git a/src/components/TreeView/TreeViewNode.js b/src/components/TreeView/TreeViewNode.js
index 3e856b7c283..4e7d4eaa643 100644
--- a/src/components/TreeView/TreeViewNode.js
+++ b/src/components/TreeView/TreeViewNode.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { noop } from '../../common/helpers';
 import TreeViewExpand from './TreeViewExpand';
 import TreeViewIcon from './TreeViewIcon';
@@ -44,7 +44,7 @@ class TreeViewNode extends Component {
   render() {
     const { node, level, visible, selectNode } = this.props;
     const { expanded } = this.state;
-    const classes = cx('list-group-item', {
+    const classes = classNames('list-group-item', {
       'node-hidden': level > 1 ? !visible : false,
       'node-selected': node.selected
     });
diff --git a/src/components/UtilizationBar/helpers.js b/src/components/UtilizationBar/helpers.js
index e78d5fd5800..5ae6d1a0ee7 100644
--- a/src/components/UtilizationBar/helpers.js
+++ b/src/components/UtilizationBar/helpers.js
@@ -1,14 +1,14 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 
 export const labelClasses = top =>
-  ClassNames(
+  classNames(
     { 'progress-label-top-right': top, 'progress-label-right': !top },
     'pull-right',
     'display-inline-block'
   );
 
 export const mainDivClasses = (onSide, userClasses, description, label) =>
-  ClassNames(
+  classNames(
     {
       'progress-container': onSide && description,
       'progress-description-left': onSide && description,
diff --git a/src/components/VerticalNav/VerticalNav.js b/src/components/VerticalNav/VerticalNav.js
index 2dd85230234..625cabd9a96 100644
--- a/src/components/VerticalNav/VerticalNav.js
+++ b/src/components/VerticalNav/VerticalNav.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { ListGroup } from '../ListGroup';
 import VerticalNavItem from './VerticalNavItem';
 import VerticalNavMasthead from './VerticalNavMasthead';
@@ -430,26 +430,29 @@ class BaseVerticalNav extends React.Component {
         hoverDelay={hoverDelay}
         blurDelay={blurDelay}
       >
-        <nav className={cx('navbar navbar-pf-vertical')}>
+        <nav className={classNames('navbar navbar-pf-vertical')}>
           {!hideMasthead && masthead}
         </nav>
         <div
-          className={cx('nav-pf-vertical nav-pf-vertical-with-sub-menus', {
-            'nav-pf-vertical-collapsible-menus': pinnableMenus,
-            'hidden-icons-pf': hiddenIcons,
-            'nav-pf-vertical-with-badges': showBadges,
-            'nav-pf-persistent-secondary': persistentSecondary,
-            'show-mobile-secondary': showMobileSecondary,
-            'show-mobile-tertiary': showMobileTertiary,
-            'hover-secondary-nav-pf': hoverSecondaryNav,
-            'hover-tertiary-nav-pf': hoverTertiaryNav,
-            'collapsed-secondary-nav-pf': pinnedSecondaryNav,
-            'collapsed-tertiary-nav-pf': pinnedTertiaryNav,
-            hidden: isMobile,
-            collapsed: !isMobile && navCollapsed,
-            'force-hide-secondary-nav-pf': forceHidden,
-            'show-mobile-nav': showMobileNav
-          })}
+          className={classNames(
+            'nav-pf-vertical nav-pf-vertical-with-sub-menus',
+            {
+              'nav-pf-vertical-collapsible-menus': pinnableMenus,
+              'hidden-icons-pf': hiddenIcons,
+              'nav-pf-vertical-with-badges': showBadges,
+              'nav-pf-persistent-secondary': persistentSecondary,
+              'show-mobile-secondary': showMobileSecondary,
+              'show-mobile-tertiary': showMobileTertiary,
+              'hover-secondary-nav-pf': hoverSecondaryNav,
+              'hover-tertiary-nav-pf': hoverTertiaryNav,
+              'collapsed-secondary-nav-pf': pinnedSecondaryNav,
+              'collapsed-tertiary-nav-pf': pinnedTertiaryNav,
+              hidden: isMobile,
+              collapsed: !isMobile && navCollapsed,
+              'force-hide-secondary-nav-pf': forceHidden,
+              'show-mobile-nav': showMobileNav
+            }
+          )}
         >
           <ListGroup componentClass="ul">{itemComponents}</ListGroup>
         </div>
diff --git a/src/components/VerticalNav/VerticalNav.stories.js b/src/components/VerticalNav/VerticalNav.stories.js
index 499583d9816..36022607d7a 100644
--- a/src/components/VerticalNav/VerticalNav.stories.js
+++ b/src/components/VerticalNav/VerticalNav.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { withKnobs } from '@storybook/addon-knobs';
@@ -32,7 +32,7 @@ MockFixedLayout.propTypes = { children: PropTypes.node.isRequired };
 
 const mockBodyContainer = className => (
   <div
-    className={cx(
+    className={classNames(
       'container-fluid container-cards-pf container-pf-nav-pf-vertical nav-pf-persistent-secondary',
       className
     )}
diff --git a/src/components/VerticalNav/VerticalNavBadge.js b/src/components/VerticalNav/VerticalNavBadge.js
index f18f7bd2fa6..66c715a3e7d 100644
--- a/src/components/VerticalNav/VerticalNavBadge.js
+++ b/src/components/VerticalNav/VerticalNavBadge.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { OverlayTrigger, Tooltip } from '../../index';
 
 const VerticalNavBadge = props => {
   const { badgeClass, iconClass, tooltip, count } = props;
   const key = badgeClass || iconClass || count;
   const badgeDiv = (
-    <div className={cx('badge', badgeClass)}>
+    <div className={classNames('badge', badgeClass)}>
       {count && iconClass && <span className={iconClass} />}
       {count && <span>{count}</span>}
     </div>
diff --git a/src/components/VerticalNav/VerticalNavItemHelper.js b/src/components/VerticalNav/VerticalNavItemHelper.js
index ea4a693a05c..c04f1816093 100644
--- a/src/components/VerticalNav/VerticalNavItemHelper.js
+++ b/src/components/VerticalNav/VerticalNavItemHelper.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { getContext } from 'recompose';
 import { ListGroup, ListGroupItem } from '../ListGroup';
 import { OverlayTrigger } from '../OverlayTrigger';
@@ -278,13 +278,16 @@ class BaseVerticalNavItemHelper extends React.Component {
     const onPinnedPath = pinnedPath && pinnedPath.startsWith(this.idPath());
 
     const icon = iconClass && (
-      <span className={cx(iconClass, { hidden: hiddenIcons })} title={title} />
+      <span
+        className={classNames(iconClass, { hidden: hiddenIcons })}
+        title={title}
+      />
     );
 
     return (
       <ListGroupItem
         listItem // Renders as <li>. Other props can change this, see logic in react-bootstrap's ListGroupItem.
-        className={cx(
+        className={classNames(
           {
             [`${nextDepth}-nav-item-pf`]:
               depth !== 'tertiary' &&
@@ -334,7 +337,7 @@ class BaseVerticalNavItemHelper extends React.Component {
               <div className="nav-item-pf-header">
                 {(pinnableMenus || isMobile) && (
                   <a
-                    className={cx(`${nextDepth}-collapse-toggle-pf`, {
+                    className={classNames(`${nextDepth}-collapse-toggle-pf`, {
                       collapsed: onPinnedPath
                     })}
                     onClick={this.pinNextDepth}
diff --git a/src/components/Wizard/WizardBody.js b/src/components/Wizard/WizardBody.js
index 79c77b7594c..4887ce34ba4 100644
--- a/src/components/Wizard/WizardBody.js
+++ b/src/components/Wizard/WizardBody.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardBody component for Patternfly React
  */
 const WizardBody = ({ children, className, ...rest }) => {
-  const classes = cx('wizard-pf-body', className);
+  const classes = classNames('wizard-pf-body', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/Wizard/WizardContents.js b/src/components/Wizard/WizardContents.js
index 64b1b4e131e..991ed99f5bf 100644
--- a/src/components/Wizard/WizardContents.js
+++ b/src/components/Wizard/WizardContents.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardContents component for Patternfly React
@@ -14,7 +14,7 @@ const WizardContents = ({
   activeSubStepIndex,
   ...rest
 }) => {
-  const classes = cx(
+  const classes = classNames(
     'wizard-pf-contents',
     {
       // hide contents if the step is not active
diff --git a/src/components/Wizard/WizardFooter.js b/src/components/Wizard/WizardFooter.js
index f7f16f0f021..7bf6dacd899 100644
--- a/src/components/Wizard/WizardFooter.js
+++ b/src/components/Wizard/WizardFooter.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardFooter component for Patternfly React
  */
 const WizardFooter = ({ children, className, ...rest }) => {
-  const classes = cx('wizard-pf-footer', className);
+  const classes = classNames('wizard-pf-footer', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/Wizard/WizardHeader.js b/src/components/Wizard/WizardHeader.js
index 427627dcd94..e067cc841a3 100644
--- a/src/components/Wizard/WizardHeader.js
+++ b/src/components/Wizard/WizardHeader.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardHeader component for Patternfly React
  */
 const WizardHeader = ({ children, className, embedded, title, ...rest }) => {
-  const classes = cx({ 'wizard-pf-header': !embedded }, className);
+  const classes = classNames({ 'wizard-pf-header': !embedded }, className);
 
   if (embedded) {
     return (
diff --git a/src/components/Wizard/WizardMain.js b/src/components/Wizard/WizardMain.js
index 2b4485bfd30..317238063cc 100644
--- a/src/components/Wizard/WizardMain.js
+++ b/src/components/Wizard/WizardMain.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardMain component for Patternfly React
  */
 const WizardMain = ({ children, className, ...rest }) => {
-  const classes = cx('wizard-pf-main', className);
+  const classes = classNames('wizard-pf-main', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/Wizard/WizardReviewContent.js b/src/components/Wizard/WizardReviewContent.js
index d350d56fa7f..6b5967d5175 100644
--- a/src/components/Wizard/WizardReviewContent.js
+++ b/src/components/Wizard/WizardReviewContent.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardReviewContent component for Patternfly React
  */
 const WizardReviewContent = ({ children, className, collapsed, ...rest }) => {
-  const classes = cx(
+  const classes = classNames(
     'wizard-pf-review-content',
     { collapse: collapsed },
     className
diff --git a/src/components/Wizard/WizardReviewItem.js b/src/components/Wizard/WizardReviewItem.js
index 308a3d2f8d4..4549a131f58 100644
--- a/src/components/Wizard/WizardReviewItem.js
+++ b/src/components/Wizard/WizardReviewItem.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardReviewItem component for Patternfly React
  */
 const WizardReviewItem = ({ children, className, ...rest }) => {
-  const classes = cx('wizard-pf-review-item', className);
+  const classes = classNames('wizard-pf-review-item', className);
   return (
     <div className={classes} {...rest}>
       {children}
diff --git a/src/components/Wizard/WizardReviewSteps.js b/src/components/Wizard/WizardReviewSteps.js
index bab7de6d3f2..1f8ebf07774 100644
--- a/src/components/Wizard/WizardReviewSteps.js
+++ b/src/components/Wizard/WizardReviewSteps.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { ListGroup } from '../ListGroup';
 
 /**
  * WizardReviewSteps component for Patternfly React
  */
 const WizardReviewSteps = ({ children, className, ...rest }) => {
-  const classes = cx('wizard-pf-review-steps', className);
+  const classes = classNames('wizard-pf-review-steps', className);
   return (
     <div className={classes} {...rest}>
       <ListGroup componentClass="ul">{children}</ListGroup>
diff --git a/src/components/Wizard/WizardReviewSubSteps.js b/src/components/Wizard/WizardReviewSubSteps.js
index d6c45671949..ad80fc120a7 100644
--- a/src/components/Wizard/WizardReviewSubSteps.js
+++ b/src/components/Wizard/WizardReviewSubSteps.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { ListGroup } from '../ListGroup';
 
 /**
  * WizardReviewSubSteps component for Patternfly React
  */
 const WizardReviewSubSteps = ({ children, className, collapsed, ...rest }) => {
-  const classes = cx(
+  const classes = classNames(
     'wizard-pf-review-substeps',
     { collapse: collapsed },
     className
diff --git a/src/components/Wizard/WizardRow.js b/src/components/Wizard/WizardRow.js
index 72808b397e1..c760d7ade74 100644
--- a/src/components/Wizard/WizardRow.js
+++ b/src/components/Wizard/WizardRow.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardRow component for Patternfly React
  */
 const WizardRow = ({ children, className, ...rest }) => {
-  const classes = cx('wizard-pf-row', className);
+  const classes = classNames('wizard-pf-row', className);
   return (
     <section className={classes} {...rest}>
       {children}
diff --git a/src/components/Wizard/WizardSidebar.js b/src/components/Wizard/WizardSidebar.js
index 5fa9721b262..80dc032dac1 100644
--- a/src/components/Wizard/WizardSidebar.js
+++ b/src/components/Wizard/WizardSidebar.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardSidebar component for Patternfly React
  */
 const WizardSidebar = ({ items, className, ...rest }) => {
-  const classes = cx('wizard-pf-sidebar', className);
+  const classes = classNames('wizard-pf-sidebar', className);
   return (
     <div className={classes} {...rest}>
       {items}
diff --git a/src/components/Wizard/WizardSidebarGroup.js b/src/components/Wizard/WizardSidebarGroup.js
index 86158fa51b3..16c9c81a696 100644
--- a/src/components/Wizard/WizardSidebarGroup.js
+++ b/src/components/Wizard/WizardSidebarGroup.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { ListGroup } from '../ListGroup';
 
 /**
@@ -13,7 +13,10 @@ const WizardSidebarGroup = ({
   activeStep,
   ...rest
 }) => {
-  const classes = cx({ hidden: `${step}` !== `${activeStep}` }, className);
+  const classes = classNames(
+    { hidden: `${step}` !== `${activeStep}` },
+    className
+  );
   return (
     <ListGroup componentClass="ul" className={classes} {...rest}>
       {children}
diff --git a/src/components/Wizard/WizardSidebarGroupItem.js b/src/components/Wizard/WizardSidebarGroupItem.js
index 25609200623..7011bfdc678 100644
--- a/src/components/Wizard/WizardSidebarGroupItem.js
+++ b/src/components/Wizard/WizardSidebarGroupItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { ListGroupItem } from '../ListGroup';
 import { noop } from '../../common/helpers';
 
@@ -18,7 +18,7 @@ const WizardSidebarGroupItem = ({
   onClick,
   ...rest
 }) => {
-  const classes = cx(
+  const classes = classNames(
     { active: `${subStep}` === `${activeSubStep}` },
     className
   );
diff --git a/src/components/Wizard/WizardStep.js b/src/components/Wizard/WizardStep.js
index 90d69df3113..d9a23d91786 100644
--- a/src/components/Wizard/WizardStep.js
+++ b/src/components/Wizard/WizardStep.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { noop } from '../../common/helpers';
 
 /**
@@ -17,7 +17,7 @@ const WizardStep = ({
   onClick,
   ...rest
 }) => {
-  const classes = cx(
+  const classes = classNames(
     'wizard-pf-step',
     { active: `${step}` === `${activeStep}` },
     className
diff --git a/src/components/Wizard/WizardSteps.js b/src/components/Wizard/WizardSteps.js
index b7dce04fd93..bc3524e178f 100644
--- a/src/components/Wizard/WizardSteps.js
+++ b/src/components/Wizard/WizardSteps.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardSteps component for Patternfly React
  */
 const WizardSteps = ({ steps, className, ...rest }) => {
-  const classes = cx('wizard-pf-steps', className);
+  const classes = classNames('wizard-pf-steps', className);
   return (
     <div className={classes} {...rest}>
       <ul className="wizard-pf-steps-indicator">{steps}</ul>
diff --git a/src/components/Wizard/WizardSubStep.js b/src/components/Wizard/WizardSubStep.js
index c7db036ecb8..bbc60bca1d8 100644
--- a/src/components/Wizard/WizardSubStep.js
+++ b/src/components/Wizard/WizardSubStep.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 /**
  * WizardSubStep component for Patternfly React
@@ -12,7 +12,7 @@ const WizardSubStep = ({
   activeSubStep,
   ...rest
 }) => {
-  const classes = cx(
+  const classes = classNames(
     'wizard-pf-step-title-substep',
     { active: `${subStep}` === `${activeSubStep}` },
     className