diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index ec6da7006b9..00000000000
--- a/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "presets": ["./packages/patternfly-3/.babelrc.js"]
-}
diff --git a/.circleci/conditional_upload.sh b/.circleci/conditional_upload.sh
deleted file mode 100755
index 605ff0fd5d2..00000000000
--- a/.circleci/conditional_upload.sh
+++ /dev/null
@@ -1,27 +0,0 @@
-#!/bin/bash
-# The situation occasionally arises where our docs build successfully,
-# but due to caching and other unopportune CI events the files aren't
-# actually there. So make sure they're there before uploading.
-if [ -z "$(ls -A .public/patternfly-3 2>/dev/null)" ]
-then
-    echo "Missing PF3 docs, skipping upload"
-    exit 1
-fi
-if [ -z "$(ls -A .public/patternfly-4 2>/dev/null)" ]
-then
-    echo "Missing PF4 docs, skipping upload"
-    exit 1
-fi
-
-if yarn run surge --project .public --domain patternfly-react.surge.sh
-then  
-    # Sends a POST request to Travis that triggers browser tests from here:
-    # https://github.com/quarckster/widgetastic.patternfly4/tree/master/testing
-    curl -s -X POST \
-       -H "Content-Type: application/json" \
-       -H "Accept: application/json" \
-       -H "Travis-API-Version: 3" \
-       -H "Authorization: token $QUARCKSTER_TOKEN" \
-       -d '{"request": {"branch": "master"}}' \
-       https://api.travis-ci.org/repo/quarckster%2Fwidgetastic.patternfly4/requests
-fi
\ No newline at end of file
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9402853315c..b97cb9d4b80 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,47 +1,226 @@
 version: 2
+
+# Adapted from https://github.com/circleci/circleci-docs/blob/master/.circleci/config.yml
+# I'd love to find docs on this syntax.
+references:
+  js_deps_paths: &js_deps_paths
+  - node_modules/
+  - packages/patternfly-3/patternfly-react-extensions/node_modules/
+  - packages/patternfly-3/patternfly-react-wooden-tree/node_modules/
+  - packages/patternfly-3/patternfly-react/node_modules/
+  - packages/patternfly-3/react-console/node_modules/
+  - packages/patternfly-4/react-charts/node_modules/
+  - packages/patternfly-4/react-core/node_modules/
+  - packages/patternfly-4/react-docs/node_modules/
+  - packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-docgen-typescript/node_modules/
+  - packages/patternfly-4/react-inline-edit-extension/node_modules/
+  - packages/patternfly-4/react-integration/demo-app-ts/node_modules/
+  - packages/patternfly-4/react-integration/node_modules/
+  - packages/patternfly-4/react-styled-system/node_modules/
+  - packages/patternfly-4/react-styles/node_modules/
+  - packages/patternfly-4/react-table/node_modules/
+  - packages/patternfly-4/react-tokens/node_modules/
+  - packages/patternfly-4/react-topology/node_modules/
+  - packages/patternfly-4/react-virtualized-extension/node_modules/
+  - packages/react-codemods/node_modules/
+  - packages/react-icons/node_modules/
+  build_cache_paths: &build_cache_paths
+  - .cache/
+  - packages/patternfly-3/patternfly-react-extensions/dist/
+  - packages/patternfly-3/patternfly-react-wooden-tree/dist/
+  - packages/patternfly-3/patternfly-react/dist/
+  - packages/patternfly-3/react-console/dist/
+  - packages/patternfly-4/react-charts/dist/
+  - packages/patternfly-4/react-core/dist/
+  - packages/patternfly-4/react-inline-edit-extension/dist/
+  - packages/patternfly-4/react-styled-system/dist/
+  - packages/patternfly-4/react-styles/css/
+  - packages/patternfly-4/react-styles/dist/
+  - packages/patternfly-4/react-table/dist/
+  - packages/patternfly-4/react-tokens/dist/
+  - packages/patternfly-4/react-topology/dist/
+  - packages/patternfly-4/react-virtualized-extension/dist/
+  - packages/react-icons/dist/
+  js_deps_cache_key: &js_deps_cache_key
+    js-deps-v{{.Environment.CACHE_VERSION}}-{{checksum "yarn.lock"}}
+  build_cache_key: &build_cache_key
+    build-cache-v{{.Environment.CACHE_VERSION}}-{{checksum "yarn.lock"}}
+  attach_workspace: &attach_workspace
+    attach_workspace:
+      at: ~/project
+
+workflows:
+  version: 2
+  build_test_deploy:
+    jobs:
+    - build
+    - build_pf4_docs:
+        requires:
+        - build
+    - build_pf3_docs:
+        requires:
+        - build
+    - test_jest_pf4:
+        requires:
+        - build
+    - test_jest_other:
+        requires:
+        - build
+    - build_integration:
+        requires:
+        - build
+    - lint:
+        requires:
+        - build
+    - upload_docs:
+        requires:
+        - build_pf3_docs
+        - build_pf4_docs
+    - deploy_prerelease:
+        requires:
+        - test_jest_pf4
+        - test_jest_other
+        - build_pf3_docs
+        - build_pf4_docs
+        filters:
+          branches:
+            only: master
 jobs:
   build:
-    branches:
-        ignore:
-          - master
-    docker:
-      - image: circleci/node:8.15
-    working_directory: ~/repo
-    steps:
-      - checkout
-      # Download and cache dependencies
-      - restore_cache:
-          keys:
-            - v{{ .Environment.CACHE_VERSION }}-deps-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - run:
-          name: Conditional install
-          command: if [ ! -d node_modules ]; then yarn install --frozen-lockfile; fi
-      - save_cache:
-          paths:
-            - node_modules
-            - packages/react-icons/node_modules
-            - packages/patternfly-4/react-core/node_modules
-            - packages/patternfly-4/react-docs/node_modules
-            - packages/patternfly-4/react-charts/node_modules
-            - packages/patternfly-4/react-styles/node_modules
-            - packages/patternfly-3/patternfly-react/node_modules
-            - .cache # Incremental builds
-          key: v{{ .Environment.CACHE_VERSION }}-deps-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - run:
-          name: Build Dist
-          command: yarn build
-      - run:
-          name: (PF3) Build Storybook
-          command: |
-            yarn build:storybook &&
-            cp -r .out .public/patternfly-3
-      - run:
-          name: (PF4) Build Docs
-          command: |
-            yarn build:docs &&
-            cp -r packages/patternfly-4/react-docs/public .public/patternfly-4 &&
-            cp -r .public/patternfly-4/assets .public/assets &&
-            cp .public/patternfly-4/favicon* .public
-      - run:
-          name: Deploy Docs
-          command: if [ -n "$CIRCLE_PULL_REQUEST" ]; then .circleci/upload_preview.sh; fi
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - checkout
+    - persist_to_workspace:
+        root: ~/project
+        paths:
+          - "*"
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: Conditional install
+        command: if [ ! -d node_modules ]; then yarn install --frozen-lockfile; fi
+    - save_cache:
+        paths: *js_deps_paths
+        key: *js_deps_cache_key
+    - restore_cache:
+        keys:
+        - *build_cache_key
+    - run:
+        name: Build Dist
+        command: yarn build
+    - save_cache:
+        paths: *build_cache_paths
+        key: *build_cache_key
+    - persist_to_workspace:
+        root: ~/project
+        paths: *build_cache_paths
+  test_jest_pf4:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: PF4 Jest Tests
+        command: yarn test:pf4 --maxWorkers=2
+  test_jest_other:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: PF3 Jest Tests
+        command: yarn test:pf3 --maxWorkers=2
+    - run:
+        name: Other Tests
+        command: yarn test:misc --maxWorkers=2
+  build_integration:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: Build Cypress Integration Tests
+        command: yarn build:integration
+  lint:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: TSLint
+        command: yarn lint:ts
+    - run:
+        name: ESLint
+        command: yarn lint:js
+    - run:
+        name: "@patternfly/patternfly Versions Match"
+        command: yarn lint:versions
+    - run:
+        name: StyleLint
+        command: yarn lint:style
+  build_pf3_docs:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: Build PF3 Storybook Static Site
+        command: yarn build:storybook
+    - persist_to_workspace:
+        root: ~/project
+        paths:
+        - .out/
+  build_pf4_docs:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
+    - run:
+        name: Build PF4 Gatsby Static Site
+        command: yarn build:docs
+    - persist_to_workspace:
+        root: ~/project
+        paths:
+        - packages/patternfly-4/react-docs/public/
+  upload_docs:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - run:
+        name: Build docs Folder
+        command: .circleci/copy-docs.sh
+    - run:
+        name: Upload docs to surge.sh
+        command: .circleci/upload-docs.sh
+  deploy_prerelease:
+    docker:
+    - image: circleci/node:8.15
+    steps:
+    - *attach_workspace
+    - run:
+        name: Avoid hosts unknown for github
+        command: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
+    - run:
+        name: Deploy to NPM and Github
+        command: .circleci/release.sh
diff --git a/.circleci/copy-docs.sh b/.circleci/copy-docs.sh
new file mode 100755
index 00000000000..c21adf585ee
--- /dev/null
+++ b/.circleci/copy-docs.sh
@@ -0,0 +1,10 @@
+#!/bin/bash
+# Build the docs/ folder from pf3 and pf4 docs
+mkdir -p docs
+cp -r .out docs/patternfly-3
+cp -r packages/patternfly-4/react-docs/public docs/patternfly-4
+cp .circleci/index.html docs/index.html
+# These need to be at the root for CSS variables
+cp -r docs/patternfly-4/assets docs/assets
+# Use newer favicon
+cp docs/patternfly-4/favicon* docs
diff --git a/.public/index.html b/.circleci/index.html
similarity index 100%
rename from .public/index.html
rename to .circleci/index.html
diff --git a/.circleci/release.sh b/.circleci/release.sh
index 473a7ae4392..2842ac0b28a 100755
--- a/.circleci/release.sh
+++ b/.circleci/release.sh
@@ -1,39 +1,16 @@
 #!/bin/bash
-# Note: do not do set -x or the passwords will leak!
-set -e
 
+GIT_USERNAME="patternfly-build"
+REPO="github.com:${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}.git"
 echo "Preparing release environment..."
 git config --global user.email "patternfly-build@redhat.com"
-git config --global user.name "patternfly-build"
+git config --global user.name ${GIT_USERNAME}
 git config credential.helper store
-
-echo "https://${GH_USERNAME}:${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git" > ~/.git-credentials
+echo "https://${GIT_USERNAME}:${GH_TOKEN}@${REPO}" > ~/.git-credentials
 echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
 
 echo "Doing a release..."
 # Lerna is complicated. Commands: https://github.com/lerna/lerna/tree/master/commands
-git checkout $TRAVIS_BRANCH # Lerna can't have a detached HEAD
-git rev-parse HEAD
-
 # Identify packages that have been updated since the previous tagged release
 # Update their versions and changelogs
-npx lerna version --conventional-commits --no-git-tag-version --no-commit-hooks --no-push --yes
-
-# Amend the commit to avoid lerna ERR! EUNCOMMIT
-git add **/package.json **/CHANGELOG.md
-git commit --amend --no-edit --no-verify
-
-# Check each package.json and determine if any package version is not present in the registry;
-# any versions not present in the registry will be published
-if npx lerna publish from-package --no-git-tag-version --no-push --yes ; then
-    # Undo that last amended commit locally, because we don't actually want to push it
-    git reset --hard $TRAVIS_COMMIT
-    # Now only if it publishes should we also push this commit to Github and do a Github release
-    if ! npx lerna version --conventional-commits --github-release --no-commit-hooks --yes ; then
-        echo "Something went wrong committing or making a Github release."
-        exit 0 # Publishing to the registry is what matters...
-    fi
-else # Failed to publish to npm
-    echo "Failed to publish to npm :("
-    exit 1
-fi
\ No newline at end of file
+npx lerna publish --conventional-commits --create-release=github --yes
diff --git a/.circleci/upload-docs.sh b/.circleci/upload-docs.sh
new file mode 100755
index 00000000000..939d2684c64
--- /dev/null
+++ b/.circleci/upload-docs.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+USERNAME=${CIRCLE_PROJECT_USERNAME}
+REPONAME=${CIRCLE_PROJECT_REPONAME}
+
+if [ -n "${CIRCLE_PULL_REQUEST}" ] # If build is a PR
+then
+  # Split on "/" to get last part of URL, ref: http://stackoverflow.com/a/5257398/689223
+  URL_SPLIT=(${CIRCLE_PULL_REQUEST//\// })
+  PR_NUM=$(printf %s\\n "${URL_SPLIT[@]:(-1)}")
+  # Domain names follow the RFC1123 spec [a-Z] [0-9] [-] limited to 253 characters
+  # https://en.wikipedia.org/wiki/Domain_Name_System#Domain_name_syntax
+  # So, just replace "/" or "." with "-"
+  DEPLOY_SUBDOMAIN=`echo "${REPONAME}-pr-$PR_NUM" | tr '[\/|\.]' '-' | cut -c1-253`
+  ALREADY_DEPLOYED=`npx surge list | grep ${DEPLOY_SUBDOMAIN}`
+else
+  DEPLOY_SUBDOMAIN=${REPONAME}
+fi
+
+DEPLOY_DOMAIN="https://${DEPLOY_SUBDOMAIN}.surge.sh"
+npx surge --project docs --domain $DEPLOY_DOMAIN;
+
+if [ -n "${CIRCLE_PULL_REQUEST}" ] && [ -z "${ALREADY_DEPLOYED}" ] # Leave a Github comment
+then
+  # Use Issues api instead of PR api because
+  # PR api requires comments be made on specific files of specific commits
+  GITHUB_PR_COMMENTS="https://api.github.com/repos/${USERNAME}/${REPONAME}/issues/${PR_NUM}/comments"
+  echo "Adding github PR comment ${GITHUB_PR_COMMENTS}"
+  curl -H "Authorization: token ${GH_PR_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"PatternFly-React preview: '${DEPLOY_DOMAIN}'"}'
+else
+  echo "Already deployed ${DEPLOY_DOMAIN}"
+fi
\ No newline at end of file
diff --git a/.circleci/upload_preview.sh b/.circleci/upload_preview.sh
deleted file mode 100755
index 005cb6e9d20..00000000000
--- a/.circleci/upload_preview.sh
+++ /dev/null
@@ -1,24 +0,0 @@
-#!/bin/bash
-# Split on "/" to get last part of URL, ref: http://stackoverflow.com/a/5257398/689223
-URL_SPLIT=(${CIRCLE_PULL_REQUEST//\// })
-PR_NUM=$(printf %s\\n "${URL_SPLIT[@]:(-1)}")
-# Domain names follow the RFC1123 spec [a-Z] [0-9] [-] limited to 253 characters
-# https://en.wikipedia.org/wiki/Domain_Name_System#Domain_name_syntax
-# So, just replace "/" or "." with "-"
-DEPLOY_SUBDOMAIN=`echo "$PR_NUM-pr-${CIRCLE_PROJECT_REPONAME}-${CIRCLE_PROJECT_USERNAME}" | tr '[\/|\.]' '-' | cut -c1-253`
-DEPLOY_DOMAIN="https://${DEPLOY_SUBDOMAIN}.surge.sh"
-ALREADY_DEPLOYED=`yarn run surge list | grep ${DEPLOY_SUBDOMAIN}`
-
-yarn run surge --project .public --domain $DEPLOY_DOMAIN;
-
-if [ -z "$ALREADY_DEPLOYED" ]
-then
-  # Using the Issues api instead of the PR api
-  # Done so because every PR is an issue, and the issues api allows to post general comments,
-  # while the PR api requires that comments are made to specific files and specific commits
-  GITHUB_PR_COMMENTS="https://api.github.com/repos/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/issues/${PR_NUM}/comments"
-  echo "Adding github PR comment ${GITHUB_PR_COMMENTS}"
-  curl -H "Authorization: token ${GH_PR_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"PatternFly-React preview: '${DEPLOY_DOMAIN}'"}'
-else
-  echo "Already deployed ${DEPLOY_DOMAIN}"
-fi
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index ed26ae50fd8..2d7b16dfe96 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,7 +28,8 @@ lerna-debug.log
 .vscode
 # For prettier
 !.vscode/settings.json
+# For vim
+*.swp
 
 # Deploy directory
-.public
-!.public/index.html
+docs
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index b8a1b836cde..00000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,106 +0,0 @@
-dist: xenial
-language: node_js
-node_js:
-  - "8" # Also included in .nvmrc, but this saves a few seconds
-cache:
-  yarn: false
-  directories:
-    - node_modules # God help us...
-    - packages/react-icons/node_modules/
-    - packages/patternfly-4/react-core/node_modules
-    - packages/patternfly-4/react-docs/node_modules
-    - packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-docgen-typescript/node_modules
-    - packages/patternfly-4/react-docs/plugins/gatsby-transformer-react-examples/node_modules
-    - packages/patternfly-4/react-charts/node_modules
-    - packages/patternfly-4/react-styles/node_modules
-    - packages/patternfly-3/patternfly-react/node_modules
-    - packages/patternfly-4/react-integration/node_modules
-    - packages/patternfly-4/react-integration/demo-app-ts/node_modules
-    - packages/react-icons/dist
-    - packages/react-icons/src/icons
-    - packages/react-icons/src/index.d.ts
-    - packages/react-icons/src/index.js
-    - packages/patternfly-3/patternfly-react-extensions/dist
-    - packages/patternfly-3/patternfly-react/dist
-    - packages/patternfly-3/react-console/dist
-    - packages/patternfly-4/react-charts/dist
-    - packages/patternfly-4/react-core/dist
-    - packages/patternfly-4/react-styled-system/dist
-    - packages/patternfly-4/react-styles/dist
-    - packages/patternfly-4/react-styles/css
-    - packages/patternfly-4/react-table/dist
-    - packages/patternfly-4/react-tokens/dist
-    - packages/patternfly-4/react-inline-edit-extension/dist
-    - packages/patternfly-4/react-integration/demo-app-ts/build
-    - packages/patternfly-4/react-virtualized-extension/dist
-    - packages/patternfly-4/react-topology/dist
-    - packages/patternfly-4/react-docs/public # To cache PF4 docs
-    - .cache # For incremental builds
-git:
-  depth: 10
-branches:
-  except:
-    - "/^chore/bump-.*$/" # Avoid hookbot double-builds
-notifications:
-  email: false
-
-stages:
-  - Build
-  - Test
-  - name: Deploy
-    if: branch = master && type != pull_request && fork = false
-
-install:
-  - yarn install --frozen-lockfile
-jobs:
-  include:
-    - stage: Build
-      name: Build Dist
-      script:
-        - yarn build
-
-    - stage: Test # Nothing can be cached in this stage since steps run in parallel.
-      name: (PF4) Jest Tests
-      install: skip
-      script:
-        - ls packages/patternfly-4/react-styles
-        - yarn test:pf4
-        - npx codecov -F patternfly4
-    - name: (PF3 and Misc) Jest Tests
-      install: skip
-      script:
-        - yarn test:pf3
-        - npx codecov -F patternfly3
-        - rm -rf coverage
-        - yarn test:misc
-        - npx codecov -F patternflymisc
-    - name: Integration test
-      install: skip
-      script:
-        - yarn build:integration
-    - name: (PF4) Build Docs
-      if: branch = master && type != pull_request && fork = false
-      install: skip
-      script:
-        - yarn build:docs
-    - name: TSLint, ESLint, and Stylelint 
-      install: skip
-      script:
-        - yarn lint:ts
-        - yarn lint:js
-        - yarn lint:versions
-        - yarn lint:style
-
-    - stage: Deploy
-      name: NPM and Github Release
-      install: skip
-      script: .circleci/release.sh
-    - name: (PF3) Build Storybook and Deploy Docs
-      install: skip
-      script:
-        - yarn build:storybook
-        - mv .out .public/patternfly-3
-        - mv packages/patternfly-4/react-docs/public .public/patternfly-4
-        - cp .public/patternfly-4/favicon* .public
-        - cp -r .public/patternfly-4/assets .public/assets
-        - .circleci/conditional_upload.sh
diff --git a/README.md b/README.md
index 3c082a574d2..f8fea3c2d86 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # patternfly-react
 
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
-[![Build Status](https://travis-ci.org/patternfly/patternfly-react.svg?branch=master)](https://travis-ci.org/patternfly/patternfly-react)
+[![CircleCI](https://circleci.com/gh/patternfly/patternfly-react.svg?style=svg)](https://circleci.com/gh/patternfly/patternfly-react)
 [![npm version](https://badge.fury.io/js/patternfly-react.svg)](https://badge.fury.io/js/patternfly-react)
 [![codecov](https://codecov.io/gh/patternfly/patternfly-react/branch/master/graph/badge.svg)](https://codecov.io/gh/patternfly/patternfly-react)
 [![Selenium Tests](https://travis-ci.org/quarckster/widgetastic.patternfly4.svg?branch=master)](https://travis-ci.org/quarckster/widgetastic.patternfly4)
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000000..429a1720c05
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: './packages/patternfly-4/.babelrc',
+  presets: [['@babel/env', {'modules': 'commonjs'}], '@babel/react'],
+}
\ No newline at end of file
diff --git a/jest.config.js b/jest.config.js
index a5d66cd9119..2b770f22737 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -26,7 +26,7 @@ module.exports = {
     "<rootDir>/packages/patternfly-4/react-core/scripts/snapshot-serializer"
   ],
   transform: {
-    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.(ts|tsx?)$': 'ts-jest',
     '^.+\\.jsx?$': 'babel-jest',
     '\\.(css)$': '<rootDir>/packages/patternfly-4/react-styles/jest-transform.js'
   },
diff --git a/package.json b/package.json
index bca7d01f9c2..475780604be 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,13 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "@storybook/addon-actions": "^v3.4.11",
     "@storybook/addon-info": "^v3.4.11",
     "@storybook/addon-knobs": "^v3.4.11",
@@ -33,17 +40,7 @@
     "@storybook/addons": "^3.3.0",
     "@storybook/react": "^v3.4.11",
     "@storybook/storybook-deployer": "^2.1.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-plugin-transform-imports": "^1.5.0",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "change-case": "^3.0.2",
     "codecov": "^3.2.0",
     "commitizen": "^3.0.7",
diff --git a/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md b/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md
index ea538d1eebe..ebb878e75cc 100644
--- a/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md
+++ b/packages/patternfly-3/patternfly-react-extensions/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.19.2](https://github.com/patternfly/patternfly-react/compare/patternfly-react-extensions@2.19.1...patternfly-react-extensions@2.19.2) (2019-06-19)
+
+**Note:** Version bump only for package patternfly-react-extensions
+
+
+
+
+
+## 2.19.1 (2019-06-10)
+
+**Note:** Version bump only for package patternfly-react-extensions
+
+
+
+
+
 # 2.19.0 (2019-06-05)
 
 
diff --git a/packages/patternfly-3/patternfly-react-extensions/package.json b/packages/patternfly-3/patternfly-react-extensions/package.json
index 0f8c520631a..1e71374f7de 100644
--- a/packages/patternfly-3/patternfly-react-extensions/package.json
+++ b/packages/patternfly-3/patternfly-react-extensions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "patternfly-react-extensions",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "private": false,
   "description": "This library provides an extended set of React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
@@ -42,7 +42,7 @@
     "classnames": "^2.2.5",
     "css-element-queries": "^1.0.1",
     "patternfly": "^3.58.0",
-    "patternfly-react": "^2.36.0",
+    "patternfly-react": "^2.36.2",
     "react-bootstrap": "^0.32.1",
     "react-click-outside": "^3.0.1",
     "react-diff-view": "^1.8.1",
@@ -51,6 +51,17 @@
     "unidiff": "^1.0.1"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
     "rimraf": "^2.6.2",
     "shx": "^0.3.2"
   },
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md b/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md
index 53f612ca02b..dbdb650c84c 100644
--- a/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md
+++ b/packages/patternfly-3/patternfly-react-wooden-tree/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 2.0.1 (2019-06-10)
+
+**Note:** Version bump only for package patternfly-react-wooden-tree
+
+
+
+
+
 # 2.0.0 (2019-06-05)
 
 
diff --git a/packages/patternfly-3/patternfly-react-wooden-tree/package.json b/packages/patternfly-3/patternfly-react-wooden-tree/package.json
index f4db1ceb26a..9a6227dcfa5 100644
--- a/packages/patternfly-3/patternfly-react-wooden-tree/package.json
+++ b/packages/patternfly-3/patternfly-react-wooden-tree/package.json
@@ -1,6 +1,6 @@
 {
   "name": "patternfly-react-wooden-tree",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Reexport react-wooden-tree with Patternfly design.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -33,6 +33,19 @@
   "dependencies": {
     "react-wooden-tree": "^2.0.1"
   },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1"
+  },
   "peerDependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
diff --git a/packages/patternfly-3/patternfly-react/CHANGELOG.md b/packages/patternfly-3/patternfly-react/CHANGELOG.md
index c480e4b7744..1a2b6019dec 100644
--- a/packages/patternfly-3/patternfly-react/CHANGELOG.md
+++ b/packages/patternfly-3/patternfly-react/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.36.2](https://github.com/patternfly/patternfly-react/compare/patternfly-react@2.36.1...patternfly-react@2.36.2) (2019-06-19)
+
+**Note:** Version bump only for package patternfly-react
+
+
+
+
+
+## 2.36.1 (2019-06-10)
+
+**Note:** Version bump only for package patternfly-react
+
+
+
+
+
 # 2.36.0 (2019-06-05)
 
 
diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json
index a566382c20e..96b2a7beeff 100644
--- a/packages/patternfly-3/patternfly-react/package.json
+++ b/packages/patternfly-3/patternfly-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "patternfly-react",
-  "version": "2.36.0",
+  "version": "2.36.2",
   "private": false,
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
@@ -68,6 +68,17 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
     "clean-css-cli": "^4.2.1",
     "react-axe": "^3.0.2",
     "rimraf": "^2.6.2",
diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js b/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js
index b1144b2adfe..1aa2c55d1c4 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Cards/Card.js
@@ -2,25 +2,6 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import CardTitle from './CardTitle';
-import CardBody from './CardBody';
-import CardHeading from './CardHeading';
-import CardFooter from './CardFooter';
-import CardLink from './CardLink';
-import CardGrid from './CardGrid';
-import CardDropdownButton from './CardDropdownButton';
-import CardHeightMatching from './CardHeightMatching';
-import {
-  UtilizationCard,
-  UtilizationCardDetails,
-  UtilizationCardDetailsCount,
-  UtilizationCardDetailsDesc,
-  UtilizationCardDetailsLine1,
-  UtilizationCardDetailsLine2
-} from './UtilizationTrendCard';
-
-import { AggregateStatusCount, AggregateStatusNotifications, AggregateStatusNotification } from './AggregateStatusCard';
-
 /**
  * Card Component for PatternFly React
  */
@@ -69,22 +50,4 @@ Card.defaultProps = {
   cardRef: null
 };
 
-Card.Title = CardTitle;
-Card.Body = CardBody;
-Card.Heading = CardHeading;
-Card.Footer = CardFooter;
-Card.Link = CardLink;
-Card.Grid = CardGrid;
-Card.DropdownButton = CardDropdownButton;
-Card.HeightMatching = CardHeightMatching;
-Card.UtilizationCard = UtilizationCard;
-Card.UtilizationCardDetails = UtilizationCardDetails;
-Card.UtilizationCardDetailsCount = UtilizationCardDetailsCount;
-Card.UtilizationCardDetailsDesc = UtilizationCardDetailsDesc;
-Card.UtilizationCardDetailsLine1 = UtilizationCardDetailsLine1;
-Card.UtilizationCardDetailsLine2 = UtilizationCardDetailsLine2;
-Card.AggregateStatusCount = AggregateStatusCount;
-Card.AggregateStatusNotifications = AggregateStatusNotifications;
-Card.AggregateStatusNotification = AggregateStatusNotification;
-
 export default Card;
diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js b/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js
index 8e1787d2d3a..0b589f4e73c 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Cards/UtilizationTrendCard/UtilizationCard.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Card } from '../index';
+import Card from '../Card';
 
 const UtilizationCard = ({ children, className, ...props }) => {
   const classes = classNames('card-pf-utilization', className);
diff --git a/packages/patternfly-3/patternfly-react/src/components/Cards/index.js b/packages/patternfly-3/patternfly-react/src/components/Cards/index.js
index 64d2530f843..5252339c44c 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Cards/index.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Cards/index.js
@@ -17,6 +17,24 @@ import {
   UtilizationCardDetailsLine2
 } from './UtilizationTrendCard';
 
+Card.Title = CardTitle;
+Card.Body = CardBody;
+Card.Heading = CardHeading;
+Card.Footer = CardFooter;
+Card.Link = CardLink;
+Card.Grid = CardGrid;
+Card.DropdownButton = CardDropdownButton;
+Card.HeightMatching = CardHeightMatching;
+Card.UtilizationCard = UtilizationCard;
+Card.UtilizationCardDetails = UtilizationCardDetails;
+Card.UtilizationCardDetailsCount = UtilizationCardDetailsCount;
+Card.UtilizationCardDetailsDesc = UtilizationCardDetailsDesc;
+Card.UtilizationCardDetailsLine1 = UtilizationCardDetailsLine1;
+Card.UtilizationCardDetailsLine2 = UtilizationCardDetailsLine2;
+Card.AggregateStatusCount = AggregateStatusCount;
+Card.AggregateStatusNotifications = AggregateStatusNotifications;
+Card.AggregateStatusNotification = AggregateStatusNotification;
+
 export {
   Card,
   CardTitle,
diff --git a/packages/patternfly-3/patternfly-react/src/components/Form/Form.stories.js b/packages/patternfly-3/patternfly-react/src/components/Form/Form.stories.js
index 89621e9d24c..1a94acb5425 100644
--- a/packages/patternfly-3/patternfly-react/src/components/Form/Form.stories.js
+++ b/packages/patternfly-3/patternfly-react/src/components/Form/Form.stories.js
@@ -2,15 +2,12 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { withInfo } from '@storybook/addon-info';
 import { inlineTemplate } from 'storybook/decorators/storyTemplates';
 import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants';
-import { Icon } from '../Icon';
 import { Col, Row, Grid } from '../Grid';
 import { Button } from '../Button';
-import { Modal } from '../Modal';
 import { Form, FormGroup, FormControl, ControlLabel } from './index';
 
 import { FormExample, FormExampleSource } from './Stories/FormExample';
@@ -21,6 +18,7 @@ import { InputGroupsFormFields, getInputGroupsFormKnobs } from './Stories/InputG
 import { InlineFormField } from './Stories/InlineFormField';
 import { HorizontalFormField } from './Stories/HorizontalFormField';
 import { VerticalFormField } from './Stories/VerticalFormField';
+import { ModalForm } from './Stories/ModalForm';
 import { name } from '../../../package.json';
 
 const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Forms`, module);
@@ -219,7 +217,6 @@ exampleStories.add(
     if (bsSize) buttonsProps.bsSize = bsSize;
     if (disabled) buttonsProps.disabled = disabled;
 
-    const showModal = boolean('Show Modal', true);
     const showLoading = boolean('Show Loading', false);
     const formFields = BasicFormFields.map(formField => HorizontalFormField({ ...formField, ...formFieldsKnobs }));
     const formButtons = BasicFormButtons.map(({ text, ...props }) => (
@@ -231,21 +228,12 @@ exampleStories.add(
       <div style={{ paddingTop: '20px', paddingBottom: '10px' }}>{[...BasicFormSpinner].reverse()}</div>
     );
     const story = (
-      <Modal show={showModal}>
-        <Modal.Header>
-          <button className="close" onClick={action('Close')} aria-hidden="true" aria-label="Close">
-            <Icon type="pf" name="close" />
-          </button>
-          <Modal.Title>Basic Settings</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <Form horizontal>{formFields}</Form>
-        </Modal.Body>
-        <Modal.Footer>
-          {formButtons}
-          {showLoading && formSpinner}
-        </Modal.Footer>
-      </Modal>
+      <ModalForm
+        showLoading={showLoading}
+        formFields={formFields}
+        formButtons={formButtons}
+        formSpinner={formSpinner}
+      />
     );
 
     return inlineTemplate({
diff --git a/packages/patternfly-3/patternfly-react/src/components/Form/Stories/ModalForm.js b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/ModalForm.js
new file mode 100644
index 00000000000..68cb3b1f2e8
--- /dev/null
+++ b/packages/patternfly-3/patternfly-react/src/components/Form/Stories/ModalForm.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '../../Button';
+import { Modal } from '../../Modal';
+import { Icon } from '../../Icon';
+import { Form } from '../index';
+
+class ModalForm extends React.Component {
+  constructor() {
+    super();
+    this.state = { showModal: false };
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
+  }
+  close() {
+    this.setState({ showModal: false });
+  }
+  open() {
+    this.setState({ showModal: true });
+  }
+  render() {
+    return (
+      <div>
+        <Button bsStyle="primary" bsSize="large" onClick={this.open}>
+          Launch Modal Form
+        </Button>
+
+        <Modal show={this.state.showModal} onHide={this.close}>
+          <Modal.Header>
+            <button className="close" onClick={this.close} aria-hidden="true" aria-label="Close">
+              <Icon type="pf" name="close" />
+            </button>
+            <Modal.Title>Basic Settings</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <Form horizontal>{this.props.formFields}</Form>
+          </Modal.Body>
+          <Modal.Footer>
+            {this.props.formButtons}
+            {this.props.showLoading && this.props.formSpinner}
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+ModalForm.propTypes = {
+  showLoading: PropTypes.bool.isRequired,
+  formFields: PropTypes.array.isRequired,
+  formButtons: PropTypes.array.isRequired,
+  formSpinner: PropTypes.node.isRequired
+};
+
+export { ModalForm };
diff --git a/packages/patternfly-3/react-console/CHANGELOG.md b/packages/patternfly-3/react-console/CHANGELOG.md
index 266b1ae15b1..3ab6e98f69f 100644
--- a/packages/patternfly-3/react-console/CHANGELOG.md
+++ b/packages/patternfly-3/react-console/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.11.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-console@1.11.1...@patternfly/react-console@1.11.2) (2019-06-19)
+
+**Note:** Version bump only for package @patternfly/react-console
+
+
+
+
+
+## 1.11.1 (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-console
+
+
+
+
+
 # 1.11.0 (2019-06-05)
 
 
diff --git a/packages/patternfly-3/react-console/package.json b/packages/patternfly-3/react-console/package.json
index fdb4d362a1c..bf11693c27d 100644
--- a/packages/patternfly-3/react-console/package.json
+++ b/packages/patternfly-3/react-console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-console",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "private": false,
   "description": "This library provides a set of Console React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
@@ -46,8 +46,19 @@
     "xterm": "^3.3.0"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "^23.6.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-export-extensions": "^6.22.0",
+    "babel-plugin-transform-imports": "^1.5.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
     "patternfly": "^3.58.0",
-    "patternfly-react": "^2.36.0",
+    "patternfly-react": "^2.36.2",
     "rimraf": "^2.6.2",
     "shx": "^0.3.2"
   },
diff --git a/packages/patternfly-4/.babelrc b/packages/patternfly-4/.babelrc
new file mode 100644
index 00000000000..38cc0d3fe51
--- /dev/null
+++ b/packages/patternfly-4/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": ["@babel/react"],
+  "ignore": ["**/__snapshots__", "**/*.d.ts"],
+  "plugins": [
+    "@babel/plugin-transform-typescript",
+    "babel-plugin-typescript-to-proptypes",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/proposal-class-properties",
+    "@babel/proposal-object-rest-spread",
+  ]
+}
diff --git a/packages/patternfly-4/.babelrc.js b/packages/patternfly-4/.babelrc.js
deleted file mode 100644
index 0804442c329..00000000000
--- a/packages/patternfly-4/.babelrc.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const babelENV = process.env.BABEL_ENV || 'development';
-const modules = babelENV !== 'production:esm' ? 'commonjs' : false;
-
-module.exports = {
-  presets: [['env', { modules }], 'react'],
-  plugins: [
-    'transform-class-properties',
-    'transform-export-extensions',
-    'transform-object-rest-spread',
-    'transform-object-assign',
-    babelENV !== 'development' && [
-      'transform-imports',
-      {
-        '@patternfly/react-icons': {
-          kebabCase: true,
-          preventFullImport: true,
-          transform: importName => {
-            if (importName.toLowerCase() === 'icon') {
-              throw new Error('Icon import is not allowed');
-            }
-            const importPath = `icons/${importName}`;
-            if (!modules) {
-              return `@patternfly/react-icons/dist/esm/${importPath}`;
-            }
-            return `@patternfly/react-icons/dist/js/${importPath}`;
-          }
-        }
-      }
-    ]
-  ].filter(Boolean),
-  ignore: (() => {
-    const ignore = ['src/**/__snapshots__'];
-    if (babelENV.includes('production')) {
-      ignore.push('test.js', '__mocks__');
-    }
-    return ignore;
-  })()
-};
diff --git a/packages/patternfly-4/react-charts/.babelrc b/packages/patternfly-4/react-charts/.babelrc
new file mode 100644
index 00000000000..25c4221a16d
--- /dev/null
+++ b/packages/patternfly-4/react-charts/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../.babelrc"
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-charts/.babelrc.js b/packages/patternfly-4/react-charts/.babelrc.js
deleted file mode 100644
index a59fe297daa..00000000000
--- a/packages/patternfly-4/react-charts/.babelrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const coreConfig = require('../react-core/.babelrc.js');
-
-module.exports = {
-  ...coreConfig
-}
diff --git a/packages/patternfly-4/react-charts/.npmignore b/packages/patternfly-4/react-charts/.npmignore
index eeb8914e39f..5344519a423 100644
--- a/packages/patternfly-4/react-charts/.npmignore
+++ b/packages/patternfly-4/react-charts/.npmignore
@@ -1,3 +1,6 @@
-src
 build
 dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-charts/CHANGELOG.md b/packages/patternfly-4/react-charts/CHANGELOG.md
index 02e57a52717..51895be2402 100644
--- a/packages/patternfly-4/react-charts/CHANGELOG.md
+++ b/packages/patternfly-4/react-charts/CHANGELOG.md
@@ -3,6 +3,130 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.3.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.6...@patternfly/react-charts@4.3.7) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.3.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.5...@patternfly/react-charts@4.3.6) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.3.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.4...@patternfly/react-charts@4.3.5) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.3.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.2...@patternfly/react-charts@4.3.4) (2019-06-18)
+
+
+### Bug Fixes
+
+* **ChartDonutThreshold:** Don't show static threshold donut tooltips by default. ([#2270](https://github.com/patternfly/patternfly-react/issues/2270)) ([7d9bd16](https://github.com/patternfly/patternfly-react/commit/7d9bd16))
+
+
+
+
+
+## [4.3.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.2...@patternfly/react-charts@4.3.3) (2019-06-18)
+
+
+### Bug Fixes
+
+* **ChartDonutThreshold:** Don't show static threshold donut tooltips by default. ([#2270](https://github.com/patternfly/patternfly-react/issues/2270)) ([7d9bd16](https://github.com/patternfly/patternfly-react/commit/7d9bd16))
+
+
+
+
+
+## [4.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.1...@patternfly/react-charts@4.3.2) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.3.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.3.0...@patternfly/react-charts@4.3.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+# [4.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.2.0...@patternfly/react-charts@4.3.0) (2019-06-13)
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+# 4.2.0 (2019-06-13)
+
+
+### Bug Fixes
+
+* **charts:** labels should use the overpass font ([#2232](https://github.com/patternfly/patternfly-react/issues/2232)) ([7b4e100](https://github.com/patternfly/patternfly-react/commit/7b4e100))
+
+
+### Features
+
+* **react-core:** allow dynamic rendering of anchor components ([#2117](https://github.com/patternfly/patternfly-react/issues/2117)) ([c1c3be9](https://github.com/patternfly/patternfly-react/commit/c1c3be9))
+
+
+
+
+
+## [4.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.4...@patternfly/react-charts@4.1.5) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.3...@patternfly/react-charts@4.1.4) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.2...@patternfly/react-charts@4.1.3) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## 4.1.2 (2019-06-10)
+
+
+### Bug Fixes
+
+* **charts:** align label vertically and add donutHeight/Width defaults ([#2193](https://github.com/patternfly/patternfly-react/issues/2193)) ([59aadfc](https://github.com/patternfly/patternfly-react/commit/59aadfc))
+
+
+
+
+
 ## [4.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.1.0...@patternfly/react-charts@4.1.1) (2019-06-05)
 
 **Note:** Version bump only for package @patternfly/react-charts
diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json
index 3029c840b83..d898f0c9225 100644
--- a/packages/patternfly-4/react-charts/package.json
+++ b/packages/patternfly-4/react-charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-charts",
-  "version": "4.1.1",
+  "version": "4.3.7",
   "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/react-styles": "^3.3.0"
+    "@patternfly/react-styles": "^3.4.2"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
@@ -37,10 +37,10 @@
   },
   "scripts": {
     "build": "yarn build:babel && yarn build:types && node ./scripts/copyTS.js",
-    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm && yarn build:babel:umd'",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q",
-    "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd --extensions '.js,.ts,.tsx' -q",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "build:types": "tsc -p tsconfig.gen-dts.json",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose --source-maps",
@@ -60,17 +60,14 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-transform-object-assign": "^7.0.0",
     "@babel/plugin-transform-typescript": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/patternfly": "2.8.2",
-    "@patternfly/react-icons": "^3.9.3",
-    "@patternfly/react-tokens": "^2.5.3",
+    "@patternfly/patternfly": "2.13.0",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-tokens": "^2.6.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "babel-plugin-transform-imports": "^1.5.0",
     "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",
     "enzyme": "3.9.0",
diff --git a/packages/patternfly-4/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
index 5ffb4c5cda5..80cf60a80d5 100644
--- a/packages/patternfly-4/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap
@@ -2151,9 +2151,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2179,9 +2180,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2227,9 +2229,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2253,9 +2256,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2333,9 +2337,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2359,9 +2364,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2376,9 +2382,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2403,9 +2410,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2414,9 +2422,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -2446,9 +2455,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2473,9 +2483,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -2498,9 +2509,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2525,9 +2537,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2564,9 +2577,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4751,9 +4765,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4779,9 +4794,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4827,9 +4843,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4853,9 +4870,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4933,9 +4951,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4959,9 +4978,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -4976,9 +4996,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -5003,9 +5024,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -5014,9 +5036,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -5046,9 +5069,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -5073,9 +5097,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -5098,9 +5123,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -5125,9 +5151,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -5164,9 +5191,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7357,9 +7385,10 @@ exports[`renders axis and component children 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7385,9 +7414,10 @@ exports[`renders axis and component children 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7433,9 +7463,10 @@ exports[`renders axis and component children 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7459,9 +7490,10 @@ exports[`renders axis and component children 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7539,9 +7571,10 @@ exports[`renders axis and component children 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7565,9 +7598,10 @@ exports[`renders axis and component children 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7582,9 +7616,10 @@ exports[`renders axis and component children 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7609,9 +7644,10 @@ exports[`renders axis and component children 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7620,9 +7656,10 @@ exports[`renders axis and component children 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -7652,9 +7689,10 @@ exports[`renders axis and component children 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7679,9 +7717,10 @@ exports[`renders axis and component children 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -7704,9 +7743,10 @@ exports[`renders axis and component children 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7731,9 +7771,10 @@ exports[`renders axis and component children 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -7770,9 +7811,10 @@ exports[`renders axis and component children 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
index 1607a91f8d0..dfb5e10e6aa 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap
@@ -43,9 +43,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -71,9 +72,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -119,9 +121,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -145,9 +148,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -225,9 +229,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -251,9 +256,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -268,9 +274,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -295,9 +302,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -306,9 +314,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -338,9 +347,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -365,9 +375,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -390,9 +401,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -417,9 +429,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -456,9 +469,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -535,9 +549,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -563,9 +578,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -611,9 +627,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -637,9 +654,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -717,9 +735,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -743,9 +762,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -760,9 +780,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -787,9 +808,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -798,9 +820,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -830,9 +853,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -857,9 +881,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -882,9 +907,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -909,9 +935,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -948,9 +975,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1051,9 +1079,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1079,9 +1108,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1127,9 +1157,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1153,9 +1184,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1233,9 +1265,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1259,9 +1292,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1276,9 +1310,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1303,9 +1338,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1314,9 +1350,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1346,9 +1383,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1373,9 +1411,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1398,9 +1437,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1425,9 +1465,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1464,9 +1505,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
index b030f60ecd9..237c22fc138 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap
@@ -43,9 +43,10 @@ exports[`ChartAxis 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -71,9 +72,10 @@ exports[`ChartAxis 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -119,9 +121,10 @@ exports[`ChartAxis 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -145,9 +148,10 @@ exports[`ChartAxis 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -225,9 +229,10 @@ exports[`ChartAxis 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -251,9 +256,10 @@ exports[`ChartAxis 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -268,9 +274,10 @@ exports[`ChartAxis 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -295,9 +302,10 @@ exports[`ChartAxis 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -306,9 +314,10 @@ exports[`ChartAxis 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -338,9 +347,10 @@ exports[`ChartAxis 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -365,9 +375,10 @@ exports[`ChartAxis 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -390,9 +401,10 @@ exports[`ChartAxis 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -417,9 +429,10 @@ exports[`ChartAxis 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -456,9 +469,10 @@ exports[`ChartAxis 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -550,9 +564,10 @@ exports[`ChartAxis 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -578,9 +593,10 @@ exports[`ChartAxis 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -626,9 +642,10 @@ exports[`ChartAxis 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -652,9 +669,10 @@ exports[`ChartAxis 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -732,9 +750,10 @@ exports[`ChartAxis 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -758,9 +777,10 @@ exports[`ChartAxis 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -775,9 +795,10 @@ exports[`ChartAxis 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -802,9 +823,10 @@ exports[`ChartAxis 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -813,9 +835,10 @@ exports[`ChartAxis 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -845,9 +868,10 @@ exports[`ChartAxis 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -872,9 +896,10 @@ exports[`ChartAxis 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -897,9 +922,10 @@ exports[`ChartAxis 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -924,9 +950,10 @@ exports[`ChartAxis 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -963,9 +990,10 @@ exports[`ChartAxis 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3174,9 +3202,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3202,9 +3231,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3250,9 +3280,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3276,9 +3307,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3356,9 +3388,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3382,9 +3415,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3399,9 +3433,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3426,9 +3461,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3437,9 +3473,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -3469,9 +3506,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3496,9 +3534,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -3521,9 +3560,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3548,9 +3588,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3587,9 +3628,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
index 1dee7aa7d01..f539e86f80f 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap
@@ -58,9 +58,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -86,9 +87,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -134,9 +136,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -160,9 +163,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -240,9 +244,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -266,9 +271,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -283,9 +289,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -310,9 +317,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -321,9 +329,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -353,9 +362,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -380,9 +390,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -405,9 +416,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -432,9 +444,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -471,9 +484,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -565,9 +579,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -593,9 +608,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -641,9 +657,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -667,9 +684,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -747,9 +765,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -773,9 +792,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -790,9 +810,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -817,9 +838,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -828,9 +850,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -860,9 +883,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -887,9 +911,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -912,9 +937,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -939,9 +965,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -978,9 +1005,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3174,9 +3202,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3202,9 +3231,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3250,9 +3280,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3276,9 +3307,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3356,9 +3388,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3382,9 +3415,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3399,9 +3433,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3426,9 +3461,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3437,9 +3473,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -3469,9 +3506,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3496,9 +3534,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -3521,9 +3560,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3548,9 +3588,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3587,9 +3628,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
index 7638b8a3246..71d1003c08f 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap
@@ -15,9 +15,10 @@ exports[`Chart 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -43,9 +44,10 @@ exports[`Chart 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -91,9 +93,10 @@ exports[`Chart 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -117,9 +120,10 @@ exports[`Chart 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -197,9 +201,10 @@ exports[`Chart 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -223,9 +228,10 @@ exports[`Chart 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -240,9 +246,10 @@ exports[`Chart 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -267,9 +274,10 @@ exports[`Chart 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -278,9 +286,10 @@ exports[`Chart 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -310,9 +319,10 @@ exports[`Chart 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -337,9 +347,10 @@ exports[`Chart 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -362,9 +373,10 @@ exports[`Chart 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -389,9 +401,10 @@ exports[`Chart 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -428,9 +441,10 @@ exports[`Chart 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -490,9 +504,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -518,9 +533,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -566,9 +582,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -592,9 +609,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -672,9 +690,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -698,9 +717,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -715,9 +735,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -742,9 +763,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -753,9 +775,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -785,9 +808,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -812,9 +836,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -837,9 +862,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -864,9 +890,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -903,9 +930,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -963,9 +991,10 @@ exports[`Chart 2`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -991,9 +1020,10 @@ exports[`Chart 2`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1039,9 +1069,10 @@ exports[`Chart 2`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1065,9 +1096,10 @@ exports[`Chart 2`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1145,9 +1177,10 @@ exports[`Chart 2`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1171,9 +1204,10 @@ exports[`Chart 2`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1188,9 +1222,10 @@ exports[`Chart 2`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1215,9 +1250,10 @@ exports[`Chart 2`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1226,9 +1262,10 @@ exports[`Chart 2`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -1258,9 +1295,10 @@ exports[`Chart 2`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1285,9 +1323,10 @@ exports[`Chart 2`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -1310,9 +1349,10 @@ exports[`Chart 2`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1337,9 +1377,10 @@ exports[`Chart 2`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1376,9 +1417,10 @@ exports[`Chart 2`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1438,9 +1480,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1466,9 +1509,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1514,9 +1558,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1540,9 +1585,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1620,9 +1666,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1646,9 +1693,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1663,9 +1711,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1690,9 +1739,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1701,9 +1751,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1733,9 +1784,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1760,9 +1812,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1785,9 +1838,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1812,9 +1866,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1851,9 +1906,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1911,9 +1967,10 @@ exports[`renders container via ChartLegend 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1939,9 +1996,10 @@ exports[`renders container via ChartLegend 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1987,9 +2045,10 @@ exports[`renders container via ChartLegend 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2013,9 +2072,10 @@ exports[`renders container via ChartLegend 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2093,9 +2153,10 @@ exports[`renders container via ChartLegend 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2119,9 +2180,10 @@ exports[`renders container via ChartLegend 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2136,9 +2198,10 @@ exports[`renders container via ChartLegend 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2163,9 +2226,10 @@ exports[`renders container via ChartLegend 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2174,9 +2238,10 @@ exports[`renders container via ChartLegend 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -2206,9 +2271,10 @@ exports[`renders container via ChartLegend 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2233,9 +2299,10 @@ exports[`renders container via ChartLegend 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -2258,9 +2325,10 @@ exports[`renders container via ChartLegend 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2285,9 +2353,10 @@ exports[`renders container via ChartLegend 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2324,9 +2393,10 @@ exports[`renders container via ChartLegend 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2387,9 +2457,10 @@ exports[`renders container via ChartLegend 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2415,9 +2486,10 @@ exports[`renders container via ChartLegend 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2463,9 +2535,10 @@ exports[`renders container via ChartLegend 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2489,9 +2562,10 @@ exports[`renders container via ChartLegend 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2569,9 +2643,10 @@ exports[`renders container via ChartLegend 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2595,9 +2670,10 @@ exports[`renders container via ChartLegend 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2612,9 +2688,10 @@ exports[`renders container via ChartLegend 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2639,9 +2716,10 @@ exports[`renders container via ChartLegend 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2650,9 +2728,10 @@ exports[`renders container via ChartLegend 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -2682,9 +2761,10 @@ exports[`renders container via ChartLegend 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2709,9 +2789,10 @@ exports[`renders container via ChartLegend 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -2734,9 +2815,10 @@ exports[`renders container via ChartLegend 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2761,9 +2843,10 @@ exports[`renders container via ChartLegend 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2800,9 +2883,10 @@ exports[`renders container via ChartLegend 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.tsx
index d68597b4e3f..c62bcb78410 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonut/ChartDonut.tsx
@@ -8,16 +8,19 @@ import {
   EventPropTypeInterface,
   PaddingProps,
   StringOrNumberOrCallback,
-  VictoryPieProps,
   VictoryStyleInterface
 } from 'victory';
 import { getDonutTheme } from '../ChartUtils/chart-theme';
 import { ChartContainer } from '../ChartContainer/ChartContainer';
 import { ChartLabel } from '../ChartLabel/ChartLabel';
+import { ChartLegend } from "../ChartLegend/ChartLegend";
 import { ChartPie, ChartPieProps } from '../ChartPie/ChartPie';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
-import { DonutStyles, DonutTheme } from '../ChartTheme/themes/donut-theme';
+import { DonutStyles } from '../ChartTheme/themes/donut-theme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
+import { getLabelX, getLabelY } from "../ChartUtils/chart-label";
+import { getLegendDimensions, getLegendX, getLegendY } from "../ChartUtils/chart-legend";
+import { getChartOrigin } from '../ChartUtils/chart-origin';
 
 export enum ChartDonutLabelPosition {
   centroid = 'centroid',
@@ -25,11 +28,27 @@ export enum ChartDonutLabelPosition {
   startAngle = 'startAngle'
 };
 
+export enum ChartDonutLegendOrientation {
+  horizontal = 'horizontal',
+  vertical = 'vertical'
+};
+
+export enum ChartDonutLegendPosition {
+  bottom = 'bottom',
+  right = 'right'
+};
+
 export enum ChartDonutSortOrder {
   ascending = 'ascending',
   descending = 'descending'
 };
 
+export enum ChartDonutSubTitlePosition {
+  bottom = 'bottom',
+  center = 'center',
+  right = 'right'
+}
+
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
  */
@@ -46,6 +65,13 @@ export interface ChartDonutProps extends ChartPieProps {
    * {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
    */
   animate?: AnimatePropTypeInterface;
+  /**
+   * The capHeight prop defines a text metric for the font being used: the expected height of capital letters.
+   * This is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of
+   * line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a
+   * unitless number, it is assumed to be ems.
+   */
+  capHeight?: StringOrNumberOrCallback;
   /**
    * The categories prop specifies how categorical data for a chart should be ordered.
    * This prop should be given as an array of string values, or an object with
@@ -102,6 +128,49 @@ export interface ChartDonutProps extends ChartPieProps {
    * If a dataComponent is not provided, ChartDonut's Slice component will be used.
    */
   dataComponent?: React.ReactElement<any>;
+  /**
+   * Specifies the height of the donut chart. This value should be given as a
+   * number of pixels.
+   *
+   * Because Victory renders responsive containers, the width and height props do not determine the width and
+   * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
+   * pixels will depend on the size of the container the chart is rendered into.
+   *
+   * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate
+   * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut
+   * height.
+   *
+   * The innerRadius may also need to be set when changing the donut size.
+   */
+  donutHeight?: number;
+  /**
+   * Defines a horizontal shift from the x coordinate. It should not be set manually.
+   */
+  donutDx?: number;
+  /**
+   * Defines a vertical shift from the y coordinate. It should not be set manually.
+   */
+  donutDy?: number;
+  /**
+   * Specifies the width of the donut chart. This value should be given as a
+   * number of pixels.
+   *
+   * Because Victory renders responsive containers, the width and height props do not determine the width and
+   * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
+   * pixels will depend on the size of the container the chart is rendered into.
+   *
+   * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate
+   * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width.
+   *
+   * The innerRadius may also need to be set when changing the donut size.
+   */
+  donutWidth?: number;
   /**
    * The overall end angle of the pie in degrees. This prop is used in conjunction with
    * startAngle to create a pie that spans only a segment of a circle.
@@ -211,6 +280,46 @@ export interface ChartDonutProps extends ChartPieProps {
    * @example ["spring", "summer", "fall", "winter"], (datum) => datum.title
    */
   labels?: string[] | ((data: any) => string);
+  /**
+   * The legend component to render with chart.
+   *
+   * Note: Use legendData so the legend width can be calculated and positioned properly.
+   * Default legend properties may be applied
+   */
+  legendComponent?: React.ReactElement<any>;
+  /**
+   * The data prop specifies the data to be plotted,
+   * where data X-value is the slice label (string or number),
+   * and Y-value is the corresponding number value represented by the slice
+   * Data should be in the form of an array of data points.
+   * Each data point may be any format you wish (depending on the `x` and `y` accessor props),
+   * but by default, an object with x and y properties is expected.
+   *
+   * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
+   */
+  legendData?: any[];
+  /**
+   * Defines a horizontal shift from the x coordinate. It should not be set manually.
+   */
+  legendDx?: number;
+  /**
+   * Defines a vertical shift from the y coordinate. It should not be set manually.
+   */
+  legendDy?: number;
+  /**
+   * The orientation prop takes a string that defines whether legend data
+   * are displayed in a row or column. When orientation is "horizontal",
+   * legend items will be displayed in a single row. When orientation is
+   * "vertical", legend items will be displayed in a single column. Line
+   * and text-wrapping is not currently supported, so "vertical"
+   * orientation is both the default setting and recommended for
+   * displaying many series of data.
+   */
+  legendOrientation?: 'horizontal' | 'vertical';
+  /**
+   * The legend position relation to the donut chart. Valid values are 'bottom' and 'right'
+   */
+  legendPosition?: 'bottom' | 'right';
   /**
    * The name prop is used to reference a component instance when defining shared events.
    */
@@ -274,6 +383,24 @@ export interface ChartDonutProps extends ChartPieProps {
    * The subtitle for the donut chart
    */
   subTitle?: string;
+  /**
+   * The label component to render the chart subTitle.
+   *
+   * Note: Default label properties may be applied
+   */
+  subTitleComponent?: React.ReactElement<any>;
+  /**
+   * Defines a horizontal shift from the x coordinate. It should not be set manually.
+   */
+  subTitleDx?: number;
+  /**
+   * Defines a vertical shift from the y coordinate. It should not be set manually.
+   */
+  subTitleDy?: number;
+  /**
+   * The orientation of the donut chart in relation to the legend. Valid values are 'bottom', 'center', and 'right'
+   */
+  subTitlePosition?: 'bottom' | 'center' | 'right';
   /**
    * The theme prop takes a style object with nested data, labels, and parent objects.
    * You can create this object yourself, or you can use a theme provided by
@@ -302,6 +429,12 @@ export interface ChartDonutProps extends ChartPieProps {
    * The title for the donut chart
    */
   title?: string;
+  /**
+   * The label component to render the chart title.
+   *
+   * Note: Default label properties may be applied
+   */
+  titleComponent?: React.ReactElement<any>;
   /**
    * Specifies the width of the svg viewBox of the chart container. This value should be given as a
    * number of pixels.
@@ -338,49 +471,164 @@ export interface ChartDonutProps extends ChartPieProps {
 }
 
 export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
-  height = DonutTheme.pie.height,
+  donutDx = 0,
+  donutDy = 0,
+  legendComponent = <ChartLegend />,
+  legendData,
+  legendDx = 0,
+  legendDy = 0,
+  legendPosition = DonutStyles.legend.position as ChartDonutLegendPosition,
   standalone = true,
   subTitle,
+  subTitleComponent = <ChartLabel />,
+  subTitleDx = 0,
+  subTitleDy = 0,
+  subTitlePosition = DonutStyles.label.subTitlePosition as ChartDonutSubTitlePosition,
   themeColor,
   themeVariant,
   title,
-  width = DonutTheme.pie.width,
+  titleComponent = <ChartLabel />,
 
   // destructure last
-  innerRadius = ((height || width) - 34) / 2,
   theme = getDonutTheme(themeColor, themeVariant),
+  legendOrientation = theme.legend.orientation as ChartDonutLegendOrientation,
+  capHeight = 1.1,
+  height = theme.pie.height,
+  width = theme.pie.width,
+  donutHeight = Math.min(height, width),
+  donutWidth = Math.min(height, width, donutHeight),
+  innerRadius = (Math.min(donutHeight, donutWidth) - 34) / 2,
   ...rest
 }: ChartDonutProps) => {
+  // Returns legend
+  const getLegend = () => {
+    if (!legendData && !legendComponent.props.data) {
+      return null;
+    }
+    const props = legendComponent.props ? legendComponent.props : {};
+    return React.cloneElement(legendComponent, {
+      data: legendData,
+      orientation: legendOrientation,
+      standalone: false,
+      theme: theme,
+      x: getLegendX({
+        chartWidth: donutWidth,
+        dx: legendDx,
+        legendData,
+        legendOrientation: props.legendOrientation ? props.legendOrientation : legendOrientation,
+        legendPosition,
+        legendProps: props,
+        theme,
+        svgWidth: width
+      }),
+      y: getLegendY({
+        chartHeight: donutHeight,
+        chartType: 'pie',
+        dy: legendDy,
+        legendData: props.data ? props.data : legendData,
+        legendOrientation: props.legendOrientation ? props.legendOrientation : legendOrientation,
+        legendProps: props,
+        legendPosition,
+        theme
+      }),
+      ...props
+    });
+  };
+
+  // Returns subtitle
+  const getSubTitle = () => {
+    if (!subTitle || subTitlePosition === ChartDonutSubTitlePosition.center) {
+      return null;
+    }
+    const props = titleComponent.props ? titleComponent.props : {};
+    return React.cloneElement(titleComponent, {
+      style: DonutStyles.label.subTitle,
+      text: subTitle,
+      textAnchor: subTitlePosition === 'right' ? 'start' : 'middle',
+      verticalAnchor: 'middle',
+      x: getLabelX({
+        chartWidth: donutWidth,
+        dx: subTitleDx,
+        labelPosition: subTitlePosition,
+        legendPosition,
+        svgWidth: width
+      }),
+      y: getLabelY({
+        chartHeight: donutHeight,
+        dy: subTitleDy,
+        labelPosition: subTitlePosition
+      }),
+      ...props
+    });
+  };
+
+  // Returns title
+  const getTitle = () => {
+    if (!title) {
+      return null;
+    }
+    const props = titleComponent ? titleComponent.props : {};
+    const showBoth = title && subTitle && subTitlePosition == ChartDonutSubTitlePosition.center;
+    return React.cloneElement(titleComponent, {
+      ...showBoth && { capHeight },
+      style: [DonutStyles.label.title, DonutStyles.label.subTitle],
+      text: showBoth ? [title, subTitle] : title,
+      textAnchor: 'middle',
+      verticalAnchor: 'middle',
+      x: getLabelX({
+        chartWidth: donutWidth,
+        dx: donutDx,
+        labelPosition: 'center',
+        legendPosition,
+        svgWidth: width
+      }),
+      y: getLabelY({
+        chartHeight: donutHeight,
+        dy: donutDy,
+        labelPosition: 'center'
+      }),
+      ...props
+    });
+  };
+
   const chart = (
     <React.Fragment>
-      <ChartLabel
-        style={[DonutStyles.label.title, DonutStyles.label.subTitle] as any} // Todo: Array supported, but @types/victory is wrong
-        text={title && subTitle ? [title, subTitle] : title}
-        textAnchor="middle"
-        verticalAnchor="middle"
-        x={width / 2}
-        y={height / 2}
-      />
       <ChartPie
-        height={height}
+        height={donutHeight}
         innerRadius={innerRadius > 0 ? innerRadius : 0}
         labelComponent={<ChartTooltip theme={theme} />}
+        origin={getChartOrigin({
+          chartHeight: donutHeight,
+          chartWidth: donutWidth,
+          dx: donutDx,
+          dy: donutDy,
+          legendPosition,
+          svgWidth: width
+        })}
         standalone={false}
         theme={theme}
-        width={width}
+        width={donutWidth}
         {...rest}
       />
     </React.Fragment>
   );
 
   return standalone ? (
-    <ChartContainer width={width} height={height}>
+    <ChartContainer height={height} width={width}>
       {chart}
+      {getLegend()}
+      {getTitle()}
+      {getSubTitle()}
     </ChartContainer>
   ) : (
-    chart
+    <React.Fragment>
+      {chart}
+      {getLegend()}
+      {getTitle()}
+      {getSubTitle()}
+    </React.Fragment>
   );
 };
 
-// Note: VictoryPie.role must be hoisted
+// Note: ChartPie.role must be hoisted
 hoistNonReactStatics(ChartDonut, ChartPie);
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
index 15a3d1b411c..544c59d361a 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap
@@ -5,23 +5,6 @@ exports[`Chart 1`] = `
   height={230}
   width={230}
 >
-  <Component
-    style={
-      Array [
-        Object {
-          "fontSize": 26,
-        },
-        Object {
-          "fill": "#bbb",
-          "fontSize": 16,
-        },
-      ]
-    }
-    textAnchor="middle"
-    verticalAnchor="middle"
-    x={115}
-    y={115}
-  />
   <Component
     height={230}
     innerRadius={98}
@@ -32,9 +15,10 @@ exports[`Chart 1`] = `
             "area": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -60,9 +44,10 @@ exports[`Chart 1`] = `
             "axis": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -108,9 +93,10 @@ exports[`Chart 1`] = `
               "barWidth": 10,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -134,9 +120,10 @@ exports[`Chart 1`] = `
               "boxWidth": 20,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -214,9 +201,10 @@ exports[`Chart 1`] = `
               },
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -240,9 +228,10 @@ exports[`Chart 1`] = `
             "chart": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -257,9 +246,10 @@ exports[`Chart 1`] = `
               "borderWidth": 8,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -284,9 +274,10 @@ exports[`Chart 1`] = `
             "group": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -295,9 +286,10 @@ exports[`Chart 1`] = `
             "legend": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "gutter": 20,
               "orientation": "horizontal",
@@ -327,9 +319,10 @@ exports[`Chart 1`] = `
             "line": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -354,9 +347,10 @@ exports[`Chart 1`] = `
             "pie": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 230,
               "padAngle": 1,
@@ -380,9 +374,10 @@ exports[`Chart 1`] = `
             "scatter": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -407,9 +402,10 @@ exports[`Chart 1`] = `
             "stack": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -446,9 +442,10 @@ exports[`Chart 1`] = `
             "voronoi": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -481,15 +478,22 @@ exports[`Chart 1`] = `
         }
       />
     }
+    origin={
+      Object {
+        "x": 115,
+        "y": 115,
+      }
+    }
     standalone={false}
     theme={
       Object {
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -515,9 +519,10 @@ exports[`Chart 1`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -563,9 +568,10 @@ exports[`Chart 1`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -589,9 +595,10 @@ exports[`Chart 1`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -669,9 +676,10 @@ exports[`Chart 1`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -695,9 +703,10 @@ exports[`Chart 1`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -712,9 +721,10 @@ exports[`Chart 1`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -739,9 +749,10 @@ exports[`Chart 1`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -750,9 +761,10 @@ exports[`Chart 1`] = `
         "legend": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "gutter": 20,
           "orientation": "horizontal",
@@ -782,9 +794,10 @@ exports[`Chart 1`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -809,9 +822,10 @@ exports[`Chart 1`] = `
         "pie": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 230,
           "padAngle": 1,
@@ -835,9 +849,10 @@ exports[`Chart 1`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -862,9 +877,10 @@ exports[`Chart 1`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -901,9 +917,10 @@ exports[`Chart 1`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -944,23 +961,6 @@ exports[`Chart 2`] = `
   height={230}
   width={230}
 >
-  <Component
-    style={
-      Array [
-        Object {
-          "fontSize": 26,
-        },
-        Object {
-          "fill": "#bbb",
-          "fontSize": 16,
-        },
-      ]
-    }
-    textAnchor="middle"
-    verticalAnchor="middle"
-    x={115}
-    y={115}
-  />
   <Component
     height={230}
     innerRadius={98}
@@ -971,9 +971,10 @@ exports[`Chart 2`] = `
             "area": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -999,9 +1000,10 @@ exports[`Chart 2`] = `
             "axis": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1047,9 +1049,10 @@ exports[`Chart 2`] = `
               "barWidth": 10,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1073,9 +1076,10 @@ exports[`Chart 2`] = `
               "boxWidth": 20,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1153,9 +1157,10 @@ exports[`Chart 2`] = `
               },
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1179,9 +1184,10 @@ exports[`Chart 2`] = `
             "chart": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1196,9 +1202,10 @@ exports[`Chart 2`] = `
               "borderWidth": 8,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1223,9 +1230,10 @@ exports[`Chart 2`] = `
             "group": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1234,9 +1242,10 @@ exports[`Chart 2`] = `
             "legend": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "gutter": 20,
               "orientation": "horizontal",
@@ -1266,9 +1275,10 @@ exports[`Chart 2`] = `
             "line": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1293,9 +1303,10 @@ exports[`Chart 2`] = `
             "pie": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 230,
               "padAngle": 1,
@@ -1319,9 +1330,10 @@ exports[`Chart 2`] = `
             "scatter": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1346,9 +1358,10 @@ exports[`Chart 2`] = `
             "stack": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1385,9 +1398,10 @@ exports[`Chart 2`] = `
             "voronoi": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1420,15 +1434,22 @@ exports[`Chart 2`] = `
         }
       />
     }
+    origin={
+      Object {
+        "x": 115,
+        "y": 115,
+      }
+    }
     standalone={false}
     theme={
       Object {
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1454,9 +1475,10 @@ exports[`Chart 2`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1502,9 +1524,10 @@ exports[`Chart 2`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1528,9 +1551,10 @@ exports[`Chart 2`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1608,9 +1632,10 @@ exports[`Chart 2`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1634,9 +1659,10 @@ exports[`Chart 2`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1651,9 +1677,10 @@ exports[`Chart 2`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1678,9 +1705,10 @@ exports[`Chart 2`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1689,9 +1717,10 @@ exports[`Chart 2`] = `
         "legend": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "gutter": 20,
           "orientation": "horizontal",
@@ -1721,9 +1750,10 @@ exports[`Chart 2`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1748,9 +1778,10 @@ exports[`Chart 2`] = `
         "pie": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 230,
           "padAngle": 1,
@@ -1774,9 +1805,10 @@ exports[`Chart 2`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1801,9 +1833,10 @@ exports[`Chart 2`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1840,9 +1873,10 @@ exports[`Chart 2`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1883,23 +1917,6 @@ exports[`renders component data 1`] = `
   height={200}
   width={200}
 >
-  <Component
-    style={
-      Array [
-        Object {
-          "fontSize": 26,
-        },
-        Object {
-          "fill": "#bbb",
-          "fontSize": 16,
-        },
-      ]
-    }
-    textAnchor="middle"
-    verticalAnchor="middle"
-    x={100}
-    y={100}
-  />
   <Component
     data={
       Array [
@@ -1926,9 +1943,10 @@ exports[`renders component data 1`] = `
             "area": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -1954,9 +1972,10 @@ exports[`renders component data 1`] = `
             "axis": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2002,9 +2021,10 @@ exports[`renders component data 1`] = `
               "barWidth": 10,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2028,9 +2048,10 @@ exports[`renders component data 1`] = `
               "boxWidth": 20,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2108,9 +2129,10 @@ exports[`renders component data 1`] = `
               },
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2134,9 +2156,10 @@ exports[`renders component data 1`] = `
             "chart": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2151,9 +2174,10 @@ exports[`renders component data 1`] = `
               "borderWidth": 8,
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2178,9 +2202,10 @@ exports[`renders component data 1`] = `
             "group": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2189,9 +2214,10 @@ exports[`renders component data 1`] = `
             "legend": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "gutter": 20,
               "orientation": "horizontal",
@@ -2221,9 +2247,10 @@ exports[`renders component data 1`] = `
             "line": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2248,9 +2275,10 @@ exports[`renders component data 1`] = `
             "pie": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 230,
               "padAngle": 1,
@@ -2274,9 +2302,10 @@ exports[`renders component data 1`] = `
             "scatter": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2301,9 +2330,10 @@ exports[`renders component data 1`] = `
             "stack": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2340,9 +2370,10 @@ exports[`renders component data 1`] = `
             "voronoi": Object {
               "colorScale": Array [
                 "#06c",
-                "#bee1f4",
-                "#73bcf7",
-                "#0066ff",
+                "#8bc1f7",
+                "#002f5d",
+                "#519de9",
+                "#004b95",
               ],
               "height": 300,
               "padding": 50,
@@ -2375,15 +2406,22 @@ exports[`renders component data 1`] = `
         }
       />
     }
+    origin={
+      Object {
+        "x": 100,
+        "y": 100,
+      }
+    }
     standalone={false}
     theme={
       Object {
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2409,9 +2447,10 @@ exports[`renders component data 1`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2457,9 +2496,10 @@ exports[`renders component data 1`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2483,9 +2523,10 @@ exports[`renders component data 1`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2563,9 +2604,10 @@ exports[`renders component data 1`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2589,9 +2631,10 @@ exports[`renders component data 1`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2606,9 +2649,10 @@ exports[`renders component data 1`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2633,9 +2677,10 @@ exports[`renders component data 1`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2644,9 +2689,10 @@ exports[`renders component data 1`] = `
         "legend": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "gutter": 20,
           "orientation": "horizontal",
@@ -2676,9 +2722,10 @@ exports[`renders component data 1`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2703,9 +2750,10 @@ exports[`renders component data 1`] = `
         "pie": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 230,
           "padAngle": 1,
@@ -2729,9 +2777,10 @@ exports[`renders component data 1`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2756,9 +2805,10 @@ exports[`renders component data 1`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -2795,9 +2845,10 @@ exports[`renders component data 1`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md b/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md
index e95f346a0b3..58b57466cae 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/ChartDonut.md
@@ -2,63 +2,181 @@
 title: 'Donut'
 section: 'charts'
 typescript: true
-propComponents: ['ChartDonut', 'ChartLegend']
+propComponents: ['ChartDonut']
 ---
 
-import { ChartDonut, ChartLegend, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
+import { ChartDonut, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 import './chart-donut.scss';
 
-## Blue donut chart
+## Simple donut chart
+```js
+import React from 'react';
+import { ChartDonut } from '@patternfly/react-charts';
 
+<div>
+  <div className="donut-chart">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      subTitle="Pets"
+      title="100"
+    />
+  </div>
+</div>
+```
+
+## Donut chart with right-aligned legend
 ```js
 import React from 'react';
-import { ChartDonut, ChartLegend } from '@patternfly/react-charts';
+import { ChartDonut } from '@patternfly/react-charts';
 
 <div>
-  <div className="donut-chart-inline">
-    <div className="donut-chart-container">
-      <ChartDonut
-        data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-        labels={datum => `${datum.x}: ${datum.y}`}
-        subTitle="Pets"
-        title="100"
-      />
-    </div>
-    <ChartLegend
-      data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-      height={230}
-      orientation="vertical"
-      responsive={false}
-      y={70}
+  <div className="donut-chart-legend-right">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
+      legendOrientation="vertical"
+      legendPosition="right"
+      subTitle="Pets"
+      title="100"
+      width={350}
     />
   </div>
 </div>
 ```
 
-## Multi-color donut chart
+## Multi-color donut chart with right-aligned legend
 ```js
 import React from 'react';
-import { ChartDonut, ChartLegend, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
+import { ChartDonut } from '@patternfly/react-charts';
 
 <div>
-  <div className="donut-chart-container">
+  <div className="donut-chart-legend-right">
     <ChartDonut
       data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-      labels={datum => `${datum.x}: ${datum.y}`}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
+      legendOrientation="vertical"
+      legendPosition="right"
       subTitle="Pets"
+      title="100"
       themeColor={ChartThemeColor.multi}
       themeVariant={ChartThemeVariant.light}
+      width={350}
+    />
+  </div>
+</div>
+```
+
+## Donut chart with bottom-aligned legend
+```js
+import React from 'react';
+import { ChartDonut } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-chart-legend-bottom">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      donutHeight={230}
+      donutOrientation="top"
+      height={275}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
+      legendPosition="bottom"
+      legendWidth={225}
+      subTitle="Pets"
+      title="100"
+      width={300}
+    />
+  </div>
+</div>
+```
+
+## Small donut chart
+```js
+import React from 'react';
+import { ChartDonut } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-chart-sm">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      height={150}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      subTitle="Pets"
+      title="100"
+      width={150}
+    />
+  </div>
+</div>
+```
+
+## Small donut chart with right-aligned legend
+```js
+import React from 'react';
+import { ChartDonut } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-chart-legend-right-sm">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      height={150}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
+      legendOrientation="vertical"
+      legendPosition="right"
+      subTitle="Pets"
+      title="100"
+      width={275}
+    />
+  </div>
+</div>
+```
+
+## Small donut chart with right-aligned legend and bottom-aligned subtitle
+```js
+import React from 'react';
+import { ChartDonut } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-chart-legend-right-subtitle-bottom-sm">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      donutHeight={150}
+      height={175}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
+      legendOrientation="vertical"
+      legendPosition="right"
+      subTitle="Pets"
+      subTitlePosition="bottom"
+      title="100"
+      width={275}
+    />
+  </div>
+</div>
+```
+
+## Small donut chart with bottom-aligned legend and right-aligned subtitle
+```js
+import React from 'react';
+import { ChartDonut } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-chart-legend-bottom-subtitle-right-sm">
+    <ChartDonut
+      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+      donutHeight={150}
+      height={200}
+      labels={datum => `${datum.x}: ${datum.y}%`}
+      legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
+      legendPosition="bottom"
+      subTitle="Pets"
+      subTitlePosition="right"
       title="100"
+      width={300}
     />
   </div>
-  <ChartLegend
-    data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
-    height={35}
-    orientation={'horizontal'}
-    responsive={false}
-    themeColor={ChartThemeColor.multi}
-    themeVariant={ChartThemeVariant.light}
-    x={8}
-  />
 </div>
 ```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/chart-donut.scss b/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/chart-donut.scss
index e22c971e11a..d5c73e3ff43 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/chart-donut.scss
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonut/examples/chart-donut.scss
@@ -1,12 +1,38 @@
 .ws-preview {
   & > * {
-    .donut-chart-container {
+    .donut-chart {
       height: 230px;
       width: 230px;
     }
 
-    .donut-chart-inline {
-      display: inline-flex;
+    .donut-chart-sm {
+      height: 150px;
+      width: 150px;
+    }
+
+    .donut-chart-legend-bottom {
+      height: 275px;
+      width: 300px;
+    }
+
+    .donut-chart-legend-right {
+      height: 230px;
+      width: 350px;
+    }
+
+    .donut-chart-legend-right-sm {
+      height: 150px;
+      width: 275px;
+    }
+
+    .donut-chart-legend-right-subtitle-bottom-sm {
+      height: 175px;
+      width: 275px;
+    }
+
+    .donut-chart-legend-bottom-subtitle-right-sm {
+      height: 200px;
+      width: 300px;
     }
   }
 }
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
index fde2c785622..163404d2277 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutThreshold.tsx
@@ -2,17 +2,21 @@ import * as React from 'react';
 import {
   AnimatePropTypeInterface,
   CategoryPropType,
-  ColorScalePropType, DataGetterPropType,
-  EventPropTypeInterface, PaddingProps,
-  StringOrNumberOrCallback, VictoryStyleInterface
+  ColorScalePropType,
+  DataGetterPropType,
+  EventPropTypeInterface,
+  PaddingProps,
+  StringOrNumberOrCallback,
+  VictoryStyleInterface
 } from "victory";
 import { Data } from 'victory-core';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { ChartContainer } from '../ChartContainer/ChartContainer';
-import { ChartPie, ChartPieProps } from '../ChartPie/ChartPie';
+import { ChartDonut, ChartDonutProps } from '../ChartDonut/ChartDonut';
 import { ChartThemeDefinition } from "../ChartTheme/ChartTheme";
 import { getChartOrigin } from '../ChartUtils/chart-origin';
 import { getDonutThresholdDynamicTheme, getDonutThresholdStaticTheme } from '../ChartUtils/chart-theme';
+import { DonutStyles } from "../ChartTheme/themes/donut-theme";
 
 export enum ChartDonutThresholdDonutOrientation {
   left = 'left',
@@ -31,15 +35,26 @@ export enum ChartDonutThresholdLabelPosition {
   startAngle = 'startAngle'
 };
 
+export enum ChartDonutThresholdLegendPosition {
+  bottom = 'bottom',
+  right = 'right'
+};
+
 export enum ChartDonutThresholdSortOrder {
   ascending = 'ascending',
   descending = 'descending'
 };
 
+export enum ChartDonutThresholdSubTitlePosition {
+  bottom = 'bottom',
+  center = 'center',
+  right = 'right'
+}
+
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
  */
-export interface ChartDonutThresholdProps extends ChartPieProps {
+export interface ChartDonutThresholdProps extends ChartDonutProps {
   /**
    * See Victory type docs: https://formidable.com/open-source/victory/docs/victory-pie/
    */
@@ -122,14 +137,16 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the
-   * innerRadius may need to be set when using this property.
+   * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate
+   * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut
+   * height.
+   *
+   * The innerRadius may also need to be set when changing the donut size.
    */
   donutHeight?: number;
-  /**
-   * The orientation of the donut chart in relation to the legend. Valid values are 'left', 'top', and 'right'
-   */
-  donutOrientation?: 'left' | 'right' | 'top';
   /**
    * Specifies the width of the donut chart. This value should be given as a
    * number of pixels.
@@ -138,8 +155,13 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the
-   * innerRadius may need to be set when using this property.
+   * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate
+   * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width.
+   *
+   * The innerRadius may also need to be set when changing the donut size.
    */
   donutWidth?: number;
   /**
@@ -211,7 +233,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: innerRadius may need to be set when using this property.
+   * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * Typically, the parent container is set to the same height in order to maintain the aspect ratio.
    */
   height?: number;
   /**
@@ -234,13 +259,17 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
    * @example ["spring", "summer", "fall", "winter"], (datum) => datum.title
    */
   labels?: string[] | ((data: any) => string);
+  /**
+   * The legend position relation to the donut chart. Valid values are 'bottom' and 'right'
+   */
+  legendPosition?: 'bottom' | 'right';
   /**
    * The name prop is used to reference a component instance when defining shared events.
    */
   name?: string;
   /**
    * Victory components will pass an origin prop is to define the center point in svg coordinates for polar charts.
-   * **This prop should not be set manually.**
+   * It should not be set manually.**
    */
   origin?: { x: number, y: number };
   /**
@@ -301,6 +330,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
    * The subtitle for the donut chart
    */
   subTitle?: string;
+  /**
+   * The orientation of the donut chart in relation to the legend. Valid values are 'bottom', 'center', and 'right'
+   */
+  subTitlePosition?: 'bottom' | 'center' | 'right';
   /**
    * The theme prop takes a style object with nested data, labels, and parent objects.
    * You can create this object yourself, or you can use a theme provided by
@@ -344,7 +377,10 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: innerRadius may need to be set when using this property.
+   * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * Typically, the parent container is set to the same width in order to maintain the aspect ratio.
    */
   width?: number;
   /**
@@ -374,8 +410,12 @@ export interface ChartDonutThresholdProps extends ChartPieProps {
 export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdProps> = ({
   children,
   data = [],
-  donutOrientation = 'left',
+  labels = [], // Don't show any tooltip labels by default, let consumer override if needed
+  legendComponent,
+  legendData,
+  legendPosition = DonutStyles.legend.position as ChartDonutThresholdLegendPosition,
   standalone = true,
+  subTitlePosition = DonutStyles.label.subTitlePosition as ChartDonutThresholdSubTitlePosition,
   themeColor,
   themeVariant,
   x,
@@ -383,84 +423,136 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
 
   // destructure last
   theme = getDonutThresholdStaticTheme(themeColor, themeVariant),
-  donutHeight = theme.pie.height,
-  donutWidth = theme.pie.width,
   height = theme.pie.height,
-  innerRadius = ((donutHeight || donutWidth) - 34) / 2,
   width = theme.pie.width,
+  donutHeight = Math.min(height, width),
+  donutWidth = Math.min(height, width, donutHeight),
   ...rest
 }: ChartDonutThresholdProps) => {
+
   // Returns computed data representing pie chart slices
   const getComputedData = () => {
-    const computedData = [];
-    const datum = getData(data);
-    let prevYVal = 0;
-    datum.forEach((dataPoint: {_x?: any, _y: any}) => {
-      computedData.push({ x: dataPoint._x, y: dataPoint._y ? Math.abs(dataPoint._y - prevYVal) : 0 });
-      prevYVal = dataPoint._y;
-    });
-    computedData.push({ y: prevYVal ? Math.abs(100 - prevYVal) : 0 });
-    return computedData;
+    // Format and sort data. Sorting ensures thresholds are displayed in the correct order and simplifies calculations.
+    const datum = Data.formatData(data, {x, y, ...rest}, ['x', 'y']).sort((a: any,b: any) => a._y - b._y);
+
+    // Data must be offset so that the sum of all data point y-values (including the final slice) == 100.
+    const [prev, computedData] = datum.reduce((acc: [number, any], dataPoint: {_x: number | string, _y: number}) => {
+      return [
+        dataPoint._y, // Set the previous value to current y value
+        [
+          ...acc[1],
+          {
+            x: dataPoint._x, // Conditionally add x property only if it is in the original data object
+            y: dataPoint._y - acc[0] // Must be offset by previous value
+          }
+        ]
+      ];
+    }, [0, []]);
+
+    return [
+      ...computedData,
+      {
+        y: prev ? (100 - prev) : 0
+      }
+    ];
   };
 
-  const getData = (datum: any[]) => {
-    const accessorTypes = ['x', 'y'];
-    return Data.formatData(datum, { x, y, ...rest }, accessorTypes);
+  // Returns the horizontal shift for the donut utilization chart
+  const getDonutDx = (dynamicTheme: ChartThemeDefinition, legendPosition: string) => {
+    const dynamicWidth = donutWidth - (theme.pie.width - dynamicTheme.pie.width);
+    switch (legendPosition) {
+      case 'right':
+        return Math.round((donutWidth - dynamicWidth) / 2);
+      default:
+        return 0;
+    }
   };
 
-  // Returns the horizontal shift for the dynamic utilization donut cart
-  const getDynamicDonutDx = (dynamicTheme: ChartThemeDefinition, orientation: string) => {
-    switch (orientation) {
-      case 'left':
-        return Math.round((theme.pie.width - dynamicTheme.pie.width) / 2);
+  // Returns the vertical shift for the donut utilization chart
+  const getDonutDy = (dynamicTheme: ChartThemeDefinition) => {
+    const dynamicHeight = donutHeight - (theme.pie.height - dynamicTheme.pie.height);
+    return Math.round((donutHeight - dynamicHeight) / 2);
+  }
+
+  // Returns the horizontal shift for the donut utilization legend
+  const getLegendDx = (dynamicTheme: ChartThemeDefinition, position: string) => {
+    const dynamicWidth = donutWidth - (theme.pie.width - dynamicTheme.pie.width);
+    switch (position) {
       case 'right':
-        return -Math.round((theme.pie.width - dynamicTheme.pie.width) / 2);
+        return getDonutDx(dynamicTheme, legendPosition) + Math.round((donutWidth - dynamicWidth) / 2);
       default:
         return 0;
     }
   };
 
-  // Returns the vertical shift for the dynamic utilization donut cart
-  const getDynamicDonutDy = (dynamicTheme: ChartThemeDefinition) =>
-    Math.round((theme.pie.height - dynamicTheme.pie.height) / 2);
+  // Returns the vertical shift for the donut utilization legend and subtitle
+  const getLegendAndSubTitleDy = (dynamicTheme: ChartThemeDefinition, position: string) => {
+    const dynamicWidth = donutWidth - (theme.pie.width - dynamicTheme.pie.width);
+    switch (position) {
+      case 'bottom':
+        return getDonutDy(dynamicTheme) + Math.round((donutWidth - dynamicWidth) / 2);
+      default:
+        return getDonutDy(dynamicTheme);
+    }
+  }
+
+  // Returns the horizontal shift for the donut utilization subtitle
+  const getSubTitleDx = (dynamicTheme: ChartThemeDefinition, position: string) => {
+    const dynamicWidth = donutWidth - (theme.pie.width - dynamicTheme.pie.width);
+    switch (position) {
+      case 'right':
+        return getDonutDx(dynamicTheme, legendPosition) + Math.round((donutWidth - dynamicWidth) / 2);
+      default:
+        return Math.round((donutWidth - dynamicWidth) / 2);
+    }
+  };
 
   // Render dynamic utilization donut cart
   const renderChildren = () =>
     React.Children.toArray(children).map(child => {
-      const datum = getData([{ ...child.props.data }]);
-      const orientation = child.props.donutOrientation || donutOrientation;
-      const dynamicTheme =
-        child.props.theme ||
-        getDonutThresholdDynamicTheme(child.props.themeColor || themeColor,
-          child.props.themeVariant || themeVariant);
-      return React.cloneElement(child, {
-        donutDx: child.props.donutDx || getDynamicDonutDx(dynamicTheme, orientation),
-        donutDy: child.props.donutDy || getDynamicDonutDy(dynamicTheme),
-        donutHeight: child.props.donutHeight || dynamicTheme.pie.height,
-        donutOrientation: orientation,
-        donutWidth: child.props.donutWidth || dynamicTheme.pie.width,
-        endAngle: child.props.endAngle || 360 * (datum[0]._y ? datum[0]._y / 100 : 100),
-        height: child.props.height || height,
-        showStatic: child.props.showStatic || false,
-        standalone: false,
-        theme: dynamicTheme,
-        width: child.props.width || width
-      });
+      if (child.props) {
+        const { data: childData, ...childProps } = child.props;
+        const datum = Data.formatData([childData], childProps, ['x', 'y']); // Format child data independently of this component's props
+        const dynamicTheme = childProps.theme ||
+          getDonutThresholdDynamicTheme(childProps.themeColor || themeColor,
+            childProps.themeVariant || themeVariant);
+        const legendPos = childProps.legendPosition || legendPosition;
+        const subTitlePos = childProps.subTitlePosition || subTitlePosition;
+        return React.cloneElement(child, {
+          data: childData,
+          donutDx: getDonutDx(dynamicTheme, legendPos),
+          donutDy: getDonutDy(dynamicTheme),
+          donutHeight: donutHeight - (theme.pie.height - dynamicTheme.pie.height),
+          donutWidth: donutWidth - (theme.pie.width - dynamicTheme.pie.width),
+          endAngle: 360 * (datum[0]._y ? datum[0]._y / 100 : 0),
+          height,
+          legendDx: getLegendDx(dynamicTheme, legendPos),
+          legendDy: getLegendAndSubTitleDy(dynamicTheme, legendPos),
+          legendPosition: legendPos,
+          showStatic: false,
+          standalone: false,
+          subTitleDx: getSubTitleDx(dynamicTheme, subTitlePos),
+          subTitleDy: getLegendAndSubTitleDy(dynamicTheme, subTitlePos),
+          subTitlePosition: subTitlePos,
+          theme: dynamicTheme,
+          width,
+          ...childProps,
+        });
+      }
     });
 
   // Static threshold dount chart
   const chart = (
     <React.Fragment>
-      <ChartPie
+      <ChartDonut
         data={getComputedData()}
         height={donutHeight}
-        innerRadius={innerRadius > 0 ? innerRadius : 0}
+        labels={labels}
         origin={getChartOrigin({
           chartHeight: donutHeight,
           chartWidth: donutWidth,
-          chartOrientation: donutOrientation,
-          height,
-          width
+          legendPosition,
+          svgWidth: width
         })}
         standalone={false}
         theme={theme}
@@ -480,5 +572,5 @@ export const ChartDonutThreshold: React.FunctionComponent<ChartDonutThresholdPro
   );
 };
 
-// Note: ChartPie.role must be hoisted
-hoistNonReactStatics(ChartDonutThreshold, ChartPie);
+// Note: ChartDonut.role must be hoisted
+hoistNonReactStatics(ChartDonutThreshold, ChartDonut);
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
index 425be3bd16e..78ff0daf82b 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
@@ -8,35 +8,29 @@ import {
   EventPropTypeInterface,
   PaddingProps,
   StringOrNumberOrCallback,
-  VictoryLegend,
   VictoryStyleInterface
 } from 'victory';
 import { Data } from 'victory-core';
-import { getDonutUtilizationTheme } from '../ChartUtils/chart-theme';
 import { ChartContainer } from '../ChartContainer/ChartContainer';
-import { ChartLabel } from '../ChartLabel/ChartLabel';
-import { ChartLegend } from '../ChartLegend/ChartLegend';
-import { ChartPie, ChartPieProps } from "../ChartPie/ChartPie";
-import { DonutUtilizationStyles } from '../ChartTheme/themes/donut-utilization-theme';
+import { ChartDonut, ChartDonutProps } from "../ChartDonut/ChartDonut";
 import { ChartThemeDefinition, ChartDonutUtilizationStaticTheme } from '../ChartTheme/ChartTheme';
-import { getChartOrigin, getChartOriginX, getChartOriginY } from '../ChartUtils/chart-origin';
-import { getLegendX, getLegendY } from '../ChartUtils/chart-legend';
+import { getDonutUtilizationTheme } from '../ChartUtils/chart-theme';
+import { DonutUtilizationStyles } from '../ChartTheme/themes/donut-utilization-theme';
 
-export enum ChartDonutUtilizationDonutOrientation {
-  left = 'left',
-  right = 'right',
-  top = 'top'
+export enum ChartDonutUtilizationLabelPosition {
+  centroid = 'centroid',
+  endAngle = 'endAngle',
+  startAngle = 'startAngle'
 };
 
-export enum ChartDonutUtilizationLabelOrientation {
+export enum ChartDonutUtilizationLegendOrientation {
   horizontal = 'horizontal',
   vertical = 'vertical'
 };
 
-export enum ChartDonutUtilizationLabelPosition {
-  centroid = 'centroid',
-  endAngle = 'endAngle',
-  startAngle = 'startAngle'
+export enum ChartDonutUtilizationLegendPosition {
+  bottom = 'bottom',
+  right = 'right'
 };
 
 export enum ChartDonutUtilizationSortOrder {
@@ -44,10 +38,16 @@ export enum ChartDonutUtilizationSortOrder {
   descending = 'descending'
 };
 
+export enum ChartDonutUtilizationSubTitlePosition {
+  bottom = 'bottom',
+  center = 'center',
+  right = 'right'
+}
+
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
  */
-export interface ChartDonutUtilizationProps extends ChartPieProps {
+export interface ChartDonutUtilizationProps extends ChartDonutProps {
   /**
    * See Victory type docs: https://formidable.com/open-source/victory/docs/victory-pie/
    */
@@ -60,6 +60,13 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * {duration: 500, onExit: () => {}, onEnter: {duration: 500, before: () => ({y: 0})})}
    */
   animate?: AnimatePropTypeInterface;
+  /**
+   * The capHeight prop defines a text metric for the font being used: the expected height of capital letters.
+   * This is necessary because of SVG, which (a) positions the *bottom* of the text at `y`, and (b) has no notion of
+   * line height. The value should ideally use the same units as `lineHeight` and `dy`, preferably ems. If given a
+   * unitless number, it is assumed to be ems.
+   */
+  capHeight?: StringOrNumberOrCallback;
   /**
    * The categories prop specifies how categorical data for a chart should be ordered.
    * This prop should be given as an array of string values, or an object with
@@ -119,11 +126,11 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    */
   dataComponent?: React.ReactElement<any>;
   /**
-   * Defines a horizontal shift from the x coordinate. This should not be set manually.
+   * Defines a horizontal shift from the x coordinate. It should not be set manually.
    */
   donutDx?: number;
   /**
-   * Defines a vertical shift from the y coordinate. This should not be set manually.
+   * Defines a vertical shift from the y coordinate. It should not be set manually.
    */
   donutDy?: number;
   /**
@@ -134,14 +141,16 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the
-   * innerRadius may need to be set when using this property.
+   * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * By default, donutHeight is the min. of either height or width. This covers most use cases in order to accommodate
+   * legends within the same SVG. However, donutHeight (not height) may need to be set in order to adjust the donut
+   * height.
+   *
+   * The innerRadius may also need to be set when changing the donut size.
    */
   donutHeight?: number;
-  /**
-   * The orientation of the donut chart in relation to the legend. Valid values are 'left', 'top', and 'right'
-   */
-  donutOrientation?: 'left' | 'right' | 'top';
   /**
    * Specifies the width of the donut chart. This value should be given as a
    * number of pixels.
@@ -150,10 +159,23 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: The parent container must be set to the same height in order to maintain the aspect ratio. Otherwise, the
-   * innerRadius may need to be set when using this property.
+   * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * By default, donutWidth is the min. of either height or width. This covers most use cases in order to accommodate
+   * legends within the same SVG. However, donutWidth (not width) may need to be set in order to adjust the donut width.
+   *
+   * The innerRadius may also need to be set when changing the donut size.
    */
   donutWidth?: number;
+  /**
+   * Defines a horizontal shift from the x coordinate for legend and subtitle. It should not be set manually.
+   */
+  dx?: number;
+  /**
+   * Defines a vertical shift from the y coordinate for legend and subtitle. It should not be set manually.
+   */
+  dy?: number;
   /**
    * The overall end angle of the pie in degrees. This prop is used in conjunction with
    * startAngle to create a pie that spans only a segment of a circle.
@@ -223,7 +245,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: innerRadius may need to be set when using this property.
+   * Note: When adding a legend, height (the overall SVG height) may need to be larger than donutHeight (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * Typically, the parent container is set to the same height in order to maintain the aspect ratio.
    */
   height?: number;
   /**
@@ -250,7 +275,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    */
   labelPosition?: 'startAngle' | 'endAngle' | 'centroid';
   /**
-   * The legend component to render with chart. This overrides other legend props.
+   * The legend component to render with chart.
+   *
+   * Note: Use legendData so the legend width can be calculated and positioned properly.
+   * Default legend properties may be applied
    */
   legendComponent?: React.ReactElement<any>;
   /**
@@ -261,11 +289,17 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * Each data point may be any format you wish (depending on the `x` and `y` accessor props),
    * but by default, an object with x and y properties is expected.
    *
-   * Note: Not compatible with legendComponent prop.
-   *
    * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
    */
   legendData?: any[];
+  /**
+   * Defines a horizontal shift from the x coordinate. It should not be set manually.
+   */
+  legendDx?: number;
+  /**
+   * Defines a vertical shift from the y coordinate. It should not be set manually.
+   */
+  legendDy?: number;
   /**
    * The orientation prop takes a string that defines whether legend data
    * are displayed in a row or column. When orientation is "horizontal",
@@ -274,11 +308,12 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * and text-wrapping is not currently supported, so "vertical"
    * orientation is both the default setting and recommended for
    * displaying many series of data.
-   *
-   * Note: May need to set legendHeight and legendWidth in order to position properly.
-   * Not compatible with legendComponent prop.
    */
   legendOrientation?: 'horizontal' | 'vertical';
+  /**
+   * The legend position relation to the donut chart. Valid values are 'bottom' and 'right'
+   */
+  legendPosition?: 'bottom' | 'right';
   /**
    * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.
    * If this prop is not set, the label radius will default to the radius of the pie + label padding.
@@ -324,7 +359,7 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    */
   sharedEvents?: any;
   /**
-   * This will show the static, unused portion of the donut chart
+   * This will show the static, unused portion of the donut chart. It should not be set manually.
    */
   showStatic?: boolean;
   /**
@@ -356,9 +391,27 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    */
   style?: VictoryStyleInterface;
   /**
-   * The subtitle for the donut chart
+   * The subtitle for the donut chart label
    */
   subTitle?: string;
+  /**
+   * The label component to render the chart subTitle.
+   *
+   * Note: Default label properties may be applied
+   */
+  subTitleComponent?: React.ReactElement<any>;
+  /**
+   * Defines a horizontal shift from the x coordinate. It should not be set manually.
+   */
+  subTitleDx?: number;
+  /**
+   * Defines a vertical shift from the y coordinate. It should not be set manually.
+   */
+  subTitleDy?: number;
+  /**
+   * The orientation of the donut chart in relation to the legend. Valid values are 'bottom', 'center', and 'right'
+   */
+  subTitlePosition?: 'bottom' | 'center' | 'right';
   /**
    * The theme prop takes a style object with nested data, labels, and parent objects.
    * You can create this object yourself, or you can use a theme provided by
@@ -384,7 +437,7 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    */
   themeVariant?: string;
   /**
-   * The title for the donut chart
+   * The title for the donut chart label
    */
   title?: string;
   /**
@@ -402,7 +455,10 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
    * pixels will depend on the size of the container the chart is rendered into.
    *
-   * Note: innerRadius may need to be set when using this property.
+   * Note: When adding a legend, width (the overall SVG width) may need to be larger than donutWidth (the donut size)
+   * in order to accommodate the extra legend.
+   *
+   * Typically, the parent container is set to the same width in order to maintain the aspect ratio.
    */
   width?: number;
   /**
@@ -431,29 +487,20 @@ export interface ChartDonutUtilizationProps extends ChartPieProps {
 
 export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizationProps> = ({
   data,
-  donutDx = 0,
-  donutDy = 0,
-  donutOrientation = 'left',
-  legendComponent,
-  legendData,
-  legendOrientation = DonutUtilizationStyles.legend.orientation as ChartDonutUtilizationLabelOrientation,
   showStatic = true,
   standalone = true,
-  subTitle,
   themeColor,
   themeVariant,
   thresholds,
-  title,
   x,
   y,
 
   // destructure last
   theme = getDonutUtilizationTheme(themeColor, themeVariant),
-  donutHeight = theme.pie.height,
-  donutWidth = theme.pie.width,
   height = theme.pie.height,
-  innerRadius = ((donutHeight || donutWidth) - 34) / 2,
   width = theme.pie.width,
+  donutHeight = Math.min(height, width),
+  donutWidth = Math.min(height, width, donutHeight),
   ...rest
 }: ChartDonutUtilizationProps) => {
   // Returns computed data representing pie chart slices
@@ -487,41 +534,6 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
     return result;
   };
 
-  // Returns legend
-  const getLegend = () => {
-    if (legendComponent) {
-      return legendComponent;
-    }
-    if (legendData) {
-      return (
-        <ChartLegend
-          data={legendData}
-          orientation={legendOrientation}
-          standalone={false}
-          theme={theme}
-          x={getLegendX({
-            chartOrientation: donutOrientation,
-            legendOrientation,
-            legendWidth: legendDimensions.width,
-            theme,
-            width
-          })}
-          y={getLegendY({
-            chartDy: donutDy,
-            chartHeight: donutHeight,
-            chartOrientation: donutOrientation,
-            chartType: 'pie',
-            height,
-            legendData,
-            legendHeight: legendDimensions.height,
-            theme
-          })}
-        />
-      );
-    }
-    return null;
-  };
-
   // Returns theme based on threshold and current value
   const getThresholdTheme = () => {
     const newTheme = { ...theme };
@@ -543,51 +555,16 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
     return newTheme;
   };
 
-  // Legend dimensions
-  const legendDimensions = legendData
-    ? (VictoryLegend as any).getDimensions({
-        data: legendData,
-        orientation: legendOrientation,
-        theme
-      })
-    : {};
-
   const chart = (
     <React.Fragment>
-      <ChartLabel
-        style={[DonutUtilizationStyles.label.title, DonutUtilizationStyles.label.subTitle] as any} // Todo: Array supported, but @types/victory is wrong
-        text={title && subTitle ? [title, subTitle] : title}
-        textAnchor="middle"
-        verticalAnchor="middle"
-        x={getChartOriginX({
-          chartDx: donutDx,
-          chartWidth: donutWidth,
-          chartOrientation: donutOrientation,
-          width
-        })}
-        y={getChartOriginY({
-          chartDy: donutDy,
-          chartHeight: donutHeight,
-          chartOrientation: donutOrientation,
-          height
-        })}
-      />
-      <ChartPie
+      <ChartDonut
         data={getComputedData()}
-        height={donutHeight}
-        innerRadius={innerRadius > 0 ? innerRadius : 0}
-        origin={getChartOrigin({
-          chartDx: donutDx,
-          chartDy: donutDy,
-          chartHeight: donutHeight,
-          chartWidth: donutWidth,
-          chartOrientation: donutOrientation,
-          height,
-          width
-        })}
+        donutHeight={donutHeight}
+        donutWidth={donutWidth}
+        height={height}
         standalone={false}
         theme={getThresholdTheme()}
-        width={donutWidth}
+        width={width}
         {...rest}
       />
     </React.Fragment>
@@ -596,15 +573,13 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
   return standalone ? (
     <ChartContainer height={height} width={width}>
       {chart}
-      {getLegend()}
     </ChartContainer>
   ) : (
     <React.Fragment>
       {chart}
-      {getLegend()}
     </React.Fragment>
   );
 };
 
-// Note: ChartPie.role must be hoisted
-hoistNonReactStatics(ChartDonutUtilization, ChartPie);
+// Note: ChartDonut.role must be hoisted
+hoistNonReactStatics(ChartDonutUtilization, ChartDonut);
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
index d0248e98d5e..4f4666aae4d 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`Chart 1`] = `
       ]
     }
     height={230}
-    innerRadius={98}
+    labels={Array []}
     origin={
       Object {
         "x": 115,
@@ -27,9 +27,10 @@ exports[`Chart 1`] = `
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -55,9 +56,10 @@ exports[`Chart 1`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -103,9 +105,10 @@ exports[`Chart 1`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -129,9 +132,10 @@ exports[`Chart 1`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -209,9 +213,10 @@ exports[`Chart 1`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -235,9 +240,10 @@ exports[`Chart 1`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -252,9 +258,10 @@ exports[`Chart 1`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -279,9 +286,10 @@ exports[`Chart 1`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -290,9 +298,10 @@ exports[`Chart 1`] = `
         "legend": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "gutter": 20,
           "orientation": "horizontal",
@@ -322,9 +331,10 @@ exports[`Chart 1`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -351,7 +361,8 @@ exports[`Chart 1`] = `
             "#EDEDED",
             "#D2D2D2",
             "#BBBBBB",
-            "#0066ff",
+            "#519de9",
+            "#004b95",
           ],
           "height": 230,
           "padAngle": 1,
@@ -375,9 +386,10 @@ exports[`Chart 1`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -402,9 +414,10 @@ exports[`Chart 1`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -441,9 +454,10 @@ exports[`Chart 1`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -493,7 +507,7 @@ exports[`Chart 2`] = `
       ]
     }
     height={230}
-    innerRadius={98}
+    labels={Array []}
     origin={
       Object {
         "x": 115,
@@ -506,9 +520,10 @@ exports[`Chart 2`] = `
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -534,9 +549,10 @@ exports[`Chart 2`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -582,9 +598,10 @@ exports[`Chart 2`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -608,9 +625,10 @@ exports[`Chart 2`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -688,9 +706,10 @@ exports[`Chart 2`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -714,9 +733,10 @@ exports[`Chart 2`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -731,9 +751,10 @@ exports[`Chart 2`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -758,9 +779,10 @@ exports[`Chart 2`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -769,9 +791,10 @@ exports[`Chart 2`] = `
         "legend": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "gutter": 20,
           "orientation": "horizontal",
@@ -801,9 +824,10 @@ exports[`Chart 2`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -830,7 +854,8 @@ exports[`Chart 2`] = `
             "#EDEDED",
             "#D2D2D2",
             "#BBBBBB",
-            "#0066ff",
+            "#519de9",
+            "#004b95",
           ],
           "height": 230,
           "padAngle": 1,
@@ -854,9 +879,10 @@ exports[`Chart 2`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -881,9 +907,10 @@ exports[`Chart 2`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -920,9 +947,10 @@ exports[`Chart 2`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -966,29 +994,29 @@ exports[`renders component data 1`] = `
   <Component
     data={
       Array [
+        Object {
+          "x": "Birds",
+          "y": 10,
+        },
         Object {
           "x": "Cats",
-          "y": 35,
+          "y": 25,
         },
         Object {
           "x": "Dogs",
           "y": 20,
         },
         Object {
-          "x": "Birds",
           "y": 45,
         },
-        Object {
-          "y": 90,
-        },
       ]
     }
-    height={230}
-    innerRadius={98}
+    height={200}
+    labels={Array []}
     origin={
       Object {
-        "x": 115,
-        "y": 115,
+        "x": 100,
+        "y": 100,
       }
     }
     standalone={false}
@@ -997,9 +1025,10 @@ exports[`renders component data 1`] = `
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1025,9 +1054,10 @@ exports[`renders component data 1`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1073,9 +1103,10 @@ exports[`renders component data 1`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1099,9 +1130,10 @@ exports[`renders component data 1`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1179,9 +1211,10 @@ exports[`renders component data 1`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1205,9 +1238,10 @@ exports[`renders component data 1`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1222,9 +1256,10 @@ exports[`renders component data 1`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1249,9 +1284,10 @@ exports[`renders component data 1`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1260,9 +1296,10 @@ exports[`renders component data 1`] = `
         "legend": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "gutter": 20,
           "orientation": "horizontal",
@@ -1292,9 +1329,10 @@ exports[`renders component data 1`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1321,7 +1359,8 @@ exports[`renders component data 1`] = `
             "#EDEDED",
             "#D2D2D2",
             "#BBBBBB",
-            "#0066ff",
+            "#519de9",
+            "#004b95",
           ],
           "height": 230,
           "padAngle": 1,
@@ -1345,9 +1384,10 @@ exports[`renders component data 1`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1372,9 +1412,10 @@ exports[`renders component data 1`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1411,9 +1452,10 @@ exports[`renders component data 1`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1444,7 +1486,7 @@ exports[`renders component data 1`] = `
         },
       }
     }
-    width={230}
+    width={200}
   />
 </Component>
 `;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
index 31cd7c1e016..f7f12c93152 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap
@@ -5,23 +5,6 @@ exports[`Chart 1`] = `
   height={230}
   width={230}
 >
-  <Component
-    style={
-      Array [
-        Object {
-          "fontSize": 26,
-        },
-        Object {
-          "fill": "#bbb",
-          "fontSize": 16,
-        },
-      ]
-    }
-    textAnchor="middle"
-    verticalAnchor="middle"
-    x={115}
-    y={115}
-  />
   <Component
     data={
       Array [
@@ -34,23 +17,19 @@ exports[`Chart 1`] = `
         },
       ]
     }
+    donutHeight={230}
+    donutWidth={230}
     height={230}
-    innerRadius={98}
-    origin={
-      Object {
-        "x": 115,
-        "y": 115,
-      }
-    }
     standalone={false}
     theme={
       Object {
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -76,9 +55,10 @@ exports[`Chart 1`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -124,9 +104,10 @@ exports[`Chart 1`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -150,9 +131,10 @@ exports[`Chart 1`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -230,9 +212,10 @@ exports[`Chart 1`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -256,9 +239,10 @@ exports[`Chart 1`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -273,9 +257,10 @@ exports[`Chart 1`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -300,9 +285,10 @@ exports[`Chart 1`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -343,9 +329,10 @@ exports[`Chart 1`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -394,9 +381,10 @@ exports[`Chart 1`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -421,9 +409,10 @@ exports[`Chart 1`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -460,9 +449,10 @@ exports[`Chart 1`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -503,23 +493,6 @@ exports[`Chart 2`] = `
   height={230}
   width={230}
 >
-  <Component
-    style={
-      Array [
-        Object {
-          "fontSize": 26,
-        },
-        Object {
-          "fill": "#bbb",
-          "fontSize": 16,
-        },
-      ]
-    }
-    textAnchor="middle"
-    verticalAnchor="middle"
-    x={115}
-    y={115}
-  />
   <Component
     data={
       Array [
@@ -532,23 +505,19 @@ exports[`Chart 2`] = `
         },
       ]
     }
+    donutHeight={230}
+    donutWidth={230}
     height={230}
-    innerRadius={98}
-    origin={
-      Object {
-        "x": 115,
-        "y": 115,
-      }
-    }
     standalone={false}
     theme={
       Object {
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -574,9 +543,10 @@ exports[`Chart 2`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -622,9 +592,10 @@ exports[`Chart 2`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -648,9 +619,10 @@ exports[`Chart 2`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -728,9 +700,10 @@ exports[`Chart 2`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -754,9 +727,10 @@ exports[`Chart 2`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -771,9 +745,10 @@ exports[`Chart 2`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -798,9 +773,10 @@ exports[`Chart 2`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -841,9 +817,10 @@ exports[`Chart 2`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -892,9 +869,10 @@ exports[`Chart 2`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -919,9 +897,10 @@ exports[`Chart 2`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -958,9 +937,10 @@ exports[`Chart 2`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1001,23 +981,6 @@ exports[`renders component data 1`] = `
   height={200}
   width={200}
 >
-  <Component
-    style={
-      Array [
-        Object {
-          "fontSize": 26,
-        },
-        Object {
-          "fill": "#bbb",
-          "fontSize": 16,
-        },
-      ]
-    }
-    textAnchor="middle"
-    verticalAnchor="middle"
-    x={115}
-    y={115}
-  />
   <Component
     data={
       Array [
@@ -1030,23 +993,19 @@ exports[`renders component data 1`] = `
         },
       ]
     }
-    height={230}
-    innerRadius={98}
-    origin={
-      Object {
-        "x": 115,
-        "y": 115,
-      }
-    }
+    donutHeight={200}
+    donutWidth={200}
+    height={200}
     standalone={false}
     theme={
       Object {
         "area": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1072,9 +1031,10 @@ exports[`renders component data 1`] = `
         "axis": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1120,9 +1080,10 @@ exports[`renders component data 1`] = `
           "barWidth": 10,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1146,9 +1107,10 @@ exports[`renders component data 1`] = `
           "boxWidth": 20,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1226,9 +1188,10 @@ exports[`renders component data 1`] = `
           },
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1252,9 +1215,10 @@ exports[`renders component data 1`] = `
         "chart": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1269,9 +1233,10 @@ exports[`renders component data 1`] = `
           "borderWidth": 8,
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1296,9 +1261,10 @@ exports[`renders component data 1`] = `
         "group": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1339,9 +1305,10 @@ exports[`renders component data 1`] = `
         "line": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1390,9 +1357,10 @@ exports[`renders component data 1`] = `
         "scatter": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1417,9 +1385,10 @@ exports[`renders component data 1`] = `
         "stack": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1456,9 +1425,10 @@ exports[`renders component data 1`] = `
         "voronoi": Object {
           "colorScale": Array [
             "#06c",
-            "#bee1f4",
-            "#73bcf7",
-            "#0066ff",
+            "#8bc1f7",
+            "#002f5d",
+            "#519de9",
+            "#004b95",
           ],
           "height": 300,
           "padding": 50,
@@ -1489,7 +1459,7 @@ exports[`renders component data 1`] = `
         },
       }
     }
-    width={230}
+    width={200}
   />
 </Component>
 `;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md
index 83c9a08756d..18e123011ef 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md
@@ -17,7 +17,7 @@ import { ChartDonutUtilization } from '@patternfly/react-charts';
   <div className="donut-utilization-chart">
     <ChartDonutUtilization
       data={{ x: 'GBps capacity', y: 75 }}
-      labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
+      labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
       subTitle="of 100 GBps"
       title="75%"
     />
@@ -58,11 +58,12 @@ class UtilizationChart extends React.Component {
     const { spacer, used } = this.state;
     return (
       <div>
-        <div className="donut-utilization-chart-horz">
+        <div className="donut-utilization-chart-legend-right">
           <ChartDonutUtilization
             data={{ x: 'GBps capacity', y: used }}
-            labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-            legendData={[{ name: `GBps capacity - ${spacer}${used}%` }, { name: 'Unused' }]}
+            labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+            legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
+            legendOrientation="vertical"
             subTitle="of 100 GBps"
             title={`${used}%`}
             thresholds={[{ value: 60 }, { value: 90 }]}
@@ -108,17 +109,21 @@ class UtilizationChart extends React.Component {
     const { spacer, used } = this.state;
     return (
       <div>
-        <div className="donut-utilization-chart-horz">
+        <div className="donut-utilization-chart-legend-bottom-vert">
           <ChartDonutUtilization
-            data={{ x: 'GBps capacity', y: used }}
-            labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-            legendData={[{ name: `GBps capacity - ${spacer}${used}%` }, { name: 'Unused' }]}
+            data={{ x: 'Storage capacity', y: used }}
+            donutHeight={230}
+            height={300}
+            labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+            legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
+            legendOrientation="vertical"
+            legendPosition="bottom"
             subTitle="of 100 GBps"
             title={`${used}%`}
             themeColor={ChartThemeColor.green}
             themeVariant={ChartThemeVariant.light}
             thresholds={[{ value: 60 }, { value: 90 }]}
-            width={435}
+            width={230}
           />
         </div>
       </div>
@@ -133,15 +138,14 @@ import React from 'react';
 import { ChartDonutUtilization } from '@patternfly/react-charts';
 
 <div>
-  <div className="donut-utilization-chart-vert">
+  <div className="donut-utilization-chart-legend-bottom-horz">
     <ChartDonutUtilization
-      data={{ x: 'GBps capacity', y: 45 }}
-      donutOrientation="top"
+      data={{ x: 'Storage capacity', y: 45 }}
+      donutHeight={230}
       height={275}
-      labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-      legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
-      legendOrientation="horizontal"
-      legendWidth={282}
+      labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+      legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
+      legendPosition="bottom"
       subTitle="of 100 GBps"
       title="45%"
       thresholds={[{ value: 60 }, { value: 90 }]}
@@ -151,42 +155,20 @@ import { ChartDonutUtilization } from '@patternfly/react-charts';
 </div>
 ```
 
-## Simple donut utilization chart with left-aligned legend
-```js
-import React from 'react';
-import { ChartDonutUtilization } from '@patternfly/react-charts';
-
-<div>
-  <div className="donut-utilization-chart-horz-sm">
-    <ChartDonutUtilization
-      data={{ x: 'GBps capacity', y: 45 }}
-      donutOrientation="right"
-      labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-      legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
-      subTitle="of 100 GBps"
-      title="45%"
-      thresholds={[{ value: 60 }, { value: 90 }]}
-      width={425}
-    />
-  </div>
-</div>
-```
-
 ## Donut utilization chart with static thresholds
 ```js
 import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 
 <div>
-  <div className="donut-threshold-chart-horz">
+  <div className="donut-threshold-chart">
     <ChartDonutThreshold
       data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
       labels={datum => datum.x ? datum.x : null}
-      width={475}
     >
       <ChartDonutUtilization
-        data={{ x: 'GBps capacity', y: 45 }}
-        labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
+        data={{ x: 'Storage capacity', y: 45 }}
+        labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
         subTitle="of 100 GBps"
         title="45%"
       />
@@ -223,16 +205,17 @@ class ThresholdChart extends React.Component {
     const { used } = this.state;
     return (
       <div>
-        <div className="donut-threshold-chart-horz">
+        <div className="donut-threshold-chart-legend-right">
           <ChartDonutThreshold
             data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
             labels={datum => datum.x ? datum.x : null}
-            width={492}
+            width={500}
           >
             <ChartDonutUtilization
-              data={{ x: 'GBps capacity', y: used }}
-              labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-              legendData={[{ name: `GBps capacity - ${used}%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]}
+              data={{ x: 'Storage capacity', y: used }}
+              labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+              legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}
+              legendOrientation="vertical"
               subTitle="of 100 GBps"
               title={`${used}%`}
               thresholds={[{ value: 60 }, { value: 90 }]}
@@ -245,7 +228,7 @@ class ThresholdChart extends React.Component {
 }
 ```
 
-## Green donut utilization chart with static thresholds and right-aligned legend
+## Green donut utilization chart with static thresholds and right-aligned (custom) legend
 ```js
 import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
@@ -273,16 +256,19 @@ class ThresholdChart extends React.Component {
     const { used } = this.state;
     return (
       <div>
-        <div className="donut-threshold-chart-horz">
+        <div className="donut-threshold-chart-legend-bottom-vert">
           <ChartDonutThreshold
             data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
+            height={350}
             labels={datum => datum.x ? datum.x : null}
-            width={492}
+            legendPosition="bottom"
+            width={230}
           >
             <ChartDonutUtilization
-              data={{ x: 'GBps capacity', y: used }}
-              labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-              legendData={[{ name: `GBps capacity - ${used}%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]}
+              data={{ x: 'Storage capacity', y: used }}
+              labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+              legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}
+              legendOrientation="vertical"
               subTitle="of 100 GBps"
               title={`${used}%`}
               themeColor={ChartThemeColor.green}
@@ -303,45 +289,274 @@ import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 
 <div>
-  <div className="donut-threshold-chart-vert">
+  <div className="donut-threshold-chart-legend-bottom-horz">
+    <ChartDonutThreshold
+      data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
+      donutHeight={230}
+      height={275}
+      labels={datum => datum.x ? datum.x : null}
+      legendPosition="bottom"
+      width={675}
+    >
+      <ChartDonutUtilization
+        data={{ x: 'Storage capacity', y: 45 }}
+        labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+        legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}
+        subTitle="of 100 GBps"
+        title="45%"
+      />
+    </ChartDonutThreshold>
+  </div>
+</div>
+```
+
+## Small donut utilization chart
+```js
+import React from 'react';
+import { ChartDonutUtilization } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-utilization-chart-sm">
+    <ChartDonutUtilization
+      data={{ x: 'Storage capacity', y: 75 }}
+      height={150}
+      labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+      subTitle="of 100 GBps"
+      title="75%"
+      width={150}
+    />
+  </div>
+</div>
+```
+
+## Small donut utilization chart with right-aligned legend
+```js
+import React from 'react';
+import { ChartDonutUtilization } from '@patternfly/react-charts';
+
+class UtilizationChart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      spacer: '',
+      used: 0
+    };
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      const { used } = this.state;
+      const val = (used + 10) % 100;
+      this.setState({
+        spacer: val < 10 ? ' ' : '',
+        used: val
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { spacer, used } = this.state;
+    return (
+      <div>
+        <div className="donut-utilization-chart-legend-right-sm">
+          <ChartDonutUtilization
+            data={{ x: 'Storage capacity', y: used }}
+            height={150}
+            labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+            legendData={[{ name: `Storage capacity: ${spacer}${used}%` }, { name: 'Unused' }]}
+            legendOrientation="vertical"
+            subTitle="of 100 GBps"
+            title={`${used}%`}
+            thresholds={[{ value: 60 }, { value: 90 }]}
+            width={350}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+```
+
+## Small donut utilization chart with right-aligned legend and bottom-aligned subtitle
+```js
+import React from 'react';
+import { ChartDonutUtilization } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-utilization-chart-legend-right-subtitle-bottom-sm">
+    <ChartDonutUtilization
+      data={{ x: 'Storage capacity', y: 45 }}
+      donutHeight={150}
+      height={175}
+      labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+      legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
+      legendOrientation="vertical"
+      subTitle="of 100 GBps"
+      subTitlePosition="bottom"
+      title="45%"
+      thresholds={[{ value: 60 }, { value: 90 }]}
+      width={350}
+    />
+  </div>
+</div>
+```
+
+## Small donut utilization chart with bottom-aligned legend and right-aligned subtitle
+```js
+import React from 'react';
+import { ChartDonutUtilization } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-utilization-chart-legend-bottom-subtitle-right-sm">
+    <ChartDonutUtilization
+      data={{ x: 'Storage capacity', y: 45 }}
+      donutHeight={150}
+      height={200}
+      labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+      legendData={[{ name: `Storage capacity: 45%` }, { name: 'Unused' }]}
+      legendPosition="bottom"
+      subTitle="of 100 GBps"
+      subTitlePosition="right"
+      title="45%"
+      thresholds={[{ value: 60 }, { value: 90 }]}
+      width={350}
+    />
+  </div>
+</div>
+```
+
+## Small donut utilization chart with static thresholds
+```js
+import React from 'react';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-threshold-chart-sm">
+    <ChartDonutThreshold
+      data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
+      height={175}
+      labels={datum => datum.x ? datum.x : null}
+      width={175}
+    >
+      <ChartDonutUtilization
+        data={{ x: 'Storage capacity', y: 45 }}
+        labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+        subTitle="of 100 GBps"
+        title="45%"
+      />
+    </ChartDonutThreshold>
+  </div>
+</div>
+```
+
+## Small donut utilization chart with static thresholds and right-aligned legend
+```js
+import React from 'react';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+
+class ThresholdChart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      used: 0
+    };
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      const { used } = this.state;
+      this.setState({ used: (used + 10) % 100 });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { used } = this.state;
+    return (
+      <div>
+        <div className="donut-threshold-chart-legend-right-sm">
+          <ChartDonutThreshold
+            data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
+            height={175}
+            labels={datum => datum.x ? datum.x : null}
+            width={425}
+          >
+            <ChartDonutUtilization
+              data={{ x: 'Storage capacity', y: used }}
+              labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+              legendData={[{ name: `Storage capacity: ${used}%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}
+              legendOrientation="vertical"
+              subTitle="of 100 GBps"
+              title={`${used}%`}
+              thresholds={[{ value: 60 }, { value: 90 }]}
+            />
+          </ChartDonutThreshold>
+        </div>
+      </div>
+    );
+  }
+}
+```
+
+## Small donut utilization chart with static thresholds with right-aligned legend and bottom-aligned subtitle
+```js
+import React from 'react';
+import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
+
+<div>
+  <div className="donut-threshold-chart-legend-right-subtitle-bottom-sm">
     <ChartDonutThreshold
       data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
-      donutOrientation="top"
-      height={325}
+      donutHeight={175}
+      height={200}
       labels={datum => datum.x ? datum.x : null}
-      width={275}
+      subTitlePosition="bottom"
+      width={425}
     >
       <ChartDonutUtilization
-        data={{ x: 'GBps capacity', y: 45 }}
-        labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-        legendData={[{ name: `GBps capacity - 45%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]}
+        data={{ x: 'Storage capacity', y: 45 }}
+        labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+        legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at  90%' }]}
+        legendOrientation="vertical"
         subTitle="of 100 GBps"
         title="45%"
+        thresholds={[{ value: 60 }, { value: 90 }]}
       />
     </ChartDonutThreshold>
   </div>
 </div>
 ```
 
-## Donut utilization chart with static thresholds and left-aligned legend
+## Small donut utilization chart with static thresholds with bottom-aligned legend and right-aligned subtitle
 ```js
 import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 
 <div>
-  <div className="donut-threshold-chart-horz-sm">
+  <div className="donut-threshold-chart-legend-bottom-subtitle-right-sm">
     <ChartDonutThreshold
       data={[{ x: 'Warning at 60%', y: 60 }, { x: 'Danger at 90%', y: 90 }]}
-      donutOrientation="right"
+      donutHeight={175}
+      height={225}
       labels={datum => datum.x ? datum.x : null}
-      width={475}
+      legendPosition="bottom"
+      subTitlePosition="right"
+      width={675}
     >
       <ChartDonutUtilization
-        data={{ x: 'GBps capacity', y: 45 }}
-        labels={datum => datum.x ? `${datum.x} - ${datum.y}%` : null}
-        legendData={[{ name: `GBps capacity - 45%` }, { name: 'Warning threshold at - 60%' }, { name: 'Danger threshold at - 90%' }]}
+        data={{ x: 'Storage capacity', y: 45 }}
+        labels={datum => datum.x ? `${datum.x}: ${datum.y}%` : null}
+        legendData={[{ name: `Storage capacity: 45%` }, { name: 'Warning threshold at 60%' }, { name: 'Danger threshold at 90%' }]}
         subTitle="of 100 GBps"
         title="45%"
+        thresholds={[{ value: 60 }, { value: 90 }]}
       />
     </ChartDonutThreshold>
   </div>
diff --git a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss
index 13de880e58a..1c89f1d88ad 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss
+++ b/packages/patternfly-4/react-charts/src/components/ChartDonutUtilization/examples/chart-donut-utilization.scss
@@ -1,18 +1,43 @@
 .ws-preview {
   & > * {
-    .donut-threshold-chart-horz {
+    .donut-threshold-chart {
       height: 230px;
-      width: 492px;
+      width: 230px;
+    }
+
+    .donut-threshold-chart-sm {
+      height: 175px;
+      width: 175px;
+    }
+
+    .donut-threshold-chart-legend-bottom-horz {
+      height: 275px;
+      width: 675px;
     }
 
-    .donut-threshold-chart-horz-sm {
+    .donut-threshold-chart-legend-bottom-vert {
+      height: 350px;
+      width: 230px;
+    }
+
+    .donut-threshold-chart-legend-right {
       height: 230px;
-      width: 475px;
+      width: 500px;
+    }
+
+    .donut-threshold-chart-legend-right-sm {
+      height: 175px;
+      width: 425px;
+    }
+
+    .donut-threshold-chart-legend-right-subtitle-bottom-sm {
+      height: 200px;
+      width: 425px;
     }
 
-    .donut-threshold-chart-vert {
-      height: 325px;
-      width: 275px;
+    .donut-threshold-chart-legend-bottom-subtitle-right-sm {
+      height: 225px;
+      width: 675px;
     }
 
     .donut-utilization-chart {
@@ -20,19 +45,39 @@
       width: 230px;
     }
 
-    .donut-utilization-chart-horz {
+    .donut-utilization-chart-sm {
+      height: 150px;
+      width: 150px;
+    }
+
+    .donut-utilization-chart-legend-bottom-horz {
+      height: 275px;
+      width: 300px;
+    }
+
+    .donut-utilization-chart-legend-bottom-vert {
+      height: 300px;
+      width: 230px;
+    }
+
+    .donut-utilization-chart-legend-right {
       height: 230px;
       width: 435px;
     }
 
-    .donut-utilization-chart-horz-sm {
-      height: 230px;
-      width: 425px;
+    .donut-utilization-chart-legend-right-sm {
+      height: 150px;
+      width: 350px;
     }
 
-    .donut-utilization-chart-vert {
-      height: 275px;
-      width: 300px;
+    .donut-utilization-chart-legend-bottom-subtitle-right-sm {
+      height: 200px;
+      width: 350px;
+    }
+
+    .donut-utilization-chart-legend-right-subtitle-bottom-sm {
+      height: 175px;
+      width: 350px;
     }
   }
 }
diff --git a/packages/patternfly-4/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap
index 2104c522fa1..a4fb4a12410 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap
@@ -19,9 +19,10 @@ exports[`ChartGroup 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -47,9 +48,10 @@ exports[`ChartGroup 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -95,9 +97,10 @@ exports[`ChartGroup 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -121,9 +124,10 @@ exports[`ChartGroup 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -201,9 +205,10 @@ exports[`ChartGroup 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -227,9 +232,10 @@ exports[`ChartGroup 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -244,9 +250,10 @@ exports[`ChartGroup 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -271,9 +278,10 @@ exports[`ChartGroup 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -282,9 +290,10 @@ exports[`ChartGroup 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -314,9 +323,10 @@ exports[`ChartGroup 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -341,9 +351,10 @@ exports[`ChartGroup 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -366,9 +377,10 @@ exports[`ChartGroup 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -393,9 +405,10 @@ exports[`ChartGroup 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -432,9 +445,10 @@ exports[`ChartGroup 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -487,9 +501,10 @@ exports[`ChartGroup 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -515,9 +530,10 @@ exports[`ChartGroup 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -563,9 +579,10 @@ exports[`ChartGroup 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -589,9 +606,10 @@ exports[`ChartGroup 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -669,9 +687,10 @@ exports[`ChartGroup 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -695,9 +714,10 @@ exports[`ChartGroup 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -712,9 +732,10 @@ exports[`ChartGroup 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -739,9 +760,10 @@ exports[`ChartGroup 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -750,9 +772,10 @@ exports[`ChartGroup 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -782,9 +805,10 @@ exports[`ChartGroup 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -809,9 +833,10 @@ exports[`ChartGroup 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -834,9 +859,10 @@ exports[`ChartGroup 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -861,9 +887,10 @@ exports[`ChartGroup 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -900,9 +927,10 @@ exports[`ChartGroup 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -956,9 +984,10 @@ exports[`renders container children 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -984,9 +1013,10 @@ exports[`renders container children 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1032,9 +1062,10 @@ exports[`renders container children 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1058,9 +1089,10 @@ exports[`renders container children 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1138,9 +1170,10 @@ exports[`renders container children 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1164,9 +1197,10 @@ exports[`renders container children 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1181,9 +1215,10 @@ exports[`renders container children 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1208,9 +1243,10 @@ exports[`renders container children 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1219,9 +1255,10 @@ exports[`renders container children 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1251,9 +1288,10 @@ exports[`renders container children 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1278,9 +1316,10 @@ exports[`renders container children 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1303,9 +1342,10 @@ exports[`renders container children 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1330,9 +1370,10 @@ exports[`renders container children 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1369,9 +1410,10 @@ exports[`renders container children 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.tsx b/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.tsx
index 997ca88d5f9..fa91d6e25a1 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.tsx
+++ b/packages/patternfly-4/react-charts/src/components/ChartLabel/ChartLabel.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { defaults } from 'lodash';
 import {
   StringOrNumberOrCallback,
-  // TextAnchorType,
-  // VerticalAnchorType,
   VictoryLabel,
   VictoryLabelProps
 } from 'victory';
+import { LabelStyles } from '../ChartTheme/themes/label-theme';
 
 export enum ChartLabelDirection {
   rtl = 'rtl',
@@ -132,7 +132,7 @@ export interface ChartLabelProps extends VictoryLabelProps {
   /**
    * The style prop applies CSS properties to the rendered `<text>` element.
    */
-  style?: React.CSSProperties;
+  style?: React.CSSProperties; // Todo: style accepts arrays, but TS definition is wrong
   /**
    * The text prop defines the text ChartLabel will render. The text prop may be given as a string, number, a function
    * of datum, or an array of any of these. Strings may include newline characters, which ChartLabel will split into
@@ -166,8 +166,14 @@ export interface ChartLabelProps extends VictoryLabelProps {
   y?: number;
 };
 
-export const ChartLabel: React.FunctionComponent<ChartLabelProps> = (props: ChartLabelProps) =>
-  <VictoryLabel {...props} />;
+export const ChartLabel: React.FunctionComponent<ChartLabelProps> = ({
+  style,
+  ...rest
+}: ChartLabelProps) => {
+  const applyDefaultStyle = (customStyle: React.CSSProperties) => defaults(customStyle, LabelStyles);
+  const newStyle = Array.isArray(style) ? style.map(applyDefaultStyle) : applyDefaultStyle(style);
+  return <VictoryLabel style={newStyle as any} {...rest} />;
+}
 
 // Note: VictoryLabel.role must be hoisted
 hoistNonReactStatics(ChartLabel, VictoryLabel);
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap
index f121d850d2e..11331b6faf1 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap
@@ -5,6 +5,11 @@ exports[`Chart 1`] = `
   capHeight={0.71}
   direction="inherit"
   lineHeight={1}
+  style={
+    Object {
+      "fontFamily": "overpass,overpass,open sans,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+    }
+  }
   textComponent={<Text />}
   tspanComponent={<TSpan />}
 />
@@ -15,6 +20,11 @@ exports[`Chart 2`] = `
   capHeight={0.71}
   direction="inherit"
   lineHeight={1}
+  style={
+    Object {
+      "fontFamily": "overpass,overpass,open sans,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+    }
+  }
   textComponent={<Text />}
   tspanComponent={<TSpan />}
 />
@@ -25,6 +35,11 @@ exports[`renders component text 1`] = `
   capHeight={0.71}
   direction="inherit"
   lineHeight={1}
+  style={
+    Object {
+      "fontFamily": "overpass,overpass,open sans,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+    }
+  }
   text="This is a test"
   textComponent={<Text />}
   tspanComponent={<TSpan />}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
index 7998e6949f5..bc6eb761fce 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap
@@ -15,9 +15,10 @@ exports[`Chart 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -43,9 +44,10 @@ exports[`Chart 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -91,9 +93,10 @@ exports[`Chart 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -117,9 +120,10 @@ exports[`Chart 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -197,9 +201,10 @@ exports[`Chart 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -223,9 +228,10 @@ exports[`Chart 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -240,9 +246,10 @@ exports[`Chart 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -267,9 +274,10 @@ exports[`Chart 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -278,9 +286,10 @@ exports[`Chart 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -310,9 +319,10 @@ exports[`Chart 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -337,9 +347,10 @@ exports[`Chart 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -362,9 +373,10 @@ exports[`Chart 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -389,9 +401,10 @@ exports[`Chart 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -428,9 +441,10 @@ exports[`Chart 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -490,9 +504,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -518,9 +533,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -566,9 +582,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -592,9 +609,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -672,9 +690,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -698,9 +717,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -715,9 +735,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -742,9 +763,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -753,9 +775,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -785,9 +808,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -812,9 +836,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -837,9 +862,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -864,9 +890,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -903,9 +930,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -963,9 +991,10 @@ exports[`Chart 2`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -991,9 +1020,10 @@ exports[`Chart 2`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1039,9 +1069,10 @@ exports[`Chart 2`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1065,9 +1096,10 @@ exports[`Chart 2`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1145,9 +1177,10 @@ exports[`Chart 2`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1171,9 +1204,10 @@ exports[`Chart 2`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1188,9 +1222,10 @@ exports[`Chart 2`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1215,9 +1250,10 @@ exports[`Chart 2`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1226,9 +1262,10 @@ exports[`Chart 2`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -1258,9 +1295,10 @@ exports[`Chart 2`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1285,9 +1323,10 @@ exports[`Chart 2`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -1310,9 +1349,10 @@ exports[`Chart 2`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1337,9 +1377,10 @@ exports[`Chart 2`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1376,9 +1417,10 @@ exports[`Chart 2`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1438,9 +1480,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1466,9 +1509,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1514,9 +1558,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1540,9 +1585,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1620,9 +1666,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1646,9 +1693,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1663,9 +1711,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1690,9 +1739,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1701,9 +1751,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1733,9 +1784,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1760,9 +1812,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1785,9 +1838,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1812,9 +1866,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1851,9 +1906,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1911,9 +1967,10 @@ exports[`renders component data 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1939,9 +1996,10 @@ exports[`renders component data 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1987,9 +2045,10 @@ exports[`renders component data 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2013,9 +2072,10 @@ exports[`renders component data 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2093,9 +2153,10 @@ exports[`renders component data 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2119,9 +2180,10 @@ exports[`renders component data 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2136,9 +2198,10 @@ exports[`renders component data 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2163,9 +2226,10 @@ exports[`renders component data 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2174,9 +2238,10 @@ exports[`renders component data 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -2206,9 +2271,10 @@ exports[`renders component data 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2233,9 +2299,10 @@ exports[`renders component data 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -2258,9 +2325,10 @@ exports[`renders component data 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2285,9 +2353,10 @@ exports[`renders component data 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2324,9 +2393,10 @@ exports[`renders component data 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2387,9 +2457,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2415,9 +2486,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2463,9 +2535,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2489,9 +2562,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2569,9 +2643,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2595,9 +2670,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2612,9 +2688,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2639,9 +2716,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2650,9 +2728,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -2682,9 +2761,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2709,9 +2789,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -2734,9 +2815,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2761,9 +2843,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2800,9 +2883,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
index 354185f1270..513c01c71dc 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap
@@ -42,9 +42,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -70,9 +71,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -118,9 +120,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -144,9 +147,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -224,9 +228,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -250,9 +255,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -267,9 +273,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -294,9 +301,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -305,9 +313,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -337,9 +346,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -364,9 +374,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -389,9 +400,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -416,9 +428,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -455,9 +468,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -533,9 +547,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -561,9 +576,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -609,9 +625,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -635,9 +652,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -715,9 +733,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -741,9 +760,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -758,9 +778,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -785,9 +806,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -796,9 +818,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -828,9 +851,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -855,9 +879,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -880,9 +905,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -907,9 +933,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -946,9 +973,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3139,9 +3167,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3167,9 +3196,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3215,9 +3245,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3241,9 +3272,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3321,9 +3353,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3347,9 +3380,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3364,9 +3398,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3391,9 +3426,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3402,9 +3438,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -3434,9 +3471,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3461,9 +3499,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -3486,9 +3525,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3513,9 +3553,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3552,9 +3593,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap
index 7b363af66bf..de7f00dd387 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap
@@ -47,9 +47,10 @@ exports[`Chart 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -75,9 +76,10 @@ exports[`Chart 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -123,9 +125,10 @@ exports[`Chart 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -149,9 +152,10 @@ exports[`Chart 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -229,9 +233,10 @@ exports[`Chart 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -255,9 +260,10 @@ exports[`Chart 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -272,9 +278,10 @@ exports[`Chart 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -299,9 +306,10 @@ exports[`Chart 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -310,9 +318,10 @@ exports[`Chart 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -342,9 +351,10 @@ exports[`Chart 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -369,9 +379,10 @@ exports[`Chart 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -394,9 +405,10 @@ exports[`Chart 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -421,9 +433,10 @@ exports[`Chart 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -460,9 +473,10 @@ exports[`Chart 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -502,9 +516,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -530,9 +545,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -578,9 +594,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -604,9 +621,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -684,9 +702,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -710,9 +729,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -727,9 +747,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -754,9 +775,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -765,9 +787,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -797,9 +820,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -824,9 +848,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -849,9 +874,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -876,9 +902,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -915,9 +942,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -998,9 +1026,10 @@ exports[`Chart 2`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1026,9 +1055,10 @@ exports[`Chart 2`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1074,9 +1104,10 @@ exports[`Chart 2`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1100,9 +1131,10 @@ exports[`Chart 2`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1180,9 +1212,10 @@ exports[`Chart 2`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1206,9 +1239,10 @@ exports[`Chart 2`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1223,9 +1257,10 @@ exports[`Chart 2`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1250,9 +1285,10 @@ exports[`Chart 2`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1261,9 +1297,10 @@ exports[`Chart 2`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -1293,9 +1330,10 @@ exports[`Chart 2`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1320,9 +1358,10 @@ exports[`Chart 2`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -1345,9 +1384,10 @@ exports[`Chart 2`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1372,9 +1412,10 @@ exports[`Chart 2`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1411,9 +1452,10 @@ exports[`Chart 2`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1453,9 +1495,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1481,9 +1524,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1529,9 +1573,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1555,9 +1600,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1635,9 +1681,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1661,9 +1708,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1678,9 +1726,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1705,9 +1754,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1716,9 +1766,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1748,9 +1799,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1775,9 +1827,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1800,9 +1853,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1827,9 +1881,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1866,9 +1921,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1942,9 +1998,10 @@ exports[`renders component data 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1970,9 +2027,10 @@ exports[`renders component data 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2018,9 +2076,10 @@ exports[`renders component data 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2044,9 +2103,10 @@ exports[`renders component data 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2124,9 +2184,10 @@ exports[`renders component data 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2150,9 +2211,10 @@ exports[`renders component data 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2167,9 +2229,10 @@ exports[`renders component data 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2194,9 +2257,10 @@ exports[`renders component data 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2205,9 +2269,10 @@ exports[`renders component data 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -2237,9 +2302,10 @@ exports[`renders component data 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2264,9 +2330,10 @@ exports[`renders component data 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -2289,9 +2356,10 @@ exports[`renders component data 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2316,9 +2384,10 @@ exports[`renders component data 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2355,9 +2424,10 @@ exports[`renders component data 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2397,9 +2467,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2425,9 +2496,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2473,9 +2545,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2499,9 +2572,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2579,9 +2653,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2605,9 +2680,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2622,9 +2698,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2649,9 +2726,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2660,9 +2738,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -2692,9 +2771,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2719,9 +2799,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -2744,9 +2825,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2771,9 +2853,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2810,9 +2893,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md b/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md
index e7248c4c7d7..fc7f0da595c 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md
+++ b/packages/patternfly-4/react-charts/src/components/ChartPie/examples/ChartPie.md
@@ -16,14 +16,14 @@ import { ChartLegend, ChartPie } from '@patternfly/react-charts';
 
 <div>
   <div className="pie-chart-inline">
-    <div className="pie-chart-container">
+    <div className="pie-chart-legend-right">
       <ChartPie
         data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
         labels={datum => `${datum.x}: ${datum.y}`}
       />
     </div>
     <ChartLegend
-      data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+      data={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
       height={230}
       orientation={'vertical'}
       responsive={false}
@@ -40,15 +40,17 @@ import { ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts
 
 <div>
   <div className="pie-chart-container">
-    <ChartPie
-      data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
-      labels={datum => `${datum.x}: ${datum.y}`}
-      themeColor={ChartThemeColor.multi}
-      themeVariant={ChartThemeVariant.light}
-    />
+    <div className="pie-chart-legend-bottom">
+      <ChartPie
+        data={[{ x: 'Cats', y: 35 }, { x: 'Dogs', y: 55 }, { x: 'Birds', y: 10 }]}
+        labels={datum => `${datum.x}: ${datum.y}`}
+        themeColor={ChartThemeColor.multi}
+        themeVariant={ChartThemeVariant.light}
+      />
+    </div>
   </div>
   <ChartLegend
-    data={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]}
+    data={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]}
     height={35}
     orientation={'horizontal'}
     responsive={false}
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPie/examples/chart-pie.scss b/packages/patternfly-4/react-charts/src/components/ChartPie/examples/chart-pie.scss
index bc90c9bd1fd..59e795dd57f 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartPie/examples/chart-pie.scss
+++ b/packages/patternfly-4/react-charts/src/components/ChartPie/examples/chart-pie.scss
@@ -1,12 +1,23 @@
 .ws-preview {
   & > * {
     .pie-chart-container {
-      height: 230px;
-      width: 230px;
+      display: flex;
+      justify-content: center;
+      width: 300px;
     }
 
     .pie-chart-inline {
       display: inline-flex;
     }
+
+    .pie-chart-legend-bottom {
+      height: 230px;
+      width: 230px;
+    }
+
+    .pie-chart-legend-right {
+      height: 230px;
+      width: 230px;
+    }
   }
 }
diff --git a/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
index 128be439b2a..0bfc6f1c148 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap
@@ -15,9 +15,10 @@ exports[`Chart 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -43,9 +44,10 @@ exports[`Chart 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -91,9 +93,10 @@ exports[`Chart 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -117,9 +120,10 @@ exports[`Chart 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -197,9 +201,10 @@ exports[`Chart 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -223,9 +228,10 @@ exports[`Chart 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -240,9 +246,10 @@ exports[`Chart 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -267,9 +274,10 @@ exports[`Chart 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -278,9 +286,10 @@ exports[`Chart 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -310,9 +319,10 @@ exports[`Chart 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -337,9 +347,10 @@ exports[`Chart 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -362,9 +373,10 @@ exports[`Chart 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -389,9 +401,10 @@ exports[`Chart 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -428,9 +441,10 @@ exports[`Chart 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -490,9 +504,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -518,9 +533,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -566,9 +582,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -592,9 +609,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -672,9 +690,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -698,9 +717,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -715,9 +735,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -742,9 +763,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -753,9 +775,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -785,9 +808,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -812,9 +836,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -837,9 +862,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -864,9 +890,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -903,9 +930,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -963,9 +991,10 @@ exports[`Chart 2`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -991,9 +1020,10 @@ exports[`Chart 2`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1039,9 +1069,10 @@ exports[`Chart 2`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1065,9 +1096,10 @@ exports[`Chart 2`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1145,9 +1177,10 @@ exports[`Chart 2`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1171,9 +1204,10 @@ exports[`Chart 2`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1188,9 +1222,10 @@ exports[`Chart 2`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1215,9 +1250,10 @@ exports[`Chart 2`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1226,9 +1262,10 @@ exports[`Chart 2`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -1258,9 +1295,10 @@ exports[`Chart 2`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1285,9 +1323,10 @@ exports[`Chart 2`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -1310,9 +1349,10 @@ exports[`Chart 2`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1337,9 +1377,10 @@ exports[`Chart 2`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1376,9 +1417,10 @@ exports[`Chart 2`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1438,9 +1480,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1466,9 +1509,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1514,9 +1558,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1540,9 +1585,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1620,9 +1666,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1646,9 +1693,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1663,9 +1711,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1690,9 +1739,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1701,9 +1751,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1733,9 +1784,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1760,9 +1812,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1785,9 +1838,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1812,9 +1866,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1851,9 +1906,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1911,9 +1967,10 @@ exports[`renders component data 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1939,9 +1996,10 @@ exports[`renders component data 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -1987,9 +2045,10 @@ exports[`renders component data 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2013,9 +2072,10 @@ exports[`renders component data 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2093,9 +2153,10 @@ exports[`renders component data 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2119,9 +2180,10 @@ exports[`renders component data 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2136,9 +2198,10 @@ exports[`renders component data 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2163,9 +2226,10 @@ exports[`renders component data 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2174,9 +2238,10 @@ exports[`renders component data 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -2206,9 +2271,10 @@ exports[`renders component data 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2233,9 +2299,10 @@ exports[`renders component data 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -2258,9 +2325,10 @@ exports[`renders component data 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2285,9 +2353,10 @@ exports[`renders component data 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2324,9 +2393,10 @@ exports[`renders component data 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -2390,9 +2460,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2418,9 +2489,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2466,9 +2538,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2492,9 +2565,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2572,9 +2646,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2598,9 +2673,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2615,9 +2691,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2642,9 +2719,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2653,9 +2731,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -2685,9 +2764,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2712,9 +2792,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -2737,9 +2818,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2764,9 +2846,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -2803,9 +2886,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap
index 25d30595144..a3e8e30bc08 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap
@@ -18,9 +18,10 @@ exports[`Chart 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -46,9 +47,10 @@ exports[`Chart 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -94,9 +96,10 @@ exports[`Chart 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -120,9 +123,10 @@ exports[`Chart 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -200,9 +204,10 @@ exports[`Chart 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -226,9 +231,10 @@ exports[`Chart 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -243,9 +249,10 @@ exports[`Chart 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -270,9 +277,10 @@ exports[`Chart 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -281,9 +289,10 @@ exports[`Chart 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -313,9 +322,10 @@ exports[`Chart 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -340,9 +350,10 @@ exports[`Chart 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -365,9 +376,10 @@ exports[`Chart 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -392,9 +404,10 @@ exports[`Chart 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -431,9 +444,10 @@ exports[`Chart 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -485,9 +499,10 @@ exports[`Chart 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -513,9 +528,10 @@ exports[`Chart 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -561,9 +577,10 @@ exports[`Chart 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -587,9 +604,10 @@ exports[`Chart 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -667,9 +685,10 @@ exports[`Chart 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -693,9 +712,10 @@ exports[`Chart 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -710,9 +730,10 @@ exports[`Chart 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -737,9 +758,10 @@ exports[`Chart 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -748,9 +770,10 @@ exports[`Chart 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -780,9 +803,10 @@ exports[`Chart 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -807,9 +831,10 @@ exports[`Chart 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -832,9 +857,10 @@ exports[`Chart 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -859,9 +885,10 @@ exports[`Chart 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -898,9 +925,10 @@ exports[`Chart 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3094,9 +3122,10 @@ exports[`renders component data 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3122,9 +3151,10 @@ exports[`renders component data 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3170,9 +3200,10 @@ exports[`renders component data 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3196,9 +3227,10 @@ exports[`renders component data 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3276,9 +3308,10 @@ exports[`renders component data 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3302,9 +3335,10 @@ exports[`renders component data 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3319,9 +3353,10 @@ exports[`renders component data 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3346,9 +3381,10 @@ exports[`renders component data 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3357,9 +3393,10 @@ exports[`renders component data 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -3389,9 +3426,10 @@ exports[`renders component data 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3416,9 +3454,10 @@ exports[`renders component data 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -3441,9 +3480,10 @@ exports[`renders component data 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3468,9 +3508,10 @@ exports[`renders component data 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -3507,9 +3548,10 @@ exports[`renders component data 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
index 6e03ac5d191..a17fb18e387 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/ChartTheme.ts
@@ -30,10 +30,14 @@ export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {
 
 interface ChartThemeColorInterface {
   blue: string;
+  cyan: string;
   default: string;
+  gold: string;
+  gray: string;
   green: string;
-  grey: string;
   multi: string;
+  orange: string;
+  purple: string;
 }
 
 interface ChartThemeVariantInterface {
@@ -44,10 +48,14 @@ interface ChartThemeVariantInterface {
 
 export const ChartThemeColor: ChartThemeColorInterface = {
   blue: 'blue',
+  cyan: 'cyan',
   default: 'blue',
+  gold: 'gold',
+  gray: 'gray',
   green: 'green',
-  grey: 'grey',
-  multi: 'multi'
+  multi: 'multi',
+  orange: 'orange',
+  purple: 'purple'
 };
 
 export const ChartThemeVariant: ChartThemeVariantInterface = {
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/common-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/common-theme.ts
new file mode 100644
index 00000000000..4efbedc5e8c
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/common-theme.ts
@@ -0,0 +1,11 @@
+// TODO Replace label props with PF css when available
+
+// Common properties not included with Victory theme
+export const CommonStyles = {
+  label: {
+    margin: 8
+  },
+  legend: {
+    margin: 16
+  },
+};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts
index 446b06789a2..151882385f9 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/blue-color-theme.ts
@@ -1,6 +1,10 @@
 /* eslint-disable camelcase */
 import {
-  global_active_color_100,
+  chart_color_blue_100,
+  chart_color_blue_200,
+  chart_color_blue_300,
+  chart_color_blue_400,
+  chart_color_blue_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_200,
@@ -15,12 +19,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_light_100.value;
-const COLOR_SCALE = [
-  global_active_color_100.value,
-  global_active_color_200.value,
-  global_active_color_300.value,
-  '#0066ff'
-];
 const COLOR_STACK_STROKE = global_Color_dark_200.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#151515';
@@ -28,6 +26,16 @@ const COLOR_TOOLTIP_STROKE = '#151515';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
 
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_blue_300.value,
+  chart_color_blue_100.value,
+  chart_color_blue_500.value,
+  chart_color_blue_200.value,
+  chart_color_blue_400.value
+];
+
 export const DarkBlueColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/grey-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts
similarity index 68%
rename from packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/grey-color-theme.ts
rename to packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts
index c9973711dd6..fa71c3ec2d9 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/grey-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/cyan-color-theme.ts
@@ -1,5 +1,10 @@
 /* eslint-disable camelcase */
 import {
+  chart_color_cyan_100,
+  chart_color_cyan_200,
+  chart_color_cyan_300,
+  chart_color_cyan_400,
+  chart_color_cyan_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_200,
@@ -14,7 +19,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_light_100.value;
-const COLOR_SCALE = ['#EDEDED', '#D2D2D2', '#BBBBBB'];
 const COLOR_STACK_STROKE = global_Color_dark_200.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#151515';
@@ -22,7 +26,17 @@ const COLOR_TOOLTIP_STROKE = '#151515';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
 
-export const DarkGreyColorTheme = ColorTheme({
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_cyan_300.value,
+  chart_color_cyan_100.value,
+  chart_color_cyan_500.value,
+  chart_color_cyan_200.value,
+  chart_color_cyan_400.value
+];
+
+export const DarkCyanColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
   COLOR_FILL,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts
new file mode 100644
index 00000000000..97e2acb4c48
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gold-color-theme.ts
@@ -0,0 +1,51 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_gold_100,
+  chart_color_gold_200,
+  chart_color_gold_300,
+  chart_color_gold_400,
+  chart_color_gold_500,
+  global_active_color_200,
+  global_active_color_300,
+  global_Color_dark_200,
+  global_Color_light_100
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_light_100.value;
+const COLOR_STACK_STROKE = global_Color_dark_200.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#151515';
+const COLOR_TOOLTIP_STROKE = '#151515';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_gold_300.value,
+  chart_color_gold_100.value,
+  chart_color_gold_500.value,
+  chart_color_gold_200.value,
+  chart_color_gold_400.value
+];
+
+export const DarkGoldColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts
new file mode 100644
index 00000000000..f25d33f9c01
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/gray-color-theme.ts
@@ -0,0 +1,51 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_black_100,
+  chart_color_black_200,
+  chart_color_black_300,
+  chart_color_black_400,
+  chart_color_black_500,
+  global_active_color_200,
+  global_active_color_300,
+  global_Color_dark_200,
+  global_Color_light_100
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_light_100.value;
+const COLOR_STACK_STROKE = global_Color_dark_200.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#151515';
+const COLOR_TOOLTIP_STROKE = '#151515';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
+
+// Color variants
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_black_300.value,
+  chart_color_black_100.value,
+  chart_color_black_500.value,
+  chart_color_black_200.value,
+  chart_color_black_400.value
+];
+
+export const DarkGrayColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts
index d29a2132cb2..c93afe4bff0 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/green-color-theme.ts
@@ -1,10 +1,13 @@
 /* eslint-disable camelcase */
 import {
+  chart_color_green_100,
+  chart_color_green_200,
+  chart_color_green_300,
+  chart_color_green_400,
+  chart_color_green_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_200,
-  global_success_color_100,
-  global_success_color_200,
   global_Color_light_100
 } from '@patternfly/react-tokens';
 import { ColorTheme } from '../color-theme';
@@ -16,7 +19,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_light_100.value;
-const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
 const COLOR_STACK_STROKE = global_Color_dark_200.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#151515';
@@ -24,6 +26,16 @@ const COLOR_TOOLTIP_STROKE = '#151515';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
 
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_green_300.value,
+  chart_color_green_100.value,
+  chart_color_green_500.value,
+  chart_color_green_200.value,
+  chart_color_green_400.value
+];
+
 export const DarkGreenColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/multi-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/multi-color-theme.ts
index ecc9ccb7cc3..21fc800421e 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/multi-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/multi-color-theme.ts
@@ -1,5 +1,40 @@
 /* eslint-disable camelcase */
 import {
+  chart_color_blue_100,
+  chart_color_blue_200,
+  chart_color_blue_300,
+  chart_color_blue_400,
+  chart_color_blue_500,
+  chart_color_green_100,
+  chart_color_green_200,
+  chart_color_green_300,
+  chart_color_green_400,
+  chart_color_green_500,
+  chart_color_cyan_100,
+  chart_color_cyan_200,
+  chart_color_cyan_300,
+  chart_color_cyan_400,
+  chart_color_cyan_500,
+  chart_color_purple_100,
+  chart_color_purple_200,
+  chart_color_purple_300,
+  chart_color_purple_400,
+  chart_color_purple_500,
+  chart_color_gold_100,
+  chart_color_gold_200,
+  chart_color_gold_300,
+  chart_color_gold_400,
+  chart_color_gold_500,
+  chart_color_orange_100,
+  chart_color_orange_200,
+  chart_color_orange_300,
+  chart_color_orange_400,
+  chart_color_orange_500,
+  chart_color_black_100,
+  chart_color_black_200,
+  chart_color_black_300,
+  chart_color_black_400,
+  chart_color_black_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_200,
@@ -14,7 +49,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_light_100.value;
-const COLOR_SCALE = ['#39A5DC', '#9C92F5', '#59C768', '#FFD47D'];
 const COLOR_STACK_STROKE = global_Color_dark_200.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#151515';
@@ -22,6 +56,46 @@ const COLOR_TOOLTIP_STROKE = '#151515';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
 
+// The color order below improves the color contrast in unordered charts
+// See https://github.com/patternfly/patternfly-next/issues/1551
+const COLOR_SCALE = [
+  chart_color_blue_300.value,
+  chart_color_gold_300.value,
+  chart_color_green_300.value,
+  chart_color_purple_300.value,
+  chart_color_orange_300.value,
+  chart_color_cyan_300.value,
+  chart_color_black_300.value,
+  chart_color_blue_100.value,
+  chart_color_gold_500.value,
+  chart_color_green_100.value,
+  chart_color_purple_500.value,
+  chart_color_orange_100.value,
+  chart_color_cyan_500.value,
+  chart_color_black_100.value,
+  chart_color_blue_500.value,
+  chart_color_gold_100.value,
+  chart_color_green_500.value,
+  chart_color_purple_100.value,
+  chart_color_orange_500.value,
+  chart_color_cyan_100.value,
+  chart_color_black_500.value,
+  chart_color_blue_200.value,
+  chart_color_gold_400.value,
+  chart_color_green_200.value,
+  chart_color_purple_400.value,
+  chart_color_orange_200.value,
+  chart_color_cyan_400.value,
+  chart_color_black_200.value,
+  chart_color_blue_400.value,
+  chart_color_gold_200.value,
+  chart_color_green_400.value,
+  chart_color_purple_200.value,
+  chart_color_orange_400.value,
+  chart_color_cyan_200.value,
+  chart_color_black_400.value
+];
+
 export const DarkMultiColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts
new file mode 100644
index 00000000000..dd4312aa360
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/orange-color-theme.ts
@@ -0,0 +1,51 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_orange_100,
+  chart_color_orange_200,
+  chart_color_orange_300,
+  chart_color_orange_400,
+  chart_color_orange_500,
+  global_active_color_200,
+  global_active_color_300,
+  global_Color_dark_200,
+  global_Color_light_100
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_light_100.value;
+const COLOR_STACK_STROKE = global_Color_dark_200.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#151515';
+const COLOR_TOOLTIP_STROKE = '#151515';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_orange_300.value,
+  chart_color_orange_100.value,
+  chart_color_orange_500.value,
+  chart_color_orange_200.value,
+  chart_color_orange_400.value
+];
+
+export const DarkOrangeColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts
new file mode 100644
index 00000000000..88f118d88f2
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/dark/purple-color-theme.ts
@@ -0,0 +1,51 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_purple_100,
+  chart_color_purple_200,
+  chart_color_purple_300,
+  chart_color_purple_400,
+  chart_color_purple_500,
+  global_active_color_200,
+  global_active_color_300,
+  global_Color_dark_200,
+  global_Color_light_100
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_light_100.value;
+const COLOR_STACK_STROKE = global_Color_dark_200.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#151515';
+const COLOR_TOOLTIP_STROKE = '#151515';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#EDEDED';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_purple_300.value,
+  chart_color_purple_100.value,
+  chart_color_purple_500.value,
+  chart_color_purple_200.value,
+  chart_color_purple_400.value
+];
+
+export const DarkPurpleColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+});
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-theme.ts
index 78377b0470b..fef64cce319 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-theme.ts
@@ -4,12 +4,18 @@
 export const DonutStyles = {
   label: {
     subTitle: {
+      // Victory props only
       fill: '#bbb',
-      fontSize: 16
+      fontSize: 14
     },
+    subTitlePosition: 'center',
     title: {
-      fontSize: 26
+      // Victory props only
+      fontSize: 24
     }
+  },
+  legend: {
+    position: 'right'
   }
 };
 
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts
index 7c7151d1b3b..e49d21dd45c 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/donut-utilization-theme.ts
@@ -2,18 +2,6 @@
 
 // Donut utilization styles
 export const DonutUtilizationStyles = {
-  label: {
-    subTitle: {
-      fill: '#bbb',
-      fontSize: 16
-    },
-    title: {
-      fontSize: 26
-    }
-  },
-  legend: {
-    orientation: 'vertical'
-  },
   thresholds: {
     colorScale: ['#F0AB00', '#C9190B']
   }
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/label-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/label-theme.ts
new file mode 100644
index 00000000000..ac60140680f
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/label-theme.ts
@@ -0,0 +1,7 @@
+/* eslint-disable camelcase */
+import { global_FontFamily_sans_serif } from '@patternfly/react-tokens';
+
+// Label styles
+export const LabelStyles = {
+  fontFamily: global_FontFamily_sans_serif.value
+};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts
index cc3cf85f565..0863424022a 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/blue-color-theme.ts
@@ -1,6 +1,10 @@
 /* eslint-disable camelcase */
 import {
-  global_active_color_100,
+  chart_color_blue_100,
+  chart_color_blue_200,
+  chart_color_blue_300,
+  chart_color_blue_400,
+  chart_color_blue_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_100,
@@ -15,12 +19,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_dark_100.value;
-const COLOR_SCALE = [
-  global_active_color_100.value,
-  global_active_color_200.value,
-  global_active_color_300.value,
-  '#0066ff'
-];
 const COLOR_STACK_STROKE = global_Color_light_100.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#EDEDED';
@@ -28,6 +26,16 @@ const COLOR_TOOLTIP_STROKE = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
 
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_blue_300.value,
+  chart_color_blue_100.value,
+  chart_color_blue_500.value,
+  chart_color_blue_200.value,
+  chart_color_blue_400.value
+];
+
 export const LightBlueColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts
new file mode 100644
index 00000000000..620d7a13d75
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/cyan-color-theme.ts
@@ -0,0 +1,51 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_cyan_100,
+  chart_color_cyan_200,
+  chart_color_cyan_300,
+  chart_color_cyan_400,
+  chart_color_cyan_500,
+  global_Color_dark_100,
+  global_Color_light_100,
+  global_active_color_200,
+  global_active_color_300,
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_dark_100.value;
+const COLOR_STACK_STROKE = global_Color_light_100.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#EDEDED';
+const COLOR_TOOLTIP_STROKE = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_cyan_300.value,
+  chart_color_cyan_100.value,
+  chart_color_cyan_500.value,
+  chart_color_cyan_200.value,
+  chart_color_cyan_400.value
+];
+
+export const LightCyanColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+}) ;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts
new file mode 100644
index 00000000000..fb5639baba4
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gold-color-theme.ts
@@ -0,0 +1,52 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_gold_100,
+  chart_color_gold_200,
+  chart_color_gold_300,
+  chart_color_gold_400,
+  chart_color_gold_500,
+  global_Color_dark_100,
+  global_Color_light_100,
+  global_active_color_200,
+  global_active_color_300,
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_dark_100.value;
+const COLOR_STACK_STROKE = global_Color_light_100.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#EDEDED';
+const COLOR_TOOLTIP_STROKE = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_gold_300.value,
+  chart_color_gold_100.value,
+  chart_color_gold_500.value,
+  chart_color_gold_200.value,
+  chart_color_gold_400.value,
+
+];
+
+export const LightGoldColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+}) ;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/grey-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts
similarity index 68%
rename from packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/grey-color-theme.ts
rename to packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts
index 5b9a659e65c..b20af69f7e0 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/grey-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/gray-color-theme.ts
@@ -1,5 +1,10 @@
 /* eslint-disable camelcase */
 import {
+  chart_color_black_100,
+  chart_color_black_200,
+  chart_color_black_300,
+  chart_color_black_400,
+  chart_color_black_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_100,
@@ -14,7 +19,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_dark_100.value;
-const COLOR_SCALE = ['#EDEDED', '#D2D2D2', '#BBBBBB'];
 const COLOR_STACK_STROKE = global_Color_light_100.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#EDEDED';
@@ -22,7 +26,17 @@ const COLOR_TOOLTIP_STROKE = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
 
-export const LightGreyColorTheme = ColorTheme({
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_black_300.value,
+  chart_color_black_100.value,
+  chart_color_black_500.value,
+  chart_color_black_200.value,
+  chart_color_black_400.value
+];
+
+export const LightGrayColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
   COLOR_FILL,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts
index 435f26fd7ee..748ea248f5e 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/green-color-theme.ts
@@ -1,11 +1,14 @@
 /* eslint-disable camelcase */
 import {
+  chart_color_green_100,
+  chart_color_green_200,
+  chart_color_green_300,
+  chart_color_green_400,
+  chart_color_green_500,
   global_Color_dark_100,
   global_Color_light_100,
   global_active_color_200,
   global_active_color_300,
-  global_success_color_100,
-  global_success_color_200
 } from '@patternfly/react-tokens';
 import { ColorTheme } from '../color-theme';
 
@@ -16,7 +19,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_dark_100.value;
-const COLOR_SCALE = [global_success_color_100.value, global_success_color_200.value, '#59C768'];
 const COLOR_STACK_STROKE = global_Color_light_100.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#EDEDED';
@@ -24,6 +26,16 @@ const COLOR_TOOLTIP_STROKE = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
 
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_green_300.value,
+  chart_color_green_100.value,
+  chart_color_green_500.value,
+  chart_color_green_200.value,
+  chart_color_green_400.value
+];
+
 export const LightGreenColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/multi-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/multi-color-theme.ts
index 2bee48203a2..4203c8c4d3e 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/multi-color-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/multi-color-theme.ts
@@ -1,5 +1,40 @@
 /* eslint-disable camelcase */
 import {
+  chart_color_blue_100,
+  chart_color_blue_200,
+  chart_color_blue_300,
+  chart_color_blue_400,
+  chart_color_blue_500,
+  chart_color_green_100,
+  chart_color_green_200,
+  chart_color_green_300,
+  chart_color_green_400,
+  chart_color_green_500,
+  chart_color_cyan_100,
+  chart_color_cyan_200,
+  chart_color_cyan_300,
+  chart_color_cyan_400,
+  chart_color_cyan_500,
+  chart_color_purple_100,
+  chart_color_purple_200,
+  chart_color_purple_300,
+  chart_color_purple_400,
+  chart_color_purple_500,
+  chart_color_gold_100,
+  chart_color_gold_200,
+  chart_color_gold_300,
+  chart_color_gold_400,
+  chart_color_gold_500,
+  chart_color_orange_100,
+  chart_color_orange_200,
+  chart_color_orange_300,
+  chart_color_orange_400,
+  chart_color_orange_500,
+  chart_color_black_100,
+  chart_color_black_200,
+  chart_color_black_300,
+  chart_color_black_400,
+  chart_color_black_500,
   global_active_color_200,
   global_active_color_300,
   global_Color_dark_100,
@@ -14,7 +49,6 @@ const COLOR_AXIS_FILL = 'transparent';
 const COLOR_AXIS_STROKE = '#D2D2D2';
 const COLOR_FILL = global_active_color_200.value;
 const COLOR_LABEL = global_Color_dark_100.value;
-const COLOR_SCALE = ['#39A5DC', '#9C92F5', '#59C768', '#FFD47D'];
 const COLOR_STACK_STROKE = global_Color_light_100.value;
 const COLOR_STROKE = global_active_color_300.value;
 const COLOR_TOOLTIP_FILL = '#EDEDED';
@@ -22,6 +56,46 @@ const COLOR_TOOLTIP_STROKE = '#EDEDED';
 const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
 const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
 
+// The color order below improves the color contrast in unordered charts
+// See https://github.com/patternfly/patternfly-next/issues/1551
+const COLOR_SCALE = [
+  chart_color_blue_300.value,
+  chart_color_gold_300.value,
+  chart_color_green_300.value,
+  chart_color_purple_300.value,
+  chart_color_orange_300.value,
+  chart_color_cyan_300.value,
+  chart_color_black_300.value,
+  chart_color_blue_100.value,
+  chart_color_gold_500.value,
+  chart_color_green_100.value,
+  chart_color_purple_500.value,
+  chart_color_orange_100.value,
+  chart_color_cyan_500.value,
+  chart_color_black_100.value,
+  chart_color_blue_500.value,
+  chart_color_gold_100.value,
+  chart_color_green_500.value,
+  chart_color_purple_100.value,
+  chart_color_orange_500.value,
+  chart_color_cyan_100.value,
+  chart_color_black_500.value,
+  chart_color_blue_200.value,
+  chart_color_gold_400.value,
+  chart_color_green_200.value,
+  chart_color_purple_400.value,
+  chart_color_orange_200.value,
+  chart_color_cyan_400.value,
+  chart_color_black_200.value,
+  chart_color_blue_400.value,
+  chart_color_gold_200.value,
+  chart_color_green_400.value,
+  chart_color_purple_200.value,
+  chart_color_orange_400.value,
+  chart_color_cyan_200.value,
+  chart_color_black_400.value
+];
+
 export const LightMultiColorTheme = ColorTheme({
   COLOR_AXIS_FILL,
   COLOR_AXIS_STROKE,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts
new file mode 100644
index 00000000000..872e82ac1e1
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/orange-color-theme.ts
@@ -0,0 +1,52 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_orange_100,
+  chart_color_orange_200,
+  chart_color_orange_300,
+  chart_color_orange_400,
+  chart_color_orange_500,
+  global_Color_dark_100,
+  global_Color_light_100,
+  global_active_color_200,
+  global_active_color_300,
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_dark_100.value;
+const COLOR_STACK_STROKE = global_Color_light_100.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#EDEDED';
+const COLOR_TOOLTIP_STROKE = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_orange_300.value,
+  chart_color_orange_100.value,
+  chart_color_orange_500.value,
+  chart_color_orange_200.value,
+  chart_color_orange_400.value,
+
+];
+
+export const LightOrangeColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+}) ;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts
new file mode 100644
index 00000000000..c9894d02bcd
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartTheme/themes/light/purple-color-theme.ts
@@ -0,0 +1,51 @@
+/* eslint-disable camelcase */
+import {
+  chart_color_purple_100,
+  chart_color_purple_200,
+  chart_color_purple_300,
+  chart_color_purple_400,
+  chart_color_purple_500,
+  global_Color_dark_100,
+  global_Color_light_100,
+  global_active_color_200,
+  global_active_color_300,
+} from '@patternfly/react-tokens';
+import { ColorTheme } from '../color-theme';
+
+// TODO Replace values with PF css variable when available
+
+// Colors
+const COLOR_AXIS_FILL = 'transparent';
+const COLOR_AXIS_STROKE = '#D2D2D2';
+const COLOR_FILL = global_active_color_200.value;
+const COLOR_LABEL = global_Color_dark_100.value;
+const COLOR_STACK_STROKE = global_Color_light_100.value;
+const COLOR_STROKE = global_active_color_300.value;
+const COLOR_TOOLTIP_FILL = '#EDEDED';
+const COLOR_TOOLTIP_STROKE = '#EDEDED';
+const COLOR_TOOLTIP_FLYOUT_FILL = '#151515';
+const COLOR_TOOLTIP_FLYOUT_STROKE = '#151515';
+
+// Color scale
+// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit
+const COLOR_SCALE = [
+  chart_color_purple_300.value,
+  chart_color_purple_100.value,
+  chart_color_purple_500.value,
+  chart_color_purple_200.value,
+  chart_color_purple_400.value
+];
+
+export const LightPurpleColorTheme = ColorTheme({
+  COLOR_AXIS_FILL,
+  COLOR_AXIS_STROKE,
+  COLOR_FILL,
+  COLOR_LABEL,
+  COLOR_SCALE,
+  COLOR_STACK_STROKE,
+  COLOR_STROKE,
+  COLOR_TOOLTIP_FILL,
+  COLOR_TOOLTIP_STROKE,
+  COLOR_TOOLTIP_FLYOUT_FILL,
+  COLOR_TOOLTIP_FLYOUT_STROKE
+}) ;
diff --git a/packages/patternfly-4/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
index 1e79a4e41a7..10cdfdcd8dd 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap
@@ -25,9 +25,10 @@ exports[`ChartTooltip 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -53,9 +54,10 @@ exports[`ChartTooltip 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -101,9 +103,10 @@ exports[`ChartTooltip 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -127,9 +130,10 @@ exports[`ChartTooltip 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -207,9 +211,10 @@ exports[`ChartTooltip 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -233,9 +238,10 @@ exports[`ChartTooltip 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -250,9 +256,10 @@ exports[`ChartTooltip 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -277,9 +284,10 @@ exports[`ChartTooltip 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -288,9 +296,10 @@ exports[`ChartTooltip 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -320,9 +329,10 @@ exports[`ChartTooltip 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -347,9 +357,10 @@ exports[`ChartTooltip 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -372,9 +383,10 @@ exports[`ChartTooltip 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -399,9 +411,10 @@ exports[`ChartTooltip 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -438,9 +451,10 @@ exports[`ChartTooltip 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -499,9 +513,10 @@ exports[`ChartTooltip 2`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -527,9 +542,10 @@ exports[`ChartTooltip 2`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -575,9 +591,10 @@ exports[`ChartTooltip 2`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -601,9 +618,10 @@ exports[`ChartTooltip 2`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -681,9 +699,10 @@ exports[`ChartTooltip 2`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -707,9 +726,10 @@ exports[`ChartTooltip 2`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -724,9 +744,10 @@ exports[`ChartTooltip 2`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -751,9 +772,10 @@ exports[`ChartTooltip 2`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -762,9 +784,10 @@ exports[`ChartTooltip 2`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -794,9 +817,10 @@ exports[`ChartTooltip 2`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -821,9 +845,10 @@ exports[`ChartTooltip 2`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -846,9 +871,10 @@ exports[`ChartTooltip 2`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -873,9 +899,10 @@ exports[`ChartTooltip 2`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -912,9 +939,10 @@ exports[`ChartTooltip 2`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -965,9 +993,10 @@ exports[`allows tooltip via container component 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -993,9 +1022,10 @@ exports[`allows tooltip via container component 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1041,9 +1071,10 @@ exports[`allows tooltip via container component 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1067,9 +1098,10 @@ exports[`allows tooltip via container component 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1147,9 +1179,10 @@ exports[`allows tooltip via container component 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1173,9 +1206,10 @@ exports[`allows tooltip via container component 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1190,9 +1224,10 @@ exports[`allows tooltip via container component 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1217,9 +1252,10 @@ exports[`allows tooltip via container component 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1228,9 +1264,10 @@ exports[`allows tooltip via container component 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1260,9 +1297,10 @@ exports[`allows tooltip via container component 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1287,9 +1325,10 @@ exports[`allows tooltip via container component 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1312,9 +1351,10 @@ exports[`allows tooltip via container component 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1339,9 +1379,10 @@ exports[`allows tooltip via container component 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1378,9 +1419,10 @@ exports[`allows tooltip via container component 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-label.ts b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-label.ts
new file mode 100644
index 00000000000..7eb91e49c37
--- /dev/null
+++ b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-label.ts
@@ -0,0 +1,77 @@
+import { CommonStyles } from '../ChartTheme/themes/common-theme';
+import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
+
+interface ChartLabelDimensionsInterface {
+  label: string; // The label text
+  theme: ChartThemeDefinition; // The theme that will be applied to the chart
+}
+
+interface ChartLabelPaddingXInterface {
+  dx?: number; // Horizontal shift from the x coordinate
+  chartWidth: number; // Width of chart (e.g., donut) within SVG
+  labelPosition: string; // Position of label (e.g., bottom, right)
+  legendPosition: string; // Position of legend (e.g., bottom, right)
+  svgWidth: number; // Overall width of SVG
+}
+
+interface ChartLabelPaddingYInterface {
+  dy?: number; // Vertical shift from the x coordinate
+  chartHeight: number; // Width of chart (e.g., donut) within SVG
+  labelPosition: string; // Position of label (e.g., bottom, right)
+}
+
+// Returns x coordinate for label
+export const getLabelX = ({
+  chartWidth,
+  dx = 0,
+  labelPosition,
+  legendPosition,
+  svgWidth
+}: ChartLabelPaddingXInterface) => {
+  if (!chartWidth) {
+    return 0;
+  }
+  switch (labelPosition) {
+    case 'center':
+      switch (legendPosition) {
+        case 'bottom':
+          return Math.round(svgWidth / 2) + dx;
+        default:
+          return Math.round(chartWidth / 2) + dx;
+      }
+    case 'bottom':
+      return Math.round(chartWidth / 2) + dx;
+    case 'right':
+      switch (legendPosition) {
+        case 'bottom':
+          return Math.round(svgWidth / 2) + Math.round(chartWidth / 2) + CommonStyles.label.margin + dx;
+        case 'right':
+          return chartWidth + CommonStyles.label.margin + dx;
+        default:
+          return dx;
+      }
+    default:
+      return dx;
+  }
+};
+
+// Returns y coordinate for label
+export const getLabelY = ({
+  chartHeight,
+  dy = 0,
+  labelPosition,
+}: ChartLabelPaddingYInterface) => {
+  if (!chartHeight) {
+    return 0;
+  }
+  switch (labelPosition) {
+    case 'center':
+      return Math.round(chartHeight / 2) + dy;
+    case 'bottom':
+      return chartHeight + CommonStyles.label.margin + dy;
+    case 'right':
+      return Math.round(chartHeight / 2) + dy;
+    default:
+      return dy;
+  }
+};
diff --git a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-legend.ts
index 83d72069d94..e1fd48883b5 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-legend.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-legend.ts
@@ -1,22 +1,42 @@
+import { VictoryLegend } from 'victory';
+import { TextSize } from 'victory-core';
+import { ChartLegendProps } from '../ChartLegend/ChartLegend';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
+import { CommonStyles } from '../ChartTheme/themes/common-theme';
 
 interface ChartLegendPaddingXInterface {
-  chartOrientation: string;
-  legendOrientation: string;
-  legendWidth: number;
-  theme: ChartThemeDefinition;
-  width: number;
+  chartWidth: number; // Width of chart (e.g., donut) within SVG
+  dx?: number; // Horizontal shift from the x coordinate
+  legendData: any[]; // The legend data used to determine width
+  legendOrientation: string; // Orientation of legend (e.g., vertical, horizontal)
+  legendPosition: string; // Position of legend (e.g., bottom, right)
+  legendProps: any; // The legend props used to determine width
+  svgWidth: number; // Overall width of SVG
+  theme: ChartThemeDefinition; // The theme that will be applied to the chart
 }
 
 interface ChartLegendPaddingYInterface {
-  chartDy?: number;
-  chartHeight: number;
-  chartOrientation: string;
-  chartType: string;
-  height: number;
-  legendData: any[]
-  legendHeight: number;
-  theme: ChartThemeDefinition;
+  chartHeight: number; // Height of chart (e.g., donut) within SVG
+  chartType: string; // The type of chart (e.g., pie) to lookup for props like padding
+  dy?: number; // Vertical shift from the x coordinate
+  legendData: any[]; // The legend data used to determine width
+  legendOrientation: string; // Orientation of legend (e.g., vertical, horizontal)
+  legendPosition: string; // Position of legend (e.g., bottom, right)
+  legendProps: any; // The legend props used to determine width
+  theme: ChartThemeDefinition; // The theme that will be applied to the chart
+}
+
+interface ChartLegendDimensionsInterface {
+  legendData: any[]; // The legend data used to determine width
+  legendOrientation: string; // Orientation of legend (e.g., vertical, horizontal)
+  legendProps: ChartLegendProps; // Legend properties
+  theme: ChartThemeDefinition; // The theme that will be applied to the chart
+}
+
+interface ChartLegendTextSizeInterface {
+  legendData: any[]; // The legend data used to determine width
+  legendOrientation?: string; // Orientation of legend (e.g., vertical, horizontal)
+  theme: ChartThemeDefinition; // The theme that will be applied to the chart
 }
 
 // Returns chart padding
@@ -27,56 +47,118 @@ export const getChartPadding = (chartType: string = 'chart', theme: ChartThemeDe
   return padding + offset;
 };
 
-// Returns legend padding
-export const getLegendPadding = (legendData: any[]) => (legendData && legendData.length > 0 ? 15 : 0);
+// Returns legend dimensions
+export const getLegendDimensions = ({
+  legendData,
+  legendOrientation,
+  legendProps,
+  theme
+}: ChartLegendDimensionsInterface) => {
+  if (legendData || legendProps.data) {
+    return (VictoryLegend as any).getDimensions({
+      data: legendData,
+      orientation: legendOrientation,
+      theme,
+      ...legendProps // override above
+    });
+  }
+  return {};
+}
 
 // Returns x coordinate for legend
 export const getLegendX = ({
-  chartOrientation,
+  chartWidth,
+  dx = 0,
+  legendData,
   legendOrientation,
-  legendWidth,
-  theme,
-  width
+  legendPosition,
+  legendProps,
+  svgWidth,
+  theme
 }: ChartLegendPaddingXInterface) => {
-  if (!legendWidth) {
-    return 0;
-  }
-  const offset = legendOrientation === 'vertical' ? 22 : 4;
-  const gutter = legendOrientation === 'vertical' ? theme.legend.gutter : 0;
-  const padding = gutter + offset;
-  switch (chartOrientation) {
-    case 'left':
-      return width > legendWidth ? width - legendWidth : 0;
-    case 'top':
-      return width > legendWidth - padding ? Math.round((width - (legendWidth - padding)) / 2) : 0;
+  const legendDimensions = getLegendDimensions({
+    legendData,
+    legendOrientation,
+    legendProps,
+    theme
+  });
+  const textSizeWorkAround = getTextSizeWorkAround({
+    legendData,
+    legendOrientation,
+    theme
+  });
+  switch (legendPosition) {
+    case 'bottom':
+      return svgWidth > legendDimensions.width - textSizeWorkAround
+        ? Math.round((svgWidth - (legendDimensions.width - textSizeWorkAround)) / 2) + dx : dx;
+    case 'right':
+      return chartWidth + CommonStyles.legend.margin + dx;
     default:
-      return 0;
+      return dx;
   }
 };
 
 // Returns y coordinate for legend
 export const getLegendY = ({
-  chartDy = 0,
   chartHeight,
-  chartOrientation,
+  dy = 0,
+  legendPosition,
   chartType,
-  height,
   legendData,
-  legendHeight,
+  legendOrientation,
+  legendProps,
   theme
 }: ChartLegendPaddingYInterface) => {
-  // Todo: Get padding for other types of charts
+  const legendDimensions = getLegendDimensions({
+    legendData,
+    legendOrientation,
+    legendProps,
+    theme
+  });
+  const getLegendPadding = (legendData: any[]) => (legendData && legendData.length > 0 ? 15 : 0);
   const dHeight = chartHeight ? chartHeight + getChartPadding(chartType, theme) : 0;
-  const lHeight = legendHeight ? legendHeight + getLegendPadding(legendData) : 0;
+  const lHeight = legendDimensions.height ? legendDimensions.height + getLegendPadding(legendData) : 0;
 
-  switch (chartOrientation) {
+  switch (legendPosition) {
+    case 'bottom':
+      return chartHeight + CommonStyles.legend.margin + dy;
     case 'left':
-      return dHeight > lHeight ? Math.round((dHeight - lHeight) / 2) + chartDy : 0;
+      return dHeight > lHeight ? Math.round((dHeight - lHeight) / 2) + dy : dy;
     case 'right':
-      return dHeight > lHeight ? Math.round((dHeight - lHeight) / 2) + chartDy : 0;
-    case 'top':
-      return height > lHeight ? height - lHeight + chartDy : 0;
+      return dHeight > lHeight ? Math.round((dHeight - lHeight) / 2) + dy : dy;
     default:
-      return chartDy;
+      return dy;
+  }
+};
+
+// Returns an approximation of over-sized text width due to growing character count
+//
+// See https://github.com/FormidableLabs/victory/issues/864
+const getTextSizeWorkAround = ({
+  legendData,
+  legendOrientation,
+  theme
+}: ChartLegendTextSizeInterface) => {
+  const style = theme.legend.style.labels;
+  if (!(legendData && style.fontFamily.includes('overpass'))) {
+    return 0;
+  }
+
+  // For horizontal legends, account for the growing char count of the last legend item
+  let result = legendData[legendData.length - 1].name;
+
+  // For vertical legends, account for the growing char count of the longest legend item
+  if (legendOrientation === 'vertical') {
+    legendData.forEach(data => {
+      if (data.name && data.name.length > result.length) {
+        result = data.name;
+      }
+    });
   }
+  const textSize = TextSize.approximateTextSize(result,  style);
+  const adjustedTextSize = TextSize.approximateTextSize(result,  {
+    ...style,
+    characterConstant: 2.5875 // Average pixels per glyph
+  });
+  return Math.abs(textSize.width - adjustedTextSize.width);
 };
diff --git a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-origin.ts b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-origin.ts
index 3a87888cbbe..7dbcdd19264 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-origin.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-origin.ts
@@ -1,61 +1,63 @@
 interface ChartOriginInterface {
-  chartDx?: number;
-  chartDy?: number;
-  chartHeight: number;
-  chartOrientation: string;
-  chartWidth: number;
-  height: number;
-  width: number;
+  chartHeight: number; // Height of chart (e.g., donut) within SVG
+  chartWidth: number; // Width of chart (e.g., donut) within SVG
+  dx?: number; // Horizontal shift from the x coordinate
+  dy?: number; // vertical shift from the x coordinate
+  legendPosition?: string; // Position of legend (e.g., bottom, right)
+  svgWidth: number; // Overall width of SVG
 }
 
 interface ChartOriginXInterface {
-  chartDx?: number;
-  chartOrientation: string;
-  chartWidth: number;
-  width: number;
+  chartWidth: number; // Width of chart (e.g., donut) within SVG
+  dx?: number; // Horizontal shift from the x coordinate
+  legendPosition?: string; // Position of legend (e.g., bottom, right)
+  svgWidth: number; // Overall width of SVG
 }
 
 interface ChartOriginYInterface {
-  chartDy?: number;
-  chartHeight: number;
-  chartOrientation: string;
-  height: number;
+  chartHeight: number; // Height of chart (e.g., donut) within SVG
+  dy?: number; // vertical shift from the x coordinate
+  legendPosition?: string; // Position of legend (e.g., bottom, right)
 }
 
 // Returns origin x and y coordinates
 export const getChartOrigin = ({
-  chartDx = 0,
-  chartDy = 0,
   chartHeight,
-  chartOrientation,
   chartWidth,
-  height,
-  width
+  dx = 0,
+  dy = 0,
+  legendPosition,
+  svgWidth
 }: ChartOriginInterface) => ({
-  x: getChartOriginX({ chartDx, chartOrientation, chartWidth, width }),
-  y: getChartOriginY({ chartDy, chartHeight, chartOrientation, height })
+  x: getChartOriginX({ chartWidth, dx, legendPosition, svgWidth }),
+  y: getChartOriginY({ chartHeight, dy, legendPosition })
 });
 
 // Returns origin x coordinate
-export const getChartOriginX = ({ chartDx = 0, chartOrientation, chartWidth, width }: ChartOriginXInterface) => {
-  switch (chartOrientation) {
-    case 'left':
-      return (chartWidth ? Math.round(chartWidth / 2) : 0) + chartDx;
-    case 'right':
-      return (width > chartWidth ? Math.round(width - chartWidth / 2) : 0) + chartDx;
-    case 'top':
-      return (width ? Math.round(width / 2) : 0) + chartDx;
+export const getChartOriginX = ({
+  chartWidth,
+  dx = 0,
+  legendPosition,
+  svgWidth
+}: ChartOriginXInterface) => {
+  switch (legendPosition) {
+    case 'bottom':
+      return Math.round(svgWidth / 2) + dx;
     default:
-      return 0;
+      return Math.round(chartWidth / 2) + dx;
   }
 };
 
 // Returns origin y coordinate
-export const getChartOriginY = ({ chartDy = 0, chartHeight, chartOrientation, height }: ChartOriginYInterface) => {
-  switch (chartOrientation) {
-    case 'bottom':
-      return chartDy; // TBD...
+export const getChartOriginY = ({
+  chartHeight,
+  dy = 0,
+  legendPosition
+}: ChartOriginYInterface) => {
+  switch (legendPosition) {
+    case 'top':
+      return dy; // TBD...
     default:
-      return (chartHeight ? Math.round(chartHeight / 2) : 0) + chartDy;
+      return Math.round(chartHeight / 2) + dy;
   }
 };
diff --git a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-theme.ts b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-theme.ts
index b1fcca40940..bb090ec26f5 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-theme.ts
+++ b/packages/patternfly-4/react-charts/src/components/ChartUtils/chart-theme.ts
@@ -1,12 +1,20 @@
 import { merge } from 'lodash';
 import { DarkBlueColorTheme } from '../ChartTheme/themes/dark/blue-color-theme';
+import { DarkCyanColorTheme } from '../ChartTheme/themes/dark/cyan-color-theme';
+import { DarkGoldColorTheme } from '../ChartTheme/themes/dark/gold-color-theme';
+import { DarkGrayColorTheme } from '../ChartTheme/themes/dark/gray-color-theme';
 import { DarkGreenColorTheme } from '../ChartTheme/themes/dark/green-color-theme';
-import { DarkGreyColorTheme } from '../ChartTheme/themes/dark/grey-color-theme';
 import { DarkMultiColorTheme } from '../ChartTheme/themes/dark/multi-color-theme';
+import { DarkOrangeColorTheme } from '../ChartTheme/themes/dark/orange-color-theme';
+import { DarkPurpleColorTheme } from '../ChartTheme/themes/dark/purple-color-theme';
 import { LightBlueColorTheme } from '../ChartTheme/themes/light/blue-color-theme';
+import { LightCyanColorTheme } from '../ChartTheme/themes/light/cyan-color-theme';
+import { LightGoldColorTheme } from '../ChartTheme/themes/light/gold-color-theme';
+import { LightGrayColorTheme } from '../ChartTheme/themes/light/gray-color-theme';
 import { LightGreenColorTheme } from '../ChartTheme/themes/light/green-color-theme';
-import { LightGreyColorTheme } from '../ChartTheme/themes/light/grey-color-theme';
 import { LightMultiColorTheme } from '../ChartTheme/themes/light/multi-color-theme';
+import { LightOrangeColorTheme } from '../ChartTheme/themes/light/orange-color-theme';
+import { LightPurpleColorTheme } from '../ChartTheme/themes/light/purple-color-theme';
 import {
   ChartBaseTheme,
   ChartDonutTheme,
@@ -34,6 +42,9 @@ export const getDonutThresholdDynamicTheme = (themeColor: string, themeVariant:
 
   // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale
   theme.legend.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdDynamicTheme.legend.colorScale];
+
+  // Merge the threshold colors in case users want to show the unused data
+  theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdStaticTheme.pie.colorScale];
   return theme;
 };
 
@@ -57,12 +68,20 @@ export const getDarkThemeColors = (themeColor: string) => {
   switch (themeColor) {
     case ChartThemeColor.blue:
       return DarkBlueColorTheme;
+    case ChartThemeColor.cyan:
+      return DarkCyanColorTheme;
+    case ChartThemeColor.gold:
+      return DarkGoldColorTheme;
+    case ChartThemeColor.gray:
+      return DarkGrayColorTheme;
     case ChartThemeColor.green:
       return DarkGreenColorTheme;
-    case ChartThemeColor.grey:
-      return DarkGreyColorTheme;
     case ChartThemeColor.multi:
       return DarkMultiColorTheme;
+    case ChartThemeColor.orange:
+      return DarkOrangeColorTheme;
+    case ChartThemeColor.purple:
+      return DarkPurpleColorTheme;
     default:
       return DarkBlueColorTheme;
   }
@@ -73,12 +92,20 @@ export const getLightThemeColors = (themeColor: string) => {
   switch (themeColor) {
     case ChartThemeColor.blue:
       return LightBlueColorTheme;
+    case ChartThemeColor.cyan:
+      return LightCyanColorTheme;
+    case ChartThemeColor.gold:
+      return LightGoldColorTheme;
+    case ChartThemeColor.gray:
+      return LightGrayColorTheme;
     case ChartThemeColor.green:
       return LightGreenColorTheme;
-    case ChartThemeColor.grey:
-      return LightGreyColorTheme;
     case ChartThemeColor.multi:
       return LightMultiColorTheme;
+    case ChartThemeColor.orange:
+      return LightOrangeColorTheme;
+    case ChartThemeColor.purple:
+      return LightPurpleColorTheme;
     default:
       return LightBlueColorTheme;
   }
diff --git a/packages/patternfly-4/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap b/packages/patternfly-4/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap
index 3ac07f4771d..8de49369076 100644
--- a/packages/patternfly-4/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap
+++ b/packages/patternfly-4/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap
@@ -12,9 +12,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -40,9 +41,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -88,9 +90,10 @@ exports[`ChartVoronoiContainer 1`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -114,9 +117,10 @@ exports[`ChartVoronoiContainer 1`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -194,9 +198,10 @@ exports[`ChartVoronoiContainer 1`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -220,9 +225,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -237,9 +243,10 @@ exports[`ChartVoronoiContainer 1`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -264,9 +271,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -275,9 +283,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -307,9 +316,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -334,9 +344,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -359,9 +370,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -386,9 +398,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -425,9 +438,10 @@ exports[`ChartVoronoiContainer 1`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -479,9 +493,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "area": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -507,9 +522,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "axis": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -555,9 +571,10 @@ exports[`ChartVoronoiContainer 2`] = `
             "barWidth": 10,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -581,9 +598,10 @@ exports[`ChartVoronoiContainer 2`] = `
             "boxWidth": 20,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -661,9 +679,10 @@ exports[`ChartVoronoiContainer 2`] = `
             },
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -687,9 +706,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "chart": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -704,9 +724,10 @@ exports[`ChartVoronoiContainer 2`] = `
             "borderWidth": 8,
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -731,9 +752,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "group": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -742,9 +764,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "legend": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "gutter": 20,
             "orientation": "horizontal",
@@ -774,9 +797,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "line": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -801,9 +825,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "pie": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 230,
             "padding": 8,
@@ -826,9 +851,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "scatter": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -853,9 +879,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "stack": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -892,9 +919,10 @@ exports[`ChartVoronoiContainer 2`] = `
           "voronoi": Object {
             "colorScale": Array [
               "#06c",
-              "#bee1f4",
-              "#73bcf7",
-              "#0066ff",
+              "#8bc1f7",
+              "#002f5d",
+              "#519de9",
+              "#004b95",
             ],
             "height": 300,
             "padding": 50,
@@ -947,9 +975,10 @@ exports[`renders container via ChartGroup 1`] = `
       "area": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -975,9 +1004,10 @@ exports[`renders container via ChartGroup 1`] = `
       "axis": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1023,9 +1053,10 @@ exports[`renders container via ChartGroup 1`] = `
         "barWidth": 10,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1049,9 +1080,10 @@ exports[`renders container via ChartGroup 1`] = `
         "boxWidth": 20,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1129,9 +1161,10 @@ exports[`renders container via ChartGroup 1`] = `
         },
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1155,9 +1188,10 @@ exports[`renders container via ChartGroup 1`] = `
       "chart": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1172,9 +1206,10 @@ exports[`renders container via ChartGroup 1`] = `
         "borderWidth": 8,
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1199,9 +1234,10 @@ exports[`renders container via ChartGroup 1`] = `
       "group": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1210,9 +1246,10 @@ exports[`renders container via ChartGroup 1`] = `
       "legend": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "gutter": 20,
         "orientation": "horizontal",
@@ -1242,9 +1279,10 @@ exports[`renders container via ChartGroup 1`] = `
       "line": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1269,9 +1307,10 @@ exports[`renders container via ChartGroup 1`] = `
       "pie": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 230,
         "padding": 8,
@@ -1294,9 +1333,10 @@ exports[`renders container via ChartGroup 1`] = `
       "scatter": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1321,9 +1361,10 @@ exports[`renders container via ChartGroup 1`] = `
       "stack": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
@@ -1360,9 +1401,10 @@ exports[`renders container via ChartGroup 1`] = `
       "voronoi": Object {
         "colorScale": Array [
           "#06c",
-          "#bee1f4",
-          "#73bcf7",
-          "#0066ff",
+          "#8bc1f7",
+          "#002f5d",
+          "#519de9",
+          "#004b95",
         ],
         "height": 300,
         "padding": 50,
diff --git a/packages/patternfly-4/react-charts/src/declarations.d.ts b/packages/patternfly-4/react-charts/src/declarations.d.ts
index 323261667a2..cb4cdf22f8b 100644
--- a/packages/patternfly-4/react-charts/src/declarations.d.ts
+++ b/packages/patternfly-4/react-charts/src/declarations.d.ts
@@ -2,4 +2,5 @@ declare module 'victory-core' {
   export const Data: any;
   export const Helpers: any;
   export const Path: any;
+  export const TextSize: any;
 }
diff --git a/packages/patternfly-4/react-core/.babelrc b/packages/patternfly-4/react-core/.babelrc
new file mode 100644
index 00000000000..25c4221a16d
--- /dev/null
+++ b/packages/patternfly-4/react-core/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../.babelrc"
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/.babelrc.js b/packages/patternfly-4/react-core/.babelrc.js
deleted file mode 100644
index ee1e6c7192e..00000000000
--- a/packages/patternfly-4/react-core/.babelrc.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const babelENV = process.env.BABEL_ENV || 'development';
-const modules = babelENV !== 'production:esm' ? 'commonjs' : false;
-
-module.exports = {
-  presets: [['@babel/env', { modules }], '@babel/react'],
-  ignore: (() => {
-    const ignore = ['**/__snapshots__', '**/*.d.ts'];
-    if (babelENV.includes('production')) {
-      ignore.push('test.js', '__mocks__');
-    }
-    return ignore;
-  })(),
-  plugins: [
-    '@babel/plugin-transform-typescript',
-    'babel-plugin-typescript-to-proptypes',
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/proposal-class-properties',
-    '@babel/proposal-object-rest-spread',
-  ]
-};
diff --git a/packages/patternfly-4/react-core/.npmignore b/packages/patternfly-4/react-core/.npmignore
index e047f55d752..5344519a423 100644
--- a/packages/patternfly-4/react-core/.npmignore
+++ b/packages/patternfly-4/react-core/.npmignore
@@ -1,7 +1,6 @@
-src
 build
 dist/**/demos
 dist/**/examples
 dist/**/__snapshots__
-dist/**/*.docs.js
-dist/**/*.test.js
\ No newline at end of file
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-core/CHANGELOG.md b/packages/patternfly-4/react-core/CHANGELOG.md
index 749541a8888..7fce59336db 100644
--- a/packages/patternfly-4/react-core/CHANGELOG.md
+++ b/packages/patternfly-4/react-core/CHANGELOG.md
@@ -3,6 +3,226 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.48.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.48.4...@patternfly/react-core@3.48.5) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## [3.48.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.48.3...@patternfly/react-core@3.48.4) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## [3.48.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.48.2...@patternfly/react-core@3.48.3) (2019-06-18)
+
+
+### Bug Fixes
+
+* **popover:** reset pointer-events to capture default target bounds ([#2284](https://github.com/patternfly/patternfly-react/issues/2284)) ([910c667](https://github.com/patternfly/patternfly-react/commit/910c667))
+
+
+
+
+
+## [3.48.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.48.1...@patternfly/react-core@3.48.2) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## [3.48.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.48.0...@patternfly/react-core@3.48.1) (2019-06-18)
+
+
+### Bug Fixes
+
+* **Accordion:** final changes ([#2290](https://github.com/patternfly/patternfly-react/issues/2290)) ([6fce654](https://github.com/patternfly/patternfly-react/commit/6fce654))
+
+
+
+
+
+# [3.48.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.46.1...@patternfly/react-core@3.48.0) (2019-06-18)
+
+
+### Features
+
+* **ContextSelector:** Convert context selector to typescript ([#2147](https://github.com/patternfly/patternfly-react/issues/2147)) ([9a4f484](https://github.com/patternfly/patternfly-react/commit/9a4f484))
+
+
+
+
+
+# [3.47.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.46.1...@patternfly/react-core@3.47.0) (2019-06-18)
+
+
+### Features
+
+* **ContextSelector:** Convert context selector to typescript ([#2147](https://github.com/patternfly/patternfly-react/issues/2147)) ([9a4f484](https://github.com/patternfly/patternfly-react/commit/9a4f484))
+
+
+
+
+
+## [3.46.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.46.0...@patternfly/react-core@3.46.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# [3.46.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.45.0...@patternfly/react-core@3.46.0) (2019-06-14)
+
+
+### Bug Fixes
+
+* **Alert:** set the variant prop to info by default ([#2218](https://github.com/patternfly/patternfly-react/issues/2218)) ([bd8afad](https://github.com/patternfly/patternfly-react/commit/bd8afad))
+* **react-icons:** add noVerticalAlign prop to d.ts file ([#2238](https://github.com/patternfly/patternfly-react/issues/2238)) ([c50143c](https://github.com/patternfly/patternfly-react/commit/c50143c)), closes [#2237](https://github.com/patternfly/patternfly-react/issues/2237)
+
+
+### Features
+
+* **Accordion:** Accordion Component TypeScript Conversion ([#2121](https://github.com/patternfly/patternfly-react/issues/2121)) ([e2e981d](https://github.com/patternfly/patternfly-react/commit/e2e981d))
+
+
+
+
+
+# [3.45.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.44.0...@patternfly/react-core@3.45.0) (2019-06-14)
+
+
+### Features
+
+* **PF4: Application launcher:** Use dropdown components in App launcher ([#2101](https://github.com/patternfly/patternfly-react/issues/2101)) ([44a2ea1](https://github.com/patternfly/patternfly-react/commit/44a2ea1))
+
+
+
+
+
+# [3.44.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.43.0...@patternfly/react-core@3.44.0) (2019-06-14)
+
+
+### Features
+
+* **PF4 Dropdown:** Wrap dropdown with context ([#2227](https://github.com/patternfly/patternfly-react/issues/2227)) ([5bb8051](https://github.com/patternfly/patternfly-react/commit/5bb8051))
+
+
+
+
+
+# [3.43.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.42.1...@patternfly/react-core@3.43.0) (2019-06-13)
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [3.42.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.42.0...@patternfly/react-core@3.42.1) (2019-06-13)
+
+
+### Bug Fixes
+
+* **pagination:** dropdown closes on click outside of menu area ([#2235](https://github.com/patternfly/patternfly-react/issues/2235)) ([a2942c2](https://github.com/patternfly/patternfly-react/commit/a2942c2))
+
+
+
+
+
+# [3.42.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.41.0...@patternfly/react-core@3.42.0) (2019-06-12)
+
+
+### Features
+
+* **Alert:** Add the inline alert modifier ([#2126](https://github.com/patternfly/patternfly-react/issues/2126)) ([230e83a](https://github.com/patternfly/patternfly-react/commit/230e83a)), closes [#1934](https://github.com/patternfly/patternfly-react/issues/1934)
+
+
+
+
+
+# [3.41.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.40.0...@patternfly/react-core@3.41.0) (2019-06-12)
+
+
+### Features
+
+* **react-core:** allow dynamic rendering of anchor components ([#2117](https://github.com/patternfly/patternfly-react/issues/2117)) ([c1c3be9](https://github.com/patternfly/patternfly-react/commit/c1c3be9))
+
+
+
+
+
+# [3.40.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.39.0...@patternfly/react-core@3.40.0) (2019-06-11)
+
+
+### Features
+
+* **ApplicationLauncher:** Convert application launcher to typescript ([#2166](https://github.com/patternfly/patternfly-react/issues/2166)) ([9b90f94](https://github.com/patternfly/patternfly-react/commit/9b90f94))
+* **Card:** Add support for images and actions ([#2122](https://github.com/patternfly/patternfly-react/issues/2122)) ([7832518](https://github.com/patternfly/patternfly-react/commit/7832518))
+
+
+
+
+
+# [3.39.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.1...@patternfly/react-core@3.39.0) (2019-06-11)
+
+
+### Features
+
+* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc))
+
+
+
+
+
+## [3.38.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.38.0...@patternfly/react-core@3.38.1) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# [3.38.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.1...@patternfly/react-core@3.38.0) (2019-06-10)
+
+
+### Features
+
+* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771))
+
+
+
+
+
+## [3.37.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.37.0...@patternfly/react-core@3.37.1) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# [3.37.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.1...@patternfly/react-core@3.37.0) (2019-06-07)
+
+
+### Features
+
+* **PF4: Pagination:** When empty array sent to pagination no per page should be visible ([#2175](https://github.com/patternfly/patternfly-react/issues/2175)) ([cb97dfd](https://github.com/patternfly/patternfly-react/commit/cb97dfd))
+
+
+
+
+
 ## [3.36.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@3.36.0...@patternfly/react-core@3.36.1) (2019-06-06)
 
 **Note:** Version bump only for package @patternfly/react-core
diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json
index a0d062f6649..c62c9775b5d 100644
--- a/packages/patternfly-4/react-core/package.json
+++ b/packages/patternfly-4/react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "3.36.1",
+  "version": "3.48.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -31,9 +31,9 @@
   "scripts": {
     "build": "yarn typecheck && yarn build:babel && yarn build:types && node ./scripts/copyTS.js && node ./scripts/copyStyles.js",
     "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
-    "build:babel:cjs": "babel src --out-dir dist/js --extensions '.js,.ts,.tsx' -q",
-    "build:babel:esm": "babel src --out-dir dist/esm --extensions '.js,.ts,.tsx' -q",
-    "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "build:types": "tsc -p tsconfig.gen-dts.json",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
@@ -41,9 +41,9 @@
     "typecheck": "tsc -p tsconfig.typecheck.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^3.9.3",
-    "@patternfly/react-styles": "^3.3.0",
-    "@patternfly/react-tokens": "^2.5.3",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-styles": "^3.4.2",
+    "@patternfly/react-tokens": "^2.6.1",
     "@tippy.js/react": "^1.1.1",
     "emotion": "^9.2.9",
     "exenv": "^1.2.2",
@@ -54,13 +54,11 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-transform-object-assign": "^7.0.0",
     "@babel/plugin-transform-typescript": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/patternfly": "2.8.2",
+    "@patternfly/patternfly": "2.13.0",
     "@types/enzyme": "3.9.0",
     "@types/exenv": "^1.2.0",
     "@types/jest": "^24.0.11",
@@ -68,7 +66,6 @@
     "@types/react": "~16.8.0",
     "@types/react-dom": "~16.8.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "babel-plugin-transform-imports": "^1.5.0",
     "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",
     "enzyme": "3.9.0",
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx
index aacbe730a2b..497b6cd2062 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModalContainer.tsx
@@ -5,7 +5,7 @@ import { AboutModalBoxHero } from './AboutModalBoxHero';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
-import Backdrop from '../Backdrop/Backdrop';
+import { Backdrop } from '../Backdrop/Backdrop';
 import Bullseye from '../../layouts/Bullseye/Bullseye';
 
 export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement> {
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
index 0367c897b2f..d001a6a5701 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
   >
     <TimesIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -29,6 +30,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
   >
     <TimesIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap
index 6f52e4feea7..3da487c4c62 100644
--- a/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/AboutModal/__snapshots__/AboutModalContainer.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`About Modal Container Test isOpen 1`] = `
-<Backdrop
-  className=""
->
+<Component>
   <Bullseye
     className=""
     component="div"
@@ -37,7 +35,7 @@ exports[`About Modal Container Test isOpen 1`] = `
       />
     </Component>
   </Bullseye>
-</Backdrop>
+</Component>
 `;
 
 exports[`About Modal Container Test simple 1`] = `""`;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.d.ts b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.d.ts
deleted file mode 100644
index 5427c5a8c55..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FunctionComponent, HTMLProps } from 'react';
-import { Omit } from '../../helpers/typeUtils';
-
-export interface AccordionProps extends Omit<HTMLProps<HTMLUListElement>, 'aria-label'> {
-  'aria-label': string;
-}
-
-declare const Accordion: FunctionComponent<AccordionProps>;
-
-export default Accordion;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js
deleted file mode 100644
index 26061c99524..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-
-const Accordion = ({ children, className, 'aria-label': ariaLabel, ...props }) => (
-  <dl className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>
-    {children}
-  </dl>
-);
-
-Accordion.propTypes = {
-  /** Content rendered inside the Accordion */
-  children: PropTypes.node,
-  /** Additional classes added to the Accordion */
-  className: PropTypes.string,
-  /** Adds accessible text to the Accordion */
-  'aria-label': PropTypes.string,
-  /** Additional props are spread to the container <dl> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-Accordion.defaultProps = {
-  children: null,
-  className: '',
-  'aria-label': ''
-};
-
-export default Accordion;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
index 793dd970e7a..85f2b8f3f45 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.md
@@ -1,6 +1,7 @@
 ---
 title: 'Accordion'
 cssPrefix: 'pf-c-accordion'
+typescript: true
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle']
 ---
 
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.js b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
similarity index 65%
rename from packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.js
rename to packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
index b425331827c..196beffeb8f 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.js
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import Accordion from './Accordion';
-import AccordionToggle from './AccordionToggle';
+import { Accordion } from './Accordion';
+import { AccordionToggle } from './AccordionToggle';
+import { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
 
 describe('Accordion', () => {
   test('Accordion default', () => {
@@ -9,6 +11,19 @@ describe('Accordion', () => {
     expect(view.render()).toMatchSnapshot();
   });
 
+  test('Accordion with non-default headingLevel', () => {
+    const view = shallow(
+      <Accordion headingLevel="h2">
+        <AccordionItem>
+          <AccordionToggle id="item-1">Item One</AccordionToggle>
+          <AccordionContent>Item One Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+    expect(view.render()).toMatchSnapshot();
+  });
+
+
   test('It should pass optional aria props', () => {
     const view = mount(
       <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
new file mode 100644
index 00000000000..322b59ba035
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+
+export const AccordionContext = React.createContext('h3');
+
+export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
+  /** Content rendered inside the Accordion  */
+  children?: React.ReactNode;
+  /** Additional classes added to the Accordion  */
+  className?: string;
+  /** Adds accessible text to the Accordion */
+  'aria-label'?: string;
+  /** the heading level to use */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export const Accordion: React.FunctionComponent<AccordionProps> = ({
+  children = null,
+  className = '',
+  'aria-label': ariaLabel = '',
+  headingLevel = 'h3',
+  ...props
+}: AccordionProps) => (
+  <dl className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>
+    <AccordionContext.Provider value={headingLevel}>{children}</AccordionContext.Provider>
+    {children}
+  </dl>
+);
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.d.ts b/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.d.ts
deleted file mode 100644
index 9e27b9777ae..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FunctionComponent, HTMLProps } from 'react';
-import { Omit } from '../../helpers/typeUtils';
-
-export interface AccordionContentProps extends Omit<HTMLProps<HTMLElement>, 'aria-label'> {
-  isHidden: boolean;
-  isFixed: boolean;
-  'aria-label': string;
-}
-
-declare const AccordionContent: FunctionComponent<AccordionContentProps>;
-
-export default AccordionContent;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js
deleted file mode 100644
index 8c3abb4ba5c..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-
-const AccordionContent = ({ className, children, id, isHidden, isFixed, 'aria-label': ariaLabel, ...props }) => (
-  <dd
-    id={id}
-    className={css(
-      styles.accordionExpandedContent,
-      isFixed && styles.modifiers.fixed,
-      !isHidden && styles.modifiers.expanded,
-      className
-    )}
-    hidden={isHidden}
-    aria-label={ariaLabel}
-    {...props}
-  >
-    <div className={css(styles.accordionExpandedContentBody)}>{children}</div>
-  </dd>
-);
-
-AccordionContent.propTypes = {
-  /** Content rendered inside the Accordion */
-  children: PropTypes.node,
-  /** Additional classes added to the Accordion content */
-  className: PropTypes.string,
-  /** Identify the AccordionContent item */
-  id: PropTypes.string,
-  /** Flag to show if the expanded content of the Accordion item is visible */
-  isHidden: PropTypes.bool,
-  /** Flag to indicate Accordion content is fixed */
-  isFixed: PropTypes.bool,
-  /** Adds accessible text to the Accordion content */
-  'aria-label': PropTypes.string,
-  /** Additional props are spread to the container <dd> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-AccordionContent.defaultProps = {
-  children: null,
-  className: '',
-  id: '',
-  isHidden: false,
-  isFixed: false,
-  'aria-label': ''
-};
-
-export default AccordionContent;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.tsx b/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.tsx
new file mode 100644
index 00000000000..dd42d7b95e4
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionContent.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+
+export interface AccordionContentProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the Accordion  */
+  children?: React.ReactNode;
+  /** Additional classes added to the Accordion content  */
+  className?: string;
+  /** Identify the AccordionContent item  */
+  id?: string;
+  /** Flag to show if the expanded content of the Accordion item is visible  */
+  isHidden?: boolean;
+  /** Flag to indicate Accordion content is fixed  */
+  isFixed?: boolean;
+  /** Adds accessible text to the Accordion content */
+  'aria-label'?: string;
+}
+
+export const AccordionContent: React.FunctionComponent<AccordionContentProps> = ({
+  className = '',
+  children = null,
+  id = '',
+  isHidden = false,
+  isFixed = false,
+  'aria-label': ariaLabel = '',
+  ...props
+}: AccordionContentProps) => (
+  <dd
+    id={id}
+    className={css(
+      styles.accordionExpandedContent,
+      isFixed && styles.modifiers.fixed,
+      !isHidden && styles.modifiers.expanded,
+      className
+    )}
+    hidden={isHidden}
+    aria-label={ariaLabel}
+    {...props}
+  >
+    <div className={css(styles.accordionExpandedContentBody)}>{children}</div>
+  </dd>
+);
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.d.ts b/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.d.ts
deleted file mode 100644
index 7152f10346c..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FunctionComponent, HTMLProps } from 'react';
-import { Omit } from '../../helpers/typeUtils';
-
-export interface AccordionItemProps extends Omit<HTMLProps<HTMLLIElement>, 'aria-label'> {
-}
-
-declare const AccordionItem: FunctionComponent<AccordionItemProps>;
-
-export default AccordionItem;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.js
deleted file mode 100644
index 8be8f96c341..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const AccordionItem = ({ children, ...props }) => <React.Fragment {...props}>{children}</React.Fragment>;
-
-AccordionItem.propTypes = {
-  /** Content rendered inside the Accordion item */
-  children: PropTypes.node,
-  /** Additional props are spread to the container  */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-AccordionItem.defaultProps = {
-  children: null
-};
-
-export default AccordionItem;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.tsx b/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.tsx
new file mode 100644
index 00000000000..198ddae0d37
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionItem.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+export interface AccordionItemProps {
+  /** Content rendered inside the Accordion item  */
+  children?: React.ReactNode;
+}
+
+export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({ children = null }: AccordionItemProps) => (
+  <React.Fragment>{children}</React.Fragment>
+);
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts
deleted file mode 100644
index 3d49378e697..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FunctionComponent, HTMLProps } from 'react';
-import { Omit } from '../../helpers/typeUtils';
-
-export interface AccordionToggleProps extends Omit<HTMLProps<HTMLDivElement>, 'aria-labelledby' | 'aria-label' | 'id'> {
-  isExpanded: boolean;
-  id: string;
-}
-
-declare const AccordionToggle: FunctionComponent<AccordionToggleProps>;
-
-export default AccordionToggle;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
deleted file mode 100644
index 663e9711529..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@patternfly/react-styles';
-import { AngleRightIcon } from '@patternfly/react-icons';
-import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-
-const AccordionToggle = ({ className, id, isExpanded, children, ...props }) => (
-  <dt>
-    <h3>
-      <button
-        id={id}
-        className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-        {...props}
-        variant="plain"
-        aria-expanded={isExpanded}
-      >
-        <span className={css(styles.accordionToggleText)}>{children}</span>
-        <AngleRightIcon className={css(styles.accordionToggleIcon)} />
-      </button>
-    </h3>
-  </dt>
-);
-
-AccordionToggle.propTypes = {
-  /** Content rendered inside the Accordion toggle */
-  children: PropTypes.node,
-  /** Additional classes added to the Accordion Toggle */
-  className: PropTypes.string,
-  /** Flag to show if the expanded content of the Accordion item is visible */
-  isExpanded: PropTypes.bool,
-  /** Identify the Accordion toggle number */
-  id: PropTypes.string.isRequired,
-  /** Additional props are spread to the container <dt> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-AccordionToggle.defaultProps = {
-  className: '',
-  children: null,
-  isExpanded: false
-};
-
-export default AccordionToggle;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx
new file mode 100644
index 00000000000..e5f169251b4
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+import { AngleRightIcon } from '@patternfly/react-icons';
+import { Omit } from '../../helpers/typeUtils';
+import { AccordionContext } from './Accordion';
+
+export interface AccordionToggleProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
+  /** Content rendered inside the Accordion toggle  */
+  children?: React.ReactNode;
+  /** Additional classes added to the Accordion Toggle  */
+  className?: string;
+  /** Flag to show if the expanded content of the Accordion item is visible  */
+  isExpanded?: boolean;
+  /** Identify the Accordion toggle number  */
+  id: string;
+}
+
+export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
+  className = '',
+  id,
+  isExpanded = false,
+  children = null,
+  ...props
+}: AccordionToggleProps) => (
+  <dt>
+    <AccordionContext.Consumer>
+      {(AccordionHeadingLevel: any) => (
+        <AccordionHeadingLevel>
+          <button
+            id={id}
+            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
+            {...props}
+            aria-expanded={isExpanded}
+          >
+            <span className={css(styles.accordionToggleText)}>{children}</span>
+            <AngleRightIcon className={css(styles.accordionToggleIcon)} />
+          </button>
+        </AccordionHeadingLevel>
+      )}
+    </AccordionContext.Consumer>
+  </dt>
+);
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap
deleted file mode 100644
index 8b5b87cfc40..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.js.snap
+++ /dev/null
@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Accordion Accordion default 1`] = `
-<dl
-  aria-label="this is a simple accordion"
-  class="pf-c-accordion"
-/>
-`;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
new file mode 100644
index 00000000000..ac5f7da3423
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion Accordion default 1`] = `
+<dl
+  aria-label="this is a simple accordion"
+  class="pf-c-accordion"
+/>
+`;
+
+exports[`Accordion Accordion with non-default headingLevel 1`] = `
+<dl
+  aria-label=""
+  class="pf-c-accordion"
+>
+  <dt>
+    <h2>
+      <button
+        aria-expanded="false"
+        class="pf-c-accordion__toggle"
+        id="item-1"
+      >
+        <span
+          class="pf-c-accordion__toggle-text"
+        >
+          Item One
+        </span>
+        <svg
+          aria-hidden="true"
+          class="pf-c-accordion__toggle-icon"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </h2>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+  <dt>
+    <h3>
+      <button
+        aria-expanded="false"
+        class="pf-c-accordion__toggle"
+        id="item-1"
+      >
+        <span
+          class="pf-c-accordion__toggle-text"
+        >
+          Item One
+        </span>
+        <svg
+          aria-hidden="true"
+          class="pf-c-accordion__toggle-icon"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </h3>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+</dl>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/index.d.ts b/packages/patternfly-4/react-core/src/components/Accordion/index.d.ts
deleted file mode 100644
index 0bebc39e8af..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
-export { default as AccordionContent } from './AccordionContent';
-export { default as AccordionToggle } from './AccordionToggle';
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/index.js b/packages/patternfly-4/react-core/src/components/Accordion/index.js
deleted file mode 100644
index 0bebc39e8af..00000000000
--- a/packages/patternfly-4/react-core/src/components/Accordion/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
-export { default as AccordionContent } from './AccordionContent';
-export { default as AccordionToggle } from './AccordionToggle';
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/index.ts b/packages/patternfly-4/react-core/src/components/Accordion/index.ts
new file mode 100644
index 00000000000..7139e97c322
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Accordion/index.ts
@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './AccordionItem';
+export * from './AccordionContent';
+export * from './AccordionToggle';
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.md b/packages/patternfly-4/react-core/src/components/Alert/Alert.md
index d0fd4714f78..8004c76adcc 100644
--- a/packages/patternfly-4/react-core/src/components/Alert/Alert.md
+++ b/packages/patternfly-4/react-core/src/components/Alert/Alert.md
@@ -175,3 +175,70 @@ class DangerAlert extends React.Component {
   }
 }
 ```
+
+## Inline alert types
+```js
+import React from 'react';
+import { Alert } from '@patternfly/react-core';
+
+class InlineAlert extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <Alert variant="info" isInline title="Info inline alert title"/>
+        <Alert variant="success" isInline title="Success inline alert title" />
+        <Alert variant="warning" isInline title="Warning inline alert title" />
+        <Alert variant="danger" isInline title="Danger inline alert title" />
+      </React.Fragment>
+    );
+  }
+}
+```
+
+## Inline alert variations
+```js
+import React from 'react';
+import { Alert, AlertActionLink, AlertActionCloseButton } from '@patternfly/react-core';
+
+class InlineAlertVariations extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { alertOneVisible: true, alertTwoVisible: true };
+    this.hideAlertOne = () => this.setState({ alertOneVisible: false });
+    this.hideAlertTwo = () => this.setState({ alertTwoVisible: false });
+  }
+  render() {
+    const { alertOneVisible, alertTwoVisible } = this.state;
+    return (
+      <React.Fragment>
+        {alertOneVisible && (
+          <Alert
+            variant="success"
+            isInline
+            title="Success alert title"
+            action={<AlertActionCloseButton onClose={this.hideAlertOne} />}
+          >
+            Success alert description. <a href="#">This is a link.</a>
+          </Alert>
+        )}
+        {alertTwoVisible && (
+          <Alert
+            variant="success"
+            isInline
+            title="Success alert title"
+            action={<AlertActionCloseButton onClose={this.hideAlertTwo} />}
+          />
+        )}
+        <Alert
+          variant="success"
+          isInline
+          title="Success alert title"
+          action={<AlertActionLink>Action Button</AlertActionLink>}
+        />
+        <Alert variant="success" isInline title="Success alert title" />
+      </React.Fragment>
+    );
+  }
+}
+```
+
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.test.tsx b/packages/patternfly-4/react-core/src/components/Alert/Alert.test.tsx
index b09704ad25c..7b7571615f7 100644
--- a/packages/patternfly-4/react-core/src/components/Alert/Alert.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/Alert/Alert.test.tsx
@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import { Alert, AlertVariant } from './Alert';
 import { AlertActionLink }  from './AlertActionLink';
 import { AlertActionCloseButton } from './AlertActionCloseButton';
 
+test('default Alert variant is info', () => {
+  const view = shallow(<Alert title="this is a test">Alert testing</Alert>)
+  expect(view.props().className).toMatch(/pf-m-info/);
+})
+
 Object.values(AlertVariant).forEach(variant => {
   describe(`Alert - ${variant}`, () => {
     test('Description', () => {
@@ -67,6 +72,20 @@ Object.values(AlertVariant).forEach(variant => {
         </Alert>
       );
       expect(view).toMatchSnapshot();
+
+    });
+
+    test('inline variation', () => {
+      const view = mount(
+        <Alert
+          variant={variant}
+          isInline
+          title="Some title"
+        >
+          Some alert
+        </Alert>
+      );
+      expect(view).toMatchSnapshot();
     });
   });
 });
diff --git a/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx b/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
index 5cf443969fd..5bd31e515f7 100644
--- a/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
+++ b/packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
@@ -16,7 +16,9 @@ export enum AlertVariant {
 export interface AlertProps
   extends Omit<React.HTMLProps<HTMLDivElement>, 'action' | 'title'> {
   /** Adds Alert variant styles  */
-  variant: 'success' | 'danger' | 'warning' | 'info';
+  variant?: 'success' | 'danger' | 'warning' | 'info';
+  /** Flag to indicate if the Alert is inline */
+  isInline?: boolean;
   /** Title of the Alert  */
   title: React.ReactNode;
   /** Action button to put in the Alert. Should be <AlertActionLink> or <AlertActionCloseButton> */
@@ -32,7 +34,8 @@ export interface AlertProps
 };
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
-  variant,
+  variant = AlertVariant.info,
+  isInline = false,
   variantLabel = `${capitalize(variant)} alert:`,
   'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
   action = null,
@@ -48,7 +51,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
     </React.Fragment>
   );
 
-  const customClassName = css(styles.alert, getModifier(styles, variant, styles.modifiers.info), className);
+  const customClassName = css(styles.alert, isInline && styles.modifiers.inline, getModifier(styles, variant, styles.modifiers.info), className);
 
   return (
     <div {...props} className={customClassName} aria-label={ariaLabel}>
diff --git a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 6f36259ce21..152755dd083 100644
--- a/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`Alert - danger Action Close Button 1`] = `
       >
         <ExclamationCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -89,6 +90,7 @@ exports[`Alert - danger Action Close Button 1`] = `
           >
             <TimesIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -142,6 +144,7 @@ exports[`Alert - danger Action Link 1`] = `
       >
         <ExclamationCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -237,6 +240,7 @@ exports[`Alert - danger Action and Title 1`] = `
       >
         <ExclamationCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -334,6 +338,7 @@ exports[`Alert - danger Custom aria label 1`] = `
       >
         <ExclamationCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -425,6 +430,7 @@ exports[`Alert - danger Description 1`] = `
       >
         <ExclamationCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -487,6 +493,72 @@ exports[`Alert - danger Title 1`] = `
       >
         <ExclamationCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+              transform=""
+            />
+          </svg>
+        </ExclamationCircleIcon>
+      </div>
+    </Component>
+    <h4
+      className="pf-c-alert__title"
+    >
+      <span
+        className="pf-u-screen-reader"
+      >
+        Danger alert:
+      </span>
+      Some title
+    </h4>
+    <div
+      className="pf-c-alert__description"
+    >
+      <p>
+        Some alert
+      </p>
+    </div>
+  </div>
+</Component>
+`;
+
+exports[`Alert - danger inline variation 1`] = `
+<Component
+  isInline={true}
+  title="Some title"
+  variant="danger"
+>
+  <div
+    aria-label="Danger Alert"
+    className="pf-c-alert pf-m-inline pf-m-danger"
+  >
+    <Component
+      variant="danger"
+    >
+      <div
+        className="pf-c-alert__icon"
+      >
+        <ExclamationCircleIcon
+          color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -556,6 +628,7 @@ exports[`Alert - info Action Close Button 1`] = `
       >
         <InfoCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -622,6 +695,7 @@ exports[`Alert - info Action Close Button 1`] = `
           >
             <TimesIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -675,6 +749,7 @@ exports[`Alert - info Action Link 1`] = `
       >
         <InfoCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -770,6 +845,7 @@ exports[`Alert - info Action and Title 1`] = `
       >
         <InfoCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -867,6 +943,7 @@ exports[`Alert - info Custom aria label 1`] = `
       >
         <InfoCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -958,6 +1035,7 @@ exports[`Alert - info Description 1`] = `
       >
         <InfoCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1020,6 +1098,72 @@ exports[`Alert - info Title 1`] = `
       >
         <InfoCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+              transform=""
+            />
+          </svg>
+        </InfoCircleIcon>
+      </div>
+    </Component>
+    <h4
+      className="pf-c-alert__title"
+    >
+      <span
+        className="pf-u-screen-reader"
+      >
+        Info alert:
+      </span>
+      Some title
+    </h4>
+    <div
+      className="pf-c-alert__description"
+    >
+      <p>
+        Some alert
+      </p>
+    </div>
+  </div>
+</Component>
+`;
+
+exports[`Alert - info inline variation 1`] = `
+<Component
+  isInline={true}
+  title="Some title"
+  variant="info"
+>
+  <div
+    aria-label="Info Alert"
+    className="pf-c-alert pf-m-inline pf-m-info"
+  >
+    <Component
+      variant="info"
+    >
+      <div
+        className="pf-c-alert__icon"
+      >
+        <InfoCircleIcon
+          color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1089,6 +1233,7 @@ exports[`Alert - success Action Close Button 1`] = `
       >
         <CheckCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1155,6 +1300,7 @@ exports[`Alert - success Action Close Button 1`] = `
           >
             <TimesIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1208,6 +1354,7 @@ exports[`Alert - success Action Link 1`] = `
       >
         <CheckCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1303,6 +1450,7 @@ exports[`Alert - success Action and Title 1`] = `
       >
         <CheckCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1400,6 +1548,7 @@ exports[`Alert - success Custom aria label 1`] = `
       >
         <CheckCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1491,6 +1640,7 @@ exports[`Alert - success Description 1`] = `
       >
         <CheckCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1553,6 +1703,72 @@ exports[`Alert - success Title 1`] = `
       >
         <CheckCircleIcon
           color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+              transform=""
+            />
+          </svg>
+        </CheckCircleIcon>
+      </div>
+    </Component>
+    <h4
+      className="pf-c-alert__title"
+    >
+      <span
+        className="pf-u-screen-reader"
+      >
+        Success alert:
+      </span>
+      Some title
+    </h4>
+    <div
+      className="pf-c-alert__description"
+    >
+      <p>
+        Some alert
+      </p>
+    </div>
+  </div>
+</Component>
+`;
+
+exports[`Alert - success inline variation 1`] = `
+<Component
+  isInline={true}
+  title="Some title"
+  variant="success"
+>
+  <div
+    aria-label="Success Alert"
+    className="pf-c-alert pf-m-inline pf-m-success"
+  >
+    <Component
+      variant="success"
+    >
+      <div
+        className="pf-c-alert__icon"
+      >
+        <CheckCircleIcon
+          color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1622,6 +1838,7 @@ exports[`Alert - warning Action Close Button 1`] = `
       >
         <ExclamationTriangleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1688,6 +1905,7 @@ exports[`Alert - warning Action Close Button 1`] = `
           >
             <TimesIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1741,6 +1959,7 @@ exports[`Alert - warning Action Link 1`] = `
       >
         <ExclamationTriangleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1836,6 +2055,7 @@ exports[`Alert - warning Action and Title 1`] = `
       >
         <ExclamationTriangleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1933,6 +2153,7 @@ exports[`Alert - warning Custom aria label 1`] = `
       >
         <ExclamationTriangleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -2024,6 +2245,7 @@ exports[`Alert - warning Description 1`] = `
       >
         <ExclamationTriangleIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -2086,6 +2308,72 @@ exports[`Alert - warning Title 1`] = `
       >
         <ExclamationTriangleIcon
           color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        >
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
+              }
+            }
+            viewBox="0 0 576 512"
+            width="1em"
+          >
+            <path
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+              transform=""
+            />
+          </svg>
+        </ExclamationTriangleIcon>
+      </div>
+    </Component>
+    <h4
+      className="pf-c-alert__title"
+    >
+      <span
+        className="pf-u-screen-reader"
+      >
+        Warning alert:
+      </span>
+      Some title
+    </h4>
+    <div
+      className="pf-c-alert__description"
+    >
+      <p>
+        Some alert
+      </p>
+    </div>
+  </div>
+</Component>
+`;
+
+exports[`Alert - warning inline variation 1`] = `
+<Component
+  isInline={true}
+  title="Some title"
+  variant="warning"
+>
+  <div
+    aria-label="Warning Alert"
+    className="pf-c-alert pf-m-inline pf-m-warning"
+  >
+    <Component
+      variant="warning"
+    >
+      <div
+        className="pf-c-alert__icon"
+      >
+        <ExclamationTriangleIcon
+          color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts
deleted file mode 100644
index 9b873b3e085..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FunctionComponent, HTMLProps, ReactNode } from 'react';
-
-export interface ApplicationLauncherProps extends HTMLProps<HTMLDivElement> {
-  dropdownItems: ReactNode[];
-  isOpen?: boolean;
-  onSelect(event: React.SyntheticEvent<HTMLDivElement>): void;
-  onToggle?(event: React.SyntheticEvent<HTMLDivElement>): void;
-}
-
-declare const ApplicationLauncher: FunctionComponent<ApplicationLauncherProps>;
-
-export default ApplicationLauncher;
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js
deleted file mode 100644
index 84e1595c113..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Children, cloneElement } from 'react';
-import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-import ApplicationLauncherMenu from './ApplicationLauncherMenu';
-import Toggle from './Toggle';
-import { ThIcon } from '@patternfly/react-icons';
-import { DropdownContext } from '../Dropdown/dropdownConstants';
-import GenerateId from '../../helpers/GenerateId/GenerateId';
-
-export const propTypes = {
-  /** Additional element css classes */
-  className: PropTypes.string,
-  /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */
-  dropdownItems: PropTypes.array,
-  /** open bool */
-  isOpen: PropTypes.bool,
-  /** Function callback called when user selects item */
-  onSelect: PropTypes.func,
-  /** Callback called when application launcher toggle is clicked */
-  onToggle: PropTypes.func,
-  /** Adds accessible text to the button. Required for plain buttons */
-  'aria-label': PropTypes.string
-};
-
-export const defaultProps = {
-  className: '',
-  dropdownItems: [],
-  isOpen: false,
-  onSelect: Function.prototype,
-  onToggle: Function.prototype,
-  'aria-label': 'Actions'
-};
-
-class ApplicationLauncher extends React.Component {
-  onEnter = () => {
-    this.openedOnEnter = true;
-  };
-
-  componentDidUpdate() {
-    if (!this.props.isOpen) this.openedOnEnter = false;
-  }
-
-  render() {
-    const { 'aria-label': ariaLabel, dropdownItems, className, isOpen, onSelect, onToggle } = this.props;
-    return (
-      <GenerateId>
-        {randomId => (
-          <div
-            className={css(styles.appLauncher, isOpen && styles.modifiers.expanded, className)}
-            ref={ref => {
-              this.parentRef = ref;
-            }}
-          >
-            {Children.map(
-              <Toggle id={`pf-toggle-id-${randomId}`} aria-label={ariaLabel} onToggle={onToggle}>
-                <ThIcon />
-              </Toggle>,
-              oneToggle =>
-                cloneElement(oneToggle, {
-                  parentRef: this.parentRef,
-                  id: randomId,
-                  isOpen,
-                  isPlain: true,
-                  'aria-haspopup': true,
-                  onEnter: this.onEnter
-                })
-            )}
-            {isOpen && (
-              <DropdownContext.Provider value={event => onSelect && onSelect(event)}>
-                <ApplicationLauncherMenu
-                  isOpen={isOpen}
-                  position="left"
-                  aria-labelledby={ariaLabel}
-                  openedOnEnter={this.openedOnEnter}
-                >
-                  {dropdownItems}
-                </ApplicationLauncherMenu>
-              </DropdownContext.Provider>
-            )}
-          </div>
-        )}
-      </GenerateId>
-    );
-  }
-}
-
-ApplicationLauncher.propTypes = propTypes;
-ApplicationLauncher.defaultProps = defaultProps;
-
-export default ApplicationLauncher;
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md
index 205b23f870a..8812510abc4 100644
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.md
@@ -2,7 +2,10 @@
 title: 'Application launcher'
 cssPrefix: 'pf-c-app-launcher'
 propComponents: ['ApplicationLauncher']
+typescript: true 
 ---
+Note: Application launcher is build on top of Dropdown, for extended API go to [`Dropdown`](/components/dropdown/) documentation.
+
 import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core';
 
 ## Simple application launcher
@@ -46,7 +49,6 @@ class SimpleApplicationLauncher extends React.Component {
     ];
     return (
       <ApplicationLauncher
-        direction="up"
         onSelect={this.onSelect}
         onToggle={this.onToggle}
         isOpen={isOpen}
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js
index 7208f104f39..0d1fd616848 100644
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import ApplicationLauncher from './ApplicationLauncher';
+import { mount } from 'enzyme';
+import { ApplicationLauncher } from './ApplicationLauncher';
 import DropdownItem from '../Dropdown/DropdownItem';
 
 import { DropdownPosition, DropdownDirection } from '../Dropdown/dropdownConstants';
@@ -26,22 +26,22 @@ const dropdownItems = [
 
 describe('ApplicationLauncher', () => {
   test('regular', () => {
-    const view = shallow(<ApplicationLauncher dropdownItems={dropdownItems} />);
+    const view = mount(<ApplicationLauncher dropdownItems={dropdownItems} />);
     expect(view).toMatchSnapshot();
   });
 
   test('right aligned', () => {
-    const view = shallow(<ApplicationLauncher dropdownItems={dropdownItems} position={DropdownPosition.right} />);
+    const view = mount(<ApplicationLauncher dropdownItems={dropdownItems} position={DropdownPosition.right} />);
     expect(view).toMatchSnapshot();
   });
 
   test('dropup', () => {
-    const view = shallow(<ApplicationLauncher dropdownItems={dropdownItems} direction={DropdownDirection.up} />);
+    const view = mount(<ApplicationLauncher dropdownItems={dropdownItems} direction={DropdownDirection.up} />);
     expect(view).toMatchSnapshot();
   });
 
   test('dropup + right aligned', () => {
-    const view = shallow(
+    const view = mount(
       <ApplicationLauncher
         dropdownItems={dropdownItems}
         direction={DropdownDirection.up}
@@ -52,7 +52,7 @@ describe('ApplicationLauncher', () => {
   });
 
   test('expanded', () => {
-    const view = shallow(<ApplicationLauncher dropdownItems={dropdownItems} isOpen />);
+    const view = mount(<ApplicationLauncher dropdownItems={dropdownItems} isOpen />);
     expect(view).toMatchSnapshot();
   });
 });
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
new file mode 100644
index 00000000000..09e710efc5f
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
+import { css } from '@patternfly/react-styles';
+import { ThIcon } from '@patternfly/react-icons';
+import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
+import { DropdownWithContext } from '../Dropdown/Dropdown';
+
+export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
+    /** Additional element css classes */
+    className: string;
+    /** Display menu above or below dropdown toggle */
+    direction: DropdownDirection;
+    /** Array of DropdownItem nodes that will be rendered in the dropdown Menu list */
+    dropdownItems: React.ReactNode[];
+    /** Render Application launcher toggle as disabled icon */
+    isDisabled: boolean;
+    /** open bool */
+    isOpen: boolean;
+    /** Indicates where menu will be alligned horizontally */
+    position: DropdownPosition;
+    /** Function callback called when user selects item */
+    onSelect: (event: any) => void;
+    /** Callback called when application launcher toggle is clicked */
+    onToggle?: (value: boolean) => void;
+    /** Adds accessible text to the button. Required for plain buttons */
+    'aria-label': string;
+}
+
+export class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
+  static defaultProps = {
+    className: '',
+    isDisabled: false,
+    direction: DropdownDirection.down,
+    dropdownItems: [] as React.ReactNode[],
+    isOpen: false,
+    position: DropdownPosition.left,
+    onSelect: (_event: any): any => undefined,
+    onToggle: (_value: boolean): any => undefined,
+    'aria-label': 'Actions'
+  };
+  render() {
+    const { 'aria-label': ariaLabel, isOpen, onToggle, onSelect, isDisabled, className, ...props } = this.props;
+    return (
+      <DropdownContext.Provider value={{
+        onSelect,
+        menuClass: css(styles.appLauncherMenu),
+        itemClass: css(styles.appLauncherMenuItem),
+        toggleClass: css(styles.appLauncherToggle),
+        baseClass: css(styles.appLauncher)
+      }}>
+        <DropdownWithContext
+          {...props}
+          isOpen={isOpen}
+          className={className}
+          toggle={
+            <DropdownToggle
+              iconComponent={null}
+              isOpen={isOpen}
+              onToggle={onToggle}
+              isDisabled={isDisabled}
+              aria-label={ariaLabel}
+            >
+              <ThIcon />
+            </DropdownToggle>
+          }
+          isPlain
+        />
+      </DropdownContext.Provider>
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js
deleted file mode 100644
index 5faa51d7443..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/ApplicationLauncherMenu.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-import { ApplicationLauncherPosition } from './applicationLauncherConstants';
-import { DropdownArrowContext } from '../Dropdown/dropdownConstants';
-import ReactDOM from 'react-dom';
-import { keyHandler } from '../../helpers/util';
-import { KEY_CODES, KEYHANDLER_DIRECTION } from '../../helpers/constants';
-
-const propTypes = {
-  /** Anything which can be rendered as dropdown items */
-  children: PropTypes.node,
-  /** Classess applied to root element of dropdown menu */
-  className: PropTypes.string,
-  /** internal index of the item */
-  index: PropTypes.number,
-  /** Flag to indicate if menu is opened */
-  isOpen: PropTypes.bool,
-  /** Flag to indicate if menu should be opened on enter */
-  openedOnEnter: PropTypes.bool,
-  /** Indicates where menu will be alligned horizontally */
-  position: PropTypes.oneOf(Object.values(ApplicationLauncherPosition)),
-  /** Additional props are spread to the container component */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-const defaultProps = {
-  children: null,
-  className: '',
-  index: null,
-  isOpen: true,
-  openedOnEnter: false,
-  position: ApplicationLauncherPosition.left
-};
-
-class ApplicationLauncherMenu extends React.Component {
-  refsCollection = [];
-
-  childKeyHandler = (index, position, custom = false) => {
-    keyHandler(index, position, this.refsCollection, this.props.children, custom);
-  };
-
-  onKeyDown = event => {
-    // Detected key press on this item, notify the menu parent so that the appropriate
-    // item can be focused
-    if (event.key === KEY_CODES.TAB) return;
-    event.preventDefault();
-    if (event.keyCode === KEY_CODES.ARROW_UP) {
-      keyHandler(this.props.index, KEYHANDLER_DIRECTION.UP, this.refsCollection, this.props.children);
-    } else if (event.keyCode === KEY_CODES.ARROW_DOWN) {
-      keyHandler(this.props.index, KEYHANDLER_DIRECTION.DOWN, this.refsCollection, this.props.children);
-    } else if (event.key === KEY_CODES.ENTER) {
-      if (!this.ref.current.getAttribute) {
-        ReactDOM.findDOMNode(this.ref.current).click(); // eslint-disable-line react/no-find-dom-node
-      } else {
-        this.ref.current.click && this.ref.current.click();
-      }
-    }
-  };
-
-  componentDidMount() {
-    if (this.props.openedOnEnter) {
-      this.refsCollection[0].focus();
-    }
-  }
-
-  sendRef = (index, node, isDisabled) => {
-    if (!node.getAttribute) {
-      this.refsCollection[index] = ReactDOM.findDOMNode(node); // eslint-disable-line react/no-find-dom-node
-    } else if (isDisabled || node.getAttribute('role') === 'separator') {
-      this.refsCollection[index] = null;
-    } else {
-      this.refsCollection[index] = node;
-    }
-  };
-
-  extendChildren() {
-    return React.Children.map(this.props.children, (child, index) =>
-      React.cloneElement(child, {
-        index,
-        isAppLauncher: true
-      })
-    );
-  }
-
-  render() {
-    const { className, isOpen, position, children, openedOnEnter, ...props } = this.props;
-
-    return (
-      <DropdownArrowContext.Provider
-        value={{
-          keyHandler: this.childKeyHandler,
-          sendRef: this.sendRef
-        }}
-      >
-        <ul {...props} className={css(styles.appLauncherMenu, className)} hidden={!isOpen} role="menu">
-          {this.extendChildren()}
-        </ul>
-      </DropdownArrowContext.Provider>
-    );
-  }
-}
-
-ApplicationLauncherMenu.propTypes = propTypes;
-ApplicationLauncherMenu.defaultProps = defaultProps;
-
-export default ApplicationLauncherMenu;
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js
deleted file mode 100644
index 1b1c24003f9..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/Toggle.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styles from '@patternfly/react-styles/css/components/Button/button';
-import { css } from '@patternfly/react-styles';
-import { KEY_CODES } from '../../helpers/constants';
-
-const propTypes = {
-  /** HTML ID of toggle */
-  id: PropTypes.string.isRequired,
-  /** Type to put on the button */
-  type: PropTypes.string,
-  /** Anything which can be rendered as toggle */
-  children: PropTypes.node,
-  /** Classes applied to root element of toggle */
-  className: PropTypes.string,
-  /** Flag to indicate if menu is opened */
-  isOpen: PropTypes.bool,
-  /** Callback called when toggle is clicked */
-  onToggle: PropTypes.func,
-  /** Callback for toggle open on keyboard entry */
-  onEnter: PropTypes.func,
-  /** Element which wraps toggle */
-  parentRef: PropTypes.any,
-  /** Forces focus state */
-  isFocused: PropTypes.bool,
-  /** Forces hover state */
-  isHovered: PropTypes.bool,
-  /** Forces active state */
-  isActive: PropTypes.bool,
-  /** Display the toggle with no border or background */
-  isPlain: PropTypes.bool,
-  /** Additional props are spread to the container <button> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-const defaultProps = {
-  children: null,
-  type: '',
-  className: '',
-  isOpen: false,
-  parentRef: null,
-  isFocused: false,
-  isHovered: false,
-  isActive: false,
-  isPlain: false,
-  onToggle: Function.prototype,
-  onEnter: Function.prototype
-};
-
-class ApplicationLauncherToggle extends Component {
-  componentDidMount = () => {
-    document.addEventListener('mousedown', this.onDocClick);
-    document.addEventListener('touchstart', this.onDocClick);
-    document.addEventListener('keydown', this.onEscPress);
-  };
-
-  componentWillUnmount = () => {
-    document.removeEventListener('mousedown', this.onDocClick);
-    document.removeEventListener('touchstart', this.onDocClick);
-    document.removeEventListener('keydown', this.onEscPress);
-  };
-
-  onDocClick = event => {
-    if (this.props.isOpen && this.props.parentRef && !this.props.parentRef.contains(event.target)) {
-      this.props.onToggle && this.props.onToggle(false);
-      this.toggle.focus();
-    }
-  };
-
-  onEscPress = event => {
-    const { parentRef } = this.props;
-    const keyCode = event.keyCode || event.which;
-    if (
-      this.props.isOpen &&
-      (keyCode === KEY_CODES.ESCAPE_KEY || event.keyCode === KEY_CODES.TAB) &&
-      parentRef &&
-      parentRef.contains(event.target)
-    ) {
-      this.props.onToggle && this.props.onToggle(false);
-      this.toggle.focus();
-    }
-  };
-
-  onKeyDown = event => {
-    if (event.keyCode === KEY_CODES.TAB && !this.props.isOpen) return;
-    event.preventDefault();
-    if (
-      (event.keyCode === KEY_CODES.TAB || event.keyCode === KEY_CODES.ENTER || event.key === ' ') &&
-      this.props.isOpen
-    ) {
-      this.props.onToggle(!this.props.isOpen);
-    } else if ((event.keyCode === KEY_CODES.ENTER || event.key === ' ') && !this.props.isOpen) {
-      this.props.onToggle(!this.props.isOpen);
-      this.props.onEnter();
-    }
-  };
-
-  render() {
-    const {
-      className,
-      children,
-      isOpen,
-      isFocused,
-      isActive,
-      isHovered,
-      isPlain,
-      onToggle,
-      onEnter,
-      parentRef,
-      id,
-      type,
-      ...props
-    } = this.props;
-    return (
-      <button
-        {...props}
-        id={id}
-        ref={toggle => {
-          this.toggle = toggle;
-        }}
-        className={css(
-          styles.button,
-          isFocused && styles.modifiers.focus,
-          isHovered && styles.modifiers.hover,
-          isActive && styles.modifiers.active,
-          isPlain && styles.modifiers.plain,
-          className
-        )}
-        type={type || 'button'}
-        onClick={_event => onToggle && onToggle(!isOpen)}
-        aria-expanded={isOpen}
-        onKeyDown={this.onKeyDown}
-      >
-        {children}
-      </button>
-    );
-  }
-}
-
-ApplicationLauncherToggle.propTypes = propTypes;
-ApplicationLauncherToggle.defaultProps = defaultProps;
-
-export default ApplicationLauncherToggle;
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
index 172ba92c450..57043bfbdb1 100644
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
@@ -1,41 +1,2154 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ApplicationLauncher dropup + right aligned 1`] = `
-<GenerateId
-  prefix="pf-random-id-"
+<ApplicationLauncher
+  aria-label="Actions"
+  className=""
+  direction="up"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isDisabled={false}
+  isOpen={false}
+  onSelect={[Function]}
+  onToggle={[Function]}
+  position="right"
 >
-  <Component />
-</GenerateId>
+  <DropdownWithContext
+    className=""
+    direction="up"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={true}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <DropdownToggle
+        aria-label="Actions"
+        className=""
+        iconComponent={null}
+        id=""
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <ThIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-app-launcher pf-m-top"
+    >
+      <DropdownToggle
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        iconComponent={null}
+        id="pf-toggle-id-3"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={true}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="pf-toggle-id-3"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={true}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-app-launcher__toggle pf-m-plain"
+            disabled={false}
+            id="pf-toggle-id-3"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className={null}
+            >
+              <ThIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+                title={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
+                    transform=""
+                  />
+                </svg>
+              </ThIcon>
+            </span>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
+</ApplicationLauncher>
 `;
 
 exports[`ApplicationLauncher dropup 1`] = `
-<GenerateId
-  prefix="pf-random-id-"
+<ApplicationLauncher
+  aria-label="Actions"
+  className=""
+  direction="up"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isDisabled={false}
+  isOpen={false}
+  onSelect={[Function]}
+  onToggle={[Function]}
+  position="left"
 >
-  <Component />
-</GenerateId>
+  <DropdownWithContext
+    className=""
+    direction="up"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={true}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        aria-label="Actions"
+        className=""
+        iconComponent={null}
+        id=""
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <ThIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-app-launcher pf-m-top"
+    >
+      <DropdownToggle
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        iconComponent={null}
+        id="pf-toggle-id-2"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={true}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="pf-toggle-id-2"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={true}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-app-launcher__toggle pf-m-plain"
+            disabled={false}
+            id="pf-toggle-id-2"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className={null}
+            >
+              <ThIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+                title={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
+                    transform=""
+                  />
+                </svg>
+              </ThIcon>
+            </span>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
+</ApplicationLauncher>
 `;
 
 exports[`ApplicationLauncher expanded 1`] = `
-<GenerateId
-  prefix="pf-random-id-"
+<ApplicationLauncher
+  aria-label="Actions"
+  className=""
+  direction="down"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isDisabled={false}
+  isOpen={true}
+  onSelect={[Function]}
+  onToggle={[Function]}
+  position="left"
 >
-  <Component />
-</GenerateId>
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={true}
+    isPlain={true}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        aria-label="Actions"
+        className=""
+        iconComponent={null}
+        id=""
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={true}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <ThIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-app-launcher pf-m-expanded"
+    >
+      <DropdownToggle
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        iconComponent={null}
+        id="pf-toggle-id-4"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={true}
+        isPlain={true}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="pf-toggle-id-4"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={true}
+          isPlain={true}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={true}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-app-launcher__toggle pf-m-plain"
+            disabled={false}
+            id="pf-toggle-id-4"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className={null}
+            >
+              <ThIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+                title={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
+                    transform=""
+                  />
+                </svg>
+              </ThIcon>
+            </span>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+      <DropdownMenu
+        aria-labelledby="pf-toggle-id-4"
+        className=""
+        component="ul"
+        isGrouped={false}
+        isOpen={true}
+        openedOnEnter={false}
+        position="left"
+      >
+        <ul
+          aria-labelledby="pf-toggle-id-4"
+          className="pf-c-app-launcher__menu"
+          hidden={false}
+          role="menu"
+        >
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={0}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={false}
+                className="pf-c-app-launcher__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+              >
+                Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={1}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-c-app-launcher__menu-item"
+                disabled={false}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Action
+              </button>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={2}
+            isAppLauncher={false}
+            isDisabled={true}
+            isHovered={false}
+            key=".$disabled link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={true}
+                className="pf-m-disabled pf-c-app-launcher__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                tabIndex={-1}
+              >
+                Disabled Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={3}
+            isAppLauncher={false}
+            isDisabled={true}
+            isHovered={false}
+            key=".$disabled action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-m-disabled pf-c-app-launcher__menu-item"
+                disabled={true}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Disabled Action
+              </button>
+            </li>
+          </DropdownItem>
+          <Separator
+            className=""
+            component="a"
+            href="#"
+            index={4}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separator"
+          >
+            <DropdownItem
+              className="pf-c-dropdown__separator"
+              component="div"
+              context={
+                Object {
+                  "keyHandler": [Function],
+                  "sendRef": [Function],
+                }
+              }
+              href="#"
+              index={4}
+              isAppLauncher={false}
+              isDisabled={false}
+              isHovered={false}
+              onClick={[Function]}
+              role="separator"
+            >
+              <li
+                role="none"
+              >
+                <div
+                  className="pf-c-dropdown__separator"
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="separator"
+                />
+              </li>
+            </DropdownItem>
+          </Separator>
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={5}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separated link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={false}
+                className="pf-c-app-launcher__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+              >
+                Separated Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={6}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separated action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-c-app-launcher__menu-item"
+                disabled={false}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Separated Action
+              </button>
+            </li>
+          </DropdownItem>
+        </ul>
+      </DropdownMenu>
+    </div>
+  </DropdownWithContext>
+</ApplicationLauncher>
 `;
 
 exports[`ApplicationLauncher regular 1`] = `
-<GenerateId
-  prefix="pf-random-id-"
+<ApplicationLauncher
+  aria-label="Actions"
+  className=""
+  direction="down"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isDisabled={false}
+  isOpen={false}
+  onSelect={[Function]}
+  onToggle={[Function]}
+  position="left"
 >
-  <Component />
-</GenerateId>
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={true}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        aria-label="Actions"
+        className=""
+        iconComponent={null}
+        id=""
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <ThIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-app-launcher"
+    >
+      <DropdownToggle
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        iconComponent={null}
+        id="pf-toggle-id-0"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={true}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="pf-toggle-id-0"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={true}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-app-launcher__toggle pf-m-plain"
+            disabled={false}
+            id="pf-toggle-id-0"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className={null}
+            >
+              <ThIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+                title={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
+                    transform=""
+                  />
+                </svg>
+              </ThIcon>
+            </span>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
+</ApplicationLauncher>
 `;
 
 exports[`ApplicationLauncher right aligned 1`] = `
-<GenerateId
-  prefix="pf-random-id-"
+<ApplicationLauncher
+  aria-label="Actions"
+  className=""
+  direction="down"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isDisabled={false}
+  isOpen={false}
+  onSelect={[Function]}
+  onToggle={[Function]}
+  position="right"
 >
-  <Component />
-</GenerateId>
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={true}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <DropdownToggle
+        aria-label="Actions"
+        className=""
+        iconComponent={null}
+        id=""
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <ThIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-app-launcher"
+    >
+      <DropdownToggle
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        iconComponent={null}
+        id="pf-toggle-id-1"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={true}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="pf-toggle-id-1"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={true}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-app-launcher__toggle pf-m-plain"
+            disabled={false}
+            id="pf-toggle-id-1"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className={null}
+            >
+              <ThIcon
+                color="currentColor"
+                noVerticalAlign={false}
+                size="sm"
+                title={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  aria-labelledby={null}
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style={
+                    Object {
+                      "verticalAlign": "-0.125em",
+                    }
+                  }
+                  viewBox="0 0 512 512"
+                  width="1em"
+                >
+                  <path
+                    d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
+                    transform=""
+                  />
+                </svg>
+              </ThIcon>
+            </span>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
+</ApplicationLauncher>
 `;
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts
deleted file mode 100644
index d9d4dc49c7c..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const ApplicationLauncherPosition: {
-  right: 'right';
-  left: 'left';
-};
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js
deleted file mode 100644
index 20b50640e22..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/applicationLauncherConstants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const ApplicationLauncherPosition = {
-  right: 'right',
-  left: 'left'
-};
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts
deleted file mode 100644
index eb80d448cc0..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ApplicationLauncher } from './ApplicationLauncher';
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js
deleted file mode 100644
index eb80d448cc0..00000000000
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ApplicationLauncher } from './ApplicationLauncher';
diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts
new file mode 100644
index 00000000000..3554cd7dddd
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/index.ts
@@ -0,0 +1 @@
+export * from './ApplicationLauncher';
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts
deleted file mode 100644
index d618ac52dba..00000000000
--- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FunctionComponent, HTMLProps, ReactNode } from 'react';
-
-export interface BackdropProps extends HTMLProps<HTMLDivElement> {
-  children?: ReactNode;
-  className?: string;
-}
-
-declare const Backdrop: FunctionComponent<BackdropProps>;
-
-export default Backdrop;
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js
deleted file mode 100644
index 066f421ce34..00000000000
--- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
-
-const propTypes = {
-  /** content rendered inside the backdrop */
-  children: PropTypes.node,
-  /** additional classes added to the button */
-  className: PropTypes.string
-};
-
-const defaultProps = {
-  children: null,
-  className: ''
-};
-
-const Backdrop = ({ className, children, ...props }) => (
-  <div {...props} className={css(styles.backdrop, className)}>
-    {children}
-  </div>
-);
-
-Backdrop.propTypes = propTypes;
-Backdrop.defaultProps = defaultProps;
-
-export default Backdrop;
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx
similarity index 82%
rename from packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js
rename to packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx
index 99d675aca51..cfd8d97ec70 100644
--- a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.js
+++ b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Backdrop from './Backdrop';
+import { Backdrop } from './Backdrop';
 
 test('Backdrop Test', () => {
   const view = shallow(<Backdrop>Backdrop</Backdrop>);
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx
new file mode 100644
index 00000000000..ae7b7c8d7ce
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Backdrop/Backdrop.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+
+export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
+  /** content rendered inside the backdrop */
+  children?: React.ReactNode; 
+  /** additional classes added to the button */
+  className?: string; 
+}
+
+export const Backdrop: React.FunctionComponent<BackdropProps> = ({
+  children = null, 
+  className = '', 
+  ...props
+}: BackdropProps) => (
+  <div {...props} className={css(styles.backdrop, className)}>
+    {children}
+  </div>
+)
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.js.snap b/packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.tsx.snap
similarity index 100%
rename from packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.js.snap
rename to packages/patternfly-4/react-core/src/components/Backdrop/__snapshots__/Backdrop.test.tsx.snap
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts b/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts
deleted file mode 100644
index c76cf6cade7..00000000000
--- a/packages/patternfly-4/react-core/src/components/Backdrop/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Backdrop, BackdropProps } from './Backdrop';
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.js b/packages/patternfly-4/react-core/src/components/Backdrop/index.js
deleted file mode 100644
index 70cf60d910c..00000000000
--- a/packages/patternfly-4/react-core/src/components/Backdrop/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Backdrop } from './Backdrop';
diff --git a/packages/patternfly-4/react-core/src/components/Backdrop/index.ts b/packages/patternfly-4/react-core/src/components/Backdrop/index.ts
new file mode 100644
index 00000000000..b4c58db120a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Backdrop/index.ts
@@ -0,0 +1 @@
+export * from './Backdrop';
diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx
index 9c078ecdb03..3f4188a47ed 100644
--- a/packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/patternfly-4/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -26,7 +26,7 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
   target = null,
   component = 'a',
   ...props
-}) => {
+}: BreadcrumbItemProps) => {
   const Component = component as any;
   return (
     <li {...props} className={css(styles.breadcrumbItem, className)}>
diff --git a/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/BreadcrumbItem.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/BreadcrumbItem.test.tsx.snap
index 847784e33c7..e30f4ed22ec 100644
--- a/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/BreadcrumbItem.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Breadcrumb/__snapshots__/BreadcrumbItem.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with className 1`
   >
     <AngleRightIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -37,6 +38,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with custom eleme
   >
     <AngleRightIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -55,6 +57,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with id 1`] = `
   >
     <AngleRightIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -72,6 +75,7 @@ exports[`BreadcrumbItem component should render breadcrumbItem with target 1`] =
   >
     <AngleRightIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -89,6 +93,7 @@ exports[`BreadcrumbItem component should render default breadcrumbItem 1`] = `
   >
     <AngleRightIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -112,6 +117,7 @@ exports[`BreadcrumbItem component should render link breadcrumbItem 1`] = `
   >
     <AngleRightIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.md b/packages/patternfly-4/react-core/src/components/Button/Button.md
index 4b999cf4f24..85f3a6ae8ec 100644
--- a/packages/patternfly-4/react-core/src/components/Button/Button.md
+++ b/packages/patternfly-4/react-core/src/components/Button/Button.md
@@ -28,8 +28,8 @@ ButtonVariants = () => (
   <React.Fragment>
     <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button>{' '}
     <Button variant="tertiary">Tertiary</Button> <Button variant="danger">Danger</Button>{' '}
-    <Button variant="link">
-      <PlusCircleIcon /> Link button
+    <Button variant="link" icon={<PlusCircleIcon />}>
+      Link button
     </Button>{' '}
     <Button variant="plain" aria-label="Action">
       <TimesIcon />
diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.test.tsx b/packages/patternfly-4/react-core/src/components/Button/Button.test.tsx
index 56bdc6ee89b..43b95b966a8 100644
--- a/packages/patternfly-4/react-core/src/components/Button/Button.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/Button/Button.test.tsx
@@ -1,6 +1,7 @@
 import { Button, ButtonVariant } from './Button';
 import React from 'react';
 import { shallow } from 'enzyme';
+import { CartArrowDownIcon } from '@patternfly/react-icons';
 
 Object.values(ButtonVariant).forEach(variant => {
   test(`${variant} button`, () => {
@@ -19,6 +20,15 @@ test('it adds an aria-label to plain buttons', () => {
   expect(view.find('button').props()['aria-label']).toBe(label);
 });
 
+test('link with icon', () => {
+  const view = shallow(
+    <Button variant={ButtonVariant.link} icon={<CartArrowDownIcon />}>
+      Block Button
+    </Button>
+  );
+  expect(view).toMatchSnapshot();
+});
+
 test('isBlock', () => {
   const view = shallow(<Button isBlock>Block Button</Button>);
   expect(view).toMatchSnapshot();
diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.tsx b/packages/patternfly-4/react-core/src/components/Button/Button.tsx
index eaed589ce96..46f5f387624 100644
--- a/packages/patternfly-4/react-core/src/components/Button/Button.tsx
+++ b/packages/patternfly-4/react-core/src/components/Button/Button.tsx
@@ -41,6 +41,8 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'plain' ;
   /** Adds accessible text to the button. */
   'aria-label'?: string; 
+  /** Icon for the button if variant is a link */
+  icon?: React.ReactNode | null;
 }
 
 export const Button: React.FunctionComponent<ButtonProps> = ({
@@ -56,6 +58,7 @@ export const Button: React.FunctionComponent<ButtonProps> = ({
   type = ButtonType.button,
   variant = ButtonVariant.primary,
   'aria-label': ariaLabel = null, 
+  icon = null,
   ...props
 }: ButtonProps) => {
   const Component = component as any;
@@ -80,6 +83,7 @@ export const Button: React.FunctionComponent<ButtonProps> = ({
     tabIndex={isDisabled && !isButtonElement ? -1 : null}
     type={isButtonElement ? type : null}
   >
+    {(icon && variant === ButtonVariant.link) && <span className="pf-c-button__icon">{icon}</span>}
     {children}
   </Component>
   );
diff --git a/packages/patternfly-4/react-core/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Button/__snapshots__/Button.test.tsx.snap
index 17e823c2d29..e6bd74e6a92 100644
--- a/packages/patternfly-4/react-core/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -106,6 +106,29 @@ exports[`link button 1`] = `
 </button>
 `;
 
+exports[`link with icon 1`] = `
+<button
+  aria-disabled={null}
+  aria-label={null}
+  className="pf-c-button pf-m-link"
+  disabled={false}
+  tabIndex={null}
+  type="button"
+>
+  <span
+    className="pf-c-button__icon"
+  >
+    <CartArrowDownIcon
+      color="currentColor"
+      noVerticalAlign={false}
+      size="sm"
+      title={null}
+    />
+  </span>
+  Block Button
+</button>
+`;
+
 exports[`plain button 1`] = `
 <button
   aria-disabled={null}
diff --git a/packages/patternfly-4/react-core/src/components/Card/Card.md b/packages/patternfly-4/react-core/src/components/Card/Card.md
index 0f9df1e0d64..c96ec63f988 100644
--- a/packages/patternfly-4/react-core/src/components/Card/Card.md
+++ b/packages/patternfly-4/react-core/src/components/Card/Card.md
@@ -5,7 +5,8 @@ typescript: true
 propComponents: ['Card', 'CardHeader', 'CardBody', 'CardFooter']
 ---
 
-import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core';
+import { Card, CardActions, CardHead, CardHeader, CardBody, CardFooter, Checkbox, DropdownActions } from '@patternfly/react-core';
+import pfLogo from './examples/pfLogo.svg'; 
 
 ## Simple card
 ```js
@@ -21,6 +22,263 @@ SimpleCard = () => (
 );
 ```
 
+## Card with image and actions 
+```js
+import React from 'react'; 
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; 
+import pfLogo from './examples/pfLogo.svg'; 
+
+class KebabDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      check1: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    };
+    this.onClick = (checked, event) => {
+      const target = event.target; 
+      const value = target.type === 'checkbox' ? target.checked : target.value; 
+      const name = target.name; 
+      this.setState({ [name]: value }); 
+    }; 
+  }
+
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="link">Link</DropdownItem>,
+      <DropdownItem key="action" component="button">
+        Action
+      </DropdownItem>,
+      <DropdownItem key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem key="disabled action" isDisabled component="button">
+        Disabled Action
+      </DropdownItem>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItem key="separated link">Separated Link</DropdownItem>,
+      <DropdownItem key="separated action" component="button">
+        Separated Action
+      </DropdownItem>
+    ];
+    return (
+      <Card>
+        <CardHead>
+          <img src={pfLogo} style={{height: "50px"}}/>
+          <CardActions>
+            <Dropdown
+              onSelect={this.onSelect}
+              toggle={<KebabToggle onToggle={this.onToggle} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+            <input
+              type="checkbox" 
+              isChecked={this.state.check1}
+              onChange={this.onClick}
+              aria-label="card checkbox example"
+              id="check-1"
+              name="check1"
+            />
+          </CardActions>
+        </CardHead>
+        <CardHeader>Header</CardHeader>
+        <CardBody>Body</CardBody>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+    );
+  }
+}
+```
+
+## Card header in card head 
+```js
+ import React from 'react'; 
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; 
+
+class KebabDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      check1: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    };
+    this.onClick = (checked, event) => {
+      const target = event.target; 
+      const value = target.type === 'checkbox' ? target.checked : target.value; 
+      const name = target.name; 
+      this.setState({ [name]: value }); 
+    }; 
+  }
+
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="link">Link</DropdownItem>,
+      <DropdownItem key="action" component="button">
+        Action
+      </DropdownItem>,
+      <DropdownItem key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem key="disabled action" isDisabled component="button">
+        Disabled Action
+      </DropdownItem>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItem key="separated link">Separated Link</DropdownItem>,
+      <DropdownItem key="separated action" component="button">
+        Separated Action
+      </DropdownItem>
+    ];
+    return (
+      <Card>
+        <CardHead>
+          <CardActions>
+            <Dropdown
+              onSelect={this.onSelect}
+              toggle={<KebabToggle onToggle={this.onToggle} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+            <input
+              type="checkbox" 
+              isChecked={this.state.check1}
+              onChange={this.onClick}
+              aria-label="card checkbox example"
+              id="check-1"
+              name="check1"
+            />
+          </CardActions>
+        <CardHeader>This is a really really really really really really really really really really long header</CardHeader>
+        </CardHead>
+        <CardBody>Body</CardBody>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+    );
+  }
+}
+```
+
+## Only actions in card head (no header/footer)
+```js
+ import React from 'react'; 
+import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHead, CardActions, CardHeader, CardBody } from '@patternfly/react-core'; 
+
+class KebabDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      check1: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    };
+    this.onClick = (checked, event) => {
+      const target = event.target; 
+      const value = target.type === 'checkbox' ? target.checked : target.value; 
+      const name = target.name; 
+      this.setState({ [name]: value }); 
+    }; 
+  }
+
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="link">Link</DropdownItem>,
+      <DropdownItem key="action" component="button">
+        Action
+      </DropdownItem>,
+      <DropdownItem key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem key="disabled action" isDisabled component="button">
+        Disabled Action
+      </DropdownItem>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItem key="separated link">Separated Link</DropdownItem>,
+      <DropdownItem key="separated action" component="button">
+        Separated Action
+      </DropdownItem>
+    ];
+    return (
+      <Card>
+        <CardHead>
+          <CardActions>
+            <Dropdown
+              onSelect={this.onSelect}
+              toggle={<KebabToggle onToggle={this.onToggle} />}
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+              position={'right'}
+            />
+            <input
+              type="checkbox" 
+              isChecked={this.state.check1}
+              onChange={this.onClick}
+              aria-label="card checkbox example"
+              id="check-1"
+              name="check1"
+            />
+          </CardActions>
+        </CardHead>
+        <CardBody>This is the card body, there is only actions in the card head.</CardBody>
+      </Card>
+    );
+  }
+}
+```
+
+## Only image in the card head
+```js
+import React from 'react';
+import { Card, CardHeader, CardBody, CardFooter } from '@patternfly/react-core';
+
+ImageCard = () => (
+  <Card>
+    <CardHead>
+      <img src={pfLogo} style={{height: "50px"}}/>
+    </CardHead> 
+    <CardHeader>Header</CardHeader>
+    <CardBody>Body</CardBody>
+    <CardFooter>Footer</CardFooter>
+  </Card>
+);
+```
+
 ## Card with no footer
 ```js
 import React from 'react';
diff --git a/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx b/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx
new file mode 100644
index 00000000000..7a036a97273
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Card/CardActions.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'; 
+import { css } from '@patternfly/react-styles'; 
+import styles from '@patternfly/react-styles/css/components/Card/card'; 
+
+
+export interface CardActionsProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the Card Action */
+  children?: React.ReactNode; 
+  /** Additional classes added to the Action */
+  className?: string; 
+}
+
+export const CardActions: React.FunctionComponent<CardActionsProps> = ({
+  children = null, 
+  className = '', 
+  ...props
+}: CardActionsProps) => (
+  <div className={css(styles.cardActions, className)} {...props}>
+    {children}
+  </div>
+); 
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx b/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx
new file mode 100644
index 00000000000..5cabf77531c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Card/CardHead.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'; 
+import { css } from '@patternfly/react-styles'; 
+import styles from '@patternfly/react-styles/css/components/Card/card'; 
+
+export interface CardHeadProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the Card Head */
+  children?: React.ReactNode; 
+  /** Additional classes added to the Head */
+  className?: string; 
+}
+
+export const CardHead: React.FunctionComponent<CardHeadProps> = ({
+  children = null, 
+  className = '', 
+  ...props
+}: CardHeadProps) => (
+  <div className={css(styles.cardHead, className)} {...props}>
+    {children}
+  </div>
+); 
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg b/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg
new file mode 100644
index 00000000000..c02f48300d0
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Card/examples/brandImg2.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 311.3 299.5" enable-background="new 0 0 311.3 299.5" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M109,228.9l-47.1,10.8L0,152.1L155.6,0l155.6,152.1l-61.9,87.6l-47.1-10.8l-46.7,65.6L109,228.9z
+		 M155.6,286l41.4-58.3l-16.1-3.7l-24.4,36l-26.4-36l-16.1,3.7L155.6,286z M156.5,251.5l20.4-30.1L155.6,15l-21.2,206.4L156.5,251.5
+		z M64,234.2l41.9-9.6l-30.6-43.1l9.1-20.6l-28.3-38.7l73-89.2L6.5,152.7L64,234.2z M247.3,234.2l36.2-51.3l21.3-30.1L182.4,33.1
+		l73,89.2L227,160.9l9.1,20.6l-30.6,43.1L247.3,234.2z M200.2,223.4l30.2-42.4l-6.8-15.4l-39.7,54.1L200.2,223.4z M111.1,223.4
+		l16.3-3.7l-39.7-54.1l-6.8,15.4L111.1,223.4z M182.1,213.8l39.2-53.5L162,25.7L182.1,213.8z M129.2,213.8l20.1-188.1L90,160.3
+		L129.2,213.8z M86.6,155.7l60.3-136.8L62.2,122.4L86.6,155.7z M224.7,155.7l24.4-33.3L164.4,18.9L224.7,155.7z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg b/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg
new file mode 100644
index 00000000000..efca381b551
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Card/examples/pfLogo.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" xml:space="preserve">
+<g>
+	<path fill="#030303" d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
+		c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
+		c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
+		c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
+		c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"/>
+	<path fill="#030303" d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
+		c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
+		/>
+	<path fill="#030303" d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z"/>
+	<path fill="#030303" d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z"/>
+	<path fill="#030303" d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"/>
+	<path fill="#030303" d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
+		c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
+		l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
+		c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
+		H478.9z"/>
+	<path fill="#030303" d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
+		c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
+		c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"/>
+	<path fill="#030303" d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"/>
+	<path fill="#030303" d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
+	<path fill="#030303" d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
+</g>
+<g>
+	<path fill="#030303" d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
+		l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
+		l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
+		L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
+		l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
+		L101.1,70z"/>
+</g>
+</svg>
diff --git a/packages/patternfly-4/react-core/src/components/Card/index.ts b/packages/patternfly-4/react-core/src/components/Card/index.ts
index 4da33a48e8f..7794f4b0dac 100644
--- a/packages/patternfly-4/react-core/src/components/Card/index.ts
+++ b/packages/patternfly-4/react-core/src/components/Card/index.ts
@@ -1,4 +1,6 @@
 export * from './Card';
+export * from './CardActions'; 
 export * from './CardBody';
 export * from './CardFooter';
 export * from './CardHeader';
+export * from './CardHead'; 
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap
index d1ccfaee515..1d391d85575 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap
@@ -27,6 +27,7 @@ exports[`copy button render 1`] = `
   >
     <CopyIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ToggleButton.test.js.snap b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ToggleButton.test.js.snap
index 24cbc3ab3e0..a2c1fbb0630 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ToggleButton.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ToggleButton.test.js.snap
@@ -14,6 +14,7 @@ exports[`toggle button render 1`] = `
     aria-hidden="true"
     className="pf-c-clipboard-copy__group-toggle-icon"
     color="currentColor"
+    noVerticalAlign={false}
     size="sm"
     title={null}
   />
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.d.ts b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.d.ts
deleted file mode 100644
index 4edddc55989..00000000000
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-import { OneOf } from '../../helpers/typeUtils';
-
-export interface ContextSelectorProps {
-  children?: ReactNode;
-  isOpen?: boolean;
-  onToggle?(value: boolean): void;
-  onSelect?(event: React.SyntheticEvent<HTMLButtonElement>, value: ReactNode): void;
-  screenReaderLabel?: string;
-  toggleText?: string;
-  searchButtonAriaLabel?: string;
-  searchInputValue?: string;
-  onSearchInputChange?(value: string): void;
-  searchInputPlaceholder?: string;
-  onSearchButtonClick?(event: React.SyntheticEvent<HTMLButtonElement>): void;
-}
-
-declare const ContextSelector: FunctionComponent<ContextSelectorProps>;
-
-export default ContextSelector;
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md
index 44b0d45e7af..92a3071b239 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.md
@@ -1,6 +1,7 @@
 ---
 title: 'Context selector'
 propComponents: ['ContextSelector', 'ContextSelectorItem']
+typescript: true
 ---
 
 import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.tsx
similarity index 89%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.tsx
index 0c37498c512..3333c27f63c 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import ContextSelector from './ContextSelector';
-import ContextSelectorItem from './ContextSelectorItem';
+import { ContextSelector } from './ContextSelector';
+import { ContextSelectorItem } from './ContextSelectorItem';
 
 const items = [
   <ContextSelectorItem key="0">My Project</ContextSelectorItem>,
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.tsx
similarity index 71%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.tsx
index a3bce11b1fc..3cedc5c3a41 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -1,67 +1,71 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector'
 import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-import FocusTrap from 'focus-trap-react';
 import { SearchIcon } from '@patternfly/react-icons';
-import ContextSelectorToggle from './ContextSelectorToggle';
-import ContextSelectorMenuList from './ContextSelectorMenuList';
+import { ContextSelectorToggle } from './ContextSelectorToggle';
+import { ContextSelectorMenuList } from './ContextSelectorMenuList';
 import { ContextSelectorContext } from './contextSelectorConstants';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
 
+// Can't use ES6 imports :(
+// The types for it are also wrong, we should probably ditch this dependency.
+// tslint:disable-next-line
+const FocusTrap: any = require('focus-trap-react');
+
 // seed for the aria-labelledby ID
 let currentId = 0;
 const newId = currentId++;
 
-const propTypes = {
+export interface ContextSelectorProps {
   /** content rendered inside the Context Selector */
-  children: PropTypes.node,
+  children?: React.ReactNode;
   /** Classes applied to root element of Context Selector */
-  className: PropTypes.string,
+  className?: string;
   /** Flag to indicate if Context Selector is opened */
-  isOpen: PropTypes.bool,
+  isOpen?: boolean;
   /** Function callback called when user clicks toggle button */
-  onToggle: PropTypes.func,
+  onToggle?: (value: boolean) => void;
   /** Function callback called when user selects item */
-  onSelect: PropTypes.func,
+  onSelect?: (event: any, value: React.ReactNode) => void;
   /** Labels the Context Selector for Screen Readers */
-  screenReaderLabel: PropTypes.string,
+  screenReaderLabel?: string;
   /** Text that appears in the Context Selector Toggle */
-  toggleText: PropTypes.string,
+  toggleText?: string;
   /** aria-label for the Context Selector Search Button */
-  searchButtonAriaLabel: PropTypes.string,
+  searchButtonAriaLabel?: string;
   /** Value in the Search field */
-  searchInputValue: PropTypes.string,
+  searchInputValue?: string;
   /** Function callback called when user changes the Search Input */
-  onSearchInputChange: PropTypes.func,
+  onSearchInputChange?(value: string): void; 
   /** Search Input placeholder */
-  searchInputPlaceholder: PropTypes.string,
+  searchInputPlaceholder?: string;
   /** Function callback for when Search Button is clicked */
-  onSearchButtonClick: PropTypes.func
-};
+  onSearchButtonClick?(event?: React.SyntheticEvent<HTMLButtonElement>): void; 
+}
+
+export class ContextSelector extends React.Component<ContextSelectorProps> {
 
-const defaultProps = {
-  children: null,
-  className: '',
-  isOpen: false,
-  onToggle: () => {},
-  onSelect: () => {},
-  screenReaderLabel: '',
-  toggleText: '',
-  searchButtonAriaLabel: 'Search menu items',
-  searchInputValue: '',
-  onSearchInputChange: () => {},
-  searchInputPlaceholder: 'Search',
-  onSearchButtonClick: () => {}
-};
+  static defaultProps = {
+    children: null as React.ReactNode,
+    className: '',
+    isOpen: false,
+    onToggle: () => undefined as any,
+    onSelect: () => undefined as any,
+    screenReaderLabel: '',
+    toggleText: '',
+    searchButtonAriaLabel: 'Search menu items',
+    searchInputValue: '',
+    onSearchInputChange: () => undefined as any,
+    searchInputPlaceholder: 'Search',
+    onSearchButtonClick: () => undefined as any
+  }
 
-class ContextSelector extends React.Component {
-  parentRef = React.createRef();
+  parentRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-  onEnterPressed = event => {
+  onEnterPressed = (event: any) => {
     if (event.charCode === KEY_CODES.ENTER) {
       this.props.onSearchButtonClick();
     }
@@ -140,8 +144,3 @@ class ContextSelector extends React.Component {
     );
   }
 }
-
-ContextSelector.propTypes = propTypes;
-ContextSelector.defaultProps = defaultProps;
-
-export default ContextSelector;
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.d.ts b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.d.ts
deleted file mode 100644
index 8daec453c25..00000000000
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FunctionComponent, HTMLProps, ReactType } from 'react';
-
-export interface ContextSelectorItemProps {
-  isDisabled?: boolean;
-  isSelected?: boolean;
-  isHovered?: boolean;
-  onClick?: Function;
-}
-
-declare const ContextSelectorItem: FunctionComponent<ContextSelectorItemProps>;
-
-export default ContextSelectorItem;
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.tsx
similarity index 83%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.tsx
index ac165f7e5fc..996ad870ae9 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import ContextSelectorItem from './ContextSelectorItem';
+import { ContextSelectorItem } from './ContextSelectorItem';
 
 test('Renders ContextSelectorItem', () => {
   const view = shallow(
-    <ContextSelectorItem sendRef={jest.fn()} index="0">
+    <ContextSelectorItem sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
@@ -13,7 +13,7 @@ test('Renders ContextSelectorItem', () => {
 
 test('Renders ContextSelectorItem disabled and hovered', () => {
   const view = shallow(
-    <ContextSelectorItem isDisabled isHovered sendRef={jest.fn()} index="0">
+    <ContextSelectorItem isDisabled isHovered sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
@@ -23,7 +23,7 @@ test('Renders ContextSelectorItem disabled and hovered', () => {
 test('Verify onClick is called ', () => {
   const mockfn = jest.fn();
   const view = mount(
-    <ContextSelectorItem isHovered onClick={mockfn} sendRef={jest.fn()} index="0">
+    <ContextSelectorItem isHovered onClick={mockfn} sendRef={jest.fn()} index={0}>
       My Project
     </ContextSelectorItem>
   );
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.tsx
similarity index 62%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.tsx
index fcce248005e..8564583cb99 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorItem.tsx
@@ -1,40 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
 import { ContextSelectorContext } from './contextSelectorConstants';
 
-const propTypes = {
+export interface ContextSelectorItemProps {
   /** Anything which can be rendered as Context Selector item */
-  children: PropTypes.node,
+  children?: React.ReactNode; 
   /** Classes applied to root element of the Context Selector item */
-  className: PropTypes.string,
+  className?: string; 
   /** Render Context  Selector item as disabled */
-  isDisabled: PropTypes.bool,
+  isDisabled?: boolean; 
+  // isSelected?
   /** Forces display of the hover state of the element */
-  isHovered: PropTypes.bool,
+  isHovered?: boolean; 
   /** Callback for click event */
-  onClick: PropTypes.func,
+  onClick: (event: React.MouseEvent) => void; 
   /** internal index of the item */
-  index: PropTypes.number,
+  index: number; 
   /** Internal callback for ref tracking */
-  sendRef: PropTypes.func,
-  /** Additional props are spread to the button element */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-const defaultProps = {
-  children: null,
-  className: '',
-  isHovered: false,
-  isDisabled: false,
-  onClick: () => {},
-  index: undefined,
-  sendRef: Function.prototype
-};
+  sendRef: (index: number, current: any) => void; 
+}
 
-class ContextSelectorItem extends React.Component {
-  ref = React.createRef();
+export class ContextSelectorItem extends React.Component<ContextSelectorItemProps>{
+  static defaultProps = {
+    children: null as React.ReactNode,
+    className: '',
+    isHovered: false,
+    isDisabled: false,
+    onClick: (): any => undefined,
+    index: undefined as number,
+    sendRef: Function.prototype
+  }
+  
+  ref: React.RefObject<HTMLButtonElement> = React.createRef();
 
   componentDidMount() {
     /* eslint-disable-next-line */
@@ -57,8 +55,8 @@ class ContextSelectorItem extends React.Component {
               ref={this.ref}
               onClick={event => {
                 if (!isDisabled) {
-                  onClick && onClick(event);
-                  onSelect && onSelect(event, children);
+                  onClick(event);
+                  onSelect(event, children);
                 }
               }}
               {...props}
@@ -71,8 +69,3 @@ class ContextSelectorItem extends React.Component {
     );
   }
 }
-
-ContextSelectorItem.propTypes = propTypes;
-ContextSelectorItem.defaultProps = defaultProps;
-
-export default ContextSelectorItem;
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.js
deleted file mode 100644
index d989a4ecf98..00000000000
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
-import { css } from '@patternfly/react-styles';
-
-const propTypes = {
-  /** Content rendered inside the Context Selector Menu */
-  children: PropTypes.node,
-  /** Classess applied to root element of Context Selector menu */
-  className: PropTypes.string,
-  /** Flag to indicate if Context Selector menu is opened */
-  isOpen: PropTypes.bool,
-  /** Additional props are spread to the container component */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-const defaultProps = {
-  children: null,
-  className: '',
-  isOpen: true
-};
-
-class ContextSelectorMenuList extends React.Component {
-  refsCollection = [];
-
-  sendRef = (index, ref) => {
-    this.refsCollection[index] = ref;
-  };
-
-  extendChildren() {
-    return React.Children.map(this.props.children, (child, index) =>
-      React.cloneElement(child, {
-        sendRef: this.sendRef,
-        index
-      })
-    );
-  }
-
-  render() {
-    const { className, isOpen, children, ...props } = this.props;
-
-    return (
-      <ul className={css(styles.contextSelectorMenuList, className)} hidden={!isOpen} role="menu" {...props}>
-        {this.extendChildren()}
-      </ul>
-    );
-  }
-}
-
-ContextSelectorMenuList.propTypes = propTypes;
-ContextSelectorMenuList.defaultProps = defaultProps;
-
-export default ContextSelectorMenuList;
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.tsx
similarity index 69%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.tsx
index 88a2993ccf8..1db53b46de0 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ContextSelectorItem from './ContextSelectorItem';
-import ContextSelectorMenuList from './ContextSelectorMenuList';
+import { ContextSelectorItem } from './ContextSelectorItem';
+import { ContextSelectorMenuList } from './ContextSelectorMenuList';
 
 const items = [
   <ContextSelectorItem key="0">My Project</ContextSelectorItem>,
@@ -13,7 +13,7 @@ const items = [
 
 test('Renders ContextSelectorMenuList open', () => {
   const view = shallow(
-    <ContextSelectorMenuList isOpen openedOnEnter={false}>
+    <ContextSelectorMenuList isOpen={false}>
       {items}
     </ContextSelectorMenuList>
   );
@@ -21,6 +21,9 @@ test('Renders ContextSelectorMenuList open', () => {
 });
 
 test('Renders ContextSelectorMenuList closed', () => {
-  const view = shallow(<ContextSelectorMenuList openedOnEnter={false}>{items}</ContextSelectorMenuList>);
+  const view = shallow(
+    <ContextSelectorMenuList isOpen={false}>
+      {items}
+    </ContextSelectorMenuList>);
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx
new file mode 100644
index 00000000000..db590237578
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorMenuList.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
+import { css } from '@patternfly/react-styles';
+
+export interface ContextSelectorMenuListProps {
+  /** Content rendered inside the Context Selector Menu */
+  children?: React.ReactNode;
+  /** Classess applied to root element of Context Selector menu */
+  className?: string; 
+  /** Flag to indicate if Context Selector menu is opened */
+  isOpen?: boolean; 
+}
+
+export class ContextSelectorMenuList extends React.Component<ContextSelectorMenuListProps> {
+
+  static defaultProps = {
+    children: null as React.ReactNode,
+    className: '',
+    isOpen: true
+  }
+
+  refsCollection = [] as any;
+
+  sendRef = (index: number, ref: any) => {
+    this.refsCollection[index] = ref;
+  };
+
+  extendChildren() {
+    return React.Children.map(this.props.children, (child, index) =>
+      React.cloneElement(child as React.ReactElement<any>, {
+        sendRef: this.sendRef,
+        index
+      })
+    );
+  }
+
+  render = () => {
+    const { 
+      className, 
+      isOpen, 
+      children, 
+      ...props 
+    } = this.props;
+    return (
+      <ul className={css(styles.contextSelectorMenuList, className)} hidden={!isOpen} role="menu" {...props}>
+        {this.extendChildren()}
+      </ul>
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.test.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.test.tsx
similarity index 95%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.test.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.test.tsx
index 71d1c50fad7..7b0fc303272 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.test.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import ContextSelectorToggle from './ContextSelectorToggle';
+import { ContextSelectorToggle } from './ContextSelectorToggle';
 
 test('Renders ContextSelectorToggle', () => {
   const view = shallow(<ContextSelectorToggle id="toggle-id" />);
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.js b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
similarity index 66%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.js
rename to packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
index 5b0d38928ad..8c7a167c379 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.js
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/ContextSelectorToggle.tsx
@@ -1,48 +1,47 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import { CaretDownIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/react-styles/css/components/ContextSelector/context-selector';
 import { css } from '@patternfly/react-styles';
 import { KEY_CODES } from '../../helpers/constants';
 
-const propTypes = {
+export interface ContextSelectorToggleProps {
   /** HTML ID of toggle */
-  id: PropTypes.string.isRequired,
+  id: string;
   /** Classes applied to root element of toggle */
-  className: PropTypes.string,
+  className?: string; 
   /** Text that appears in the Context Selector Toggle */
-  toggleText: PropTypes.string,
+  toggleText?: string; 
   /** Flag to indicate if menu is opened */
-  isOpen: PropTypes.bool,
+  isOpen?: boolean; 
   /** Callback called when toggle is clicked */
-  onToggle: PropTypes.func,
+  onToggle?: (event: any, value: boolean) => void;
   /** Callback for toggle open on keyboard entry */
-  onEnter: PropTypes.func,
+  onEnter: () => void; 
   /** Element which wraps toggle */
-  parentRef: PropTypes.any,
+  parentRef?: any; 
   /** Forces focus state */
-  isFocused: PropTypes.bool,
+  isFocused?: boolean; 
   /** Forces hover state */
-  isHovered: PropTypes.bool,
+  isHovered?: boolean;
   /** Forces active state */
-  isActive: PropTypes.bool,
-  /** Additional props are spread to the container <button> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
+  isActive?: boolean; 
+}
+
+export class ContextSelectorToggle extends React.Component<ContextSelectorToggleProps> {
+  static defaultProps = {
+    className: '',
+    toggleText: '',
+    isOpen: false,
+    onEnter: () => undefined as any,
+    parentRef: null as any,
+    isFocused: false,
+    isHovered: false,
+    isActive: false,
+    onToggle: (event: any, value: boolean) => undefined as any 
+  };
 
-const defaultProps = {
-  className: '',
-  toggleText: '',
-  isOpen: false,
-  onEnter: () => {},
-  parentRef: null,
-  isFocused: false,
-  isHovered: false,
-  isActive: false,
-  onToggle: () => {}
-};
+  toggle: React.RefObject<HTMLButtonElement> = React.createRef();
 
-class ContextSelectorToggle extends Component {
   componentDidMount = () => {
     document.addEventListener('mousedown', this.onDocClick);
     document.addEventListener('touchstart', this.onDocClick);
@@ -55,34 +54,34 @@ class ContextSelectorToggle extends Component {
     document.removeEventListener('keydown', this.onEscPress);
   };
 
-  onDocClick = event => {
+  onDocClick = (event: any) => {
     const { isOpen, parentRef, onToggle } = this.props;
     if (isOpen && parentRef && !parentRef.contains(event.target)) {
-      onToggle && onToggle(false);
-      this.toggle.focus();
+      onToggle(null, false);
+      this.toggle.current.focus();
     }
   };
 
-  onEscPress = event => {
+  onEscPress = (event: any) => {
     const { isOpen, parentRef, onToggle } = this.props;
     const keyCode = event.keyCode || event.which;
     if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY && parentRef && parentRef.contains(event.target)) {
-      onToggle && onToggle(false);
-      this.toggle.focus();
+      onToggle(null, false);
+      this.toggle.current.focus();
     }
   };
 
-  onKeyDown = event => {
+  onKeyDown = (event: any) => {
     const { isOpen, onToggle, onEnter } = this.props;
-    if ((event.keyCode === KEY_CODES.TAB && !isOpen) || event.key !== KEY_CODES.ENTER) return;
+    if ((event.keyCode === KEY_CODES.TAB && !isOpen) || event.key !== KEY_CODES.ENTER) { return };
     event.preventDefault();
     if (
       (event.keyCode === KEY_CODES.TAB || event.keyCode === KEY_CODES.ENTER || event.key !== KEY_CODES.SPACE) &&
       isOpen
     ) {
-      onToggle(!isOpen);
+      onToggle(null, !isOpen);
     } else if ((event.keyCode === KEY_CODES.ENTER || event.key === ' ') && !isOpen) {
-      onToggle(!isOpen);
+      onToggle(null, !isOpen);
       onEnter();
     }
   };
@@ -105,9 +104,7 @@ class ContextSelectorToggle extends Component {
       <button
         {...props}
         id={id}
-        ref={toggle => {
-          this.toggle = toggle;
-        }}
+        ref={this.toggle}
         className={css(
           styles.contextSelectorToggle,
           isFocused && styles.modifiers.focus,
@@ -116,9 +113,7 @@ class ContextSelectorToggle extends Component {
           className
         )}
         type="button"
-        onClick={event => {
-          onToggle && onToggle(event, !isOpen);
-        }}
+        onClick={event => onToggle(event, !isOpen)}
         aria-expanded={isOpen}
         onKeyDown={this.onKeyDown}
       >
@@ -127,9 +122,4 @@ class ContextSelectorToggle extends Component {
       </button>
     );
   }
-}
-
-ContextSelectorToggle.propTypes = propTypes;
-ContextSelectorToggle.defaultProps = defaultProps;
-
-export default ContextSelectorToggle;
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.js.snap b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.tsx.snap
similarity index 99%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.tsx.snap
index 50b4e78b02b..ca876950c62 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelector.test.tsx.snap
@@ -80,6 +80,7 @@ exports[`Renders ContextSelector open 1`] = `
             <SearchIcon
               aria-hidden="true"
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             />
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorItem.test.js.snap b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorItem.test.tsx.snap
similarity index 100%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorItem.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorItem.test.tsx.snap
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorMenuList.test.js.snap b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorMenuList.test.tsx.snap
similarity index 96%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorMenuList.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorMenuList.test.tsx.snap
index 7f046c60d19..1f2525ffafe 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorMenuList.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorMenuList.test.tsx.snap
@@ -3,8 +3,7 @@
 exports[`Renders ContextSelectorMenuList closed 1`] = `
 <ul
   className="pf-c-context-selector__menu-list"
-  hidden={false}
-  openedOnEnter={false}
+  hidden={true}
   role="menu"
 >
   <ContextSelectorItem
@@ -68,8 +67,7 @@ exports[`Renders ContextSelectorMenuList closed 1`] = `
 exports[`Renders ContextSelectorMenuList open 1`] = `
 <ul
   className="pf-c-context-selector__menu-list"
-  hidden={false}
-  openedOnEnter={false}
+  hidden={true}
   role="menu"
 >
   <ContextSelectorItem
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorToggle.test.js.snap b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorToggle.test.tsx.snap
similarity index 97%
rename from packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorToggle.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorToggle.test.tsx.snap
index 88c5660c8af..e3a2047118e 100644
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorToggle.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/__snapshots__/ContextSelectorToggle.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`Renders ContextSelectorToggle 1`] = `
     aria-hidden={true}
     className="pf-c-context-selector__toggle-icon"
     color="currentColor"
+    noVerticalAlign={false}
     size="sm"
     title={null}
   />
@@ -50,6 +51,7 @@ exports[`Verify ESC press  1`] = `
       aria-hidden={true}
       className="pf-c-context-selector__toggle-icon"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
@@ -106,6 +108,7 @@ exports[`Verify ESC press with not isOpen 1`] = `
       aria-hidden={true}
       className="pf-c-context-selector__toggle-icon"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
@@ -162,6 +165,7 @@ exports[`Verify keydown enter  1`] = `
       aria-hidden={true}
       className="pf-c-context-selector__toggle-icon"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
@@ -218,6 +222,7 @@ exports[`Verify keydown tab  1`] = `
       aria-hidden={true}
       className="pf-c-context-selector__toggle-icon"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/contextSelectorConstants.js b/packages/patternfly-4/react-core/src/components/ContextSelector/contextSelectorConstants.js
deleted file mode 100644
index c566379c630..00000000000
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/contextSelectorConstants.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export const ContextSelectorContext = React.createContext({
-  onSelect: () => {}
-});
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/contextSelectorConstants.tsx b/packages/patternfly-4/react-core/src/components/ContextSelector/contextSelectorConstants.tsx
new file mode 100644
index 00000000000..4da4958db7c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/contextSelectorConstants.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const ContextSelectorContext = React.createContext({
+  onSelect: (event: any, value: React.ReactNode): any => undefined 
+});
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/index.d.ts b/packages/patternfly-4/react-core/src/components/ContextSelector/index.d.ts
deleted file mode 100644
index a69dda91f4f..00000000000
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ContextSelector, ContextSelectorProps } from './ContextSelector';
-export { default as ContextSelectorItem, ContextSelectorItemProps } from './ContextSelectorItem';
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/index.js b/packages/patternfly-4/react-core/src/components/ContextSelector/index.js
deleted file mode 100644
index 92122688a86..00000000000
--- a/packages/patternfly-4/react-core/src/components/ContextSelector/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ContextSelector } from './ContextSelector';
-export { default as ContextSelectorItem } from './ContextSelectorItem';
diff --git a/packages/patternfly-4/react-core/src/components/ContextSelector/index.ts b/packages/patternfly-4/react-core/src/components/ContextSelector/index.ts
new file mode 100644
index 00000000000..a34ba322f81
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ContextSelector/index.ts
@@ -0,0 +1,2 @@
+export * from './ContextSelector';
+export * from './ContextSelectorItem';
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts
index 0e7ab679cfd..26669975244 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.d.ts
@@ -10,11 +10,13 @@ export interface DropdownProps extends HTMLProps<HTMLDivElement> {
   isAction?: boolean;
   isGrouped?: boolean;
   onSelect?(event: React.SyntheticEvent<HTMLDivElement>): void;
-  position?: OneOf<typeof DropdownPosition, keyof typeof DropdownPosition>;
-  direction?: OneOf<typeof DropdownDirection, keyof typeof DropdownDirection>;
+  position?: DropdownPosition | 'right' | 'left';
+  direction?: DropdownDirection | 'up' | 'down';
   toggle?: ReactNode;
 }
 
 declare const Dropdown: FunctionComponent<DropdownProps>;
 
+export const DropdownWithContext: FunctionComponent<DropdownProps>;
+
 export default Dropdown;
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
index 9736b8c98b1..d85f5d0cc27 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js
@@ -52,7 +52,7 @@ const defaultProps = {
   onSelect: Function.prototype
 };
 
-class Dropdown extends React.Component {
+export class DropdownWithContext extends React.Component {
   onEnter = () => {
     this.openedOnEnter = true;
   };
@@ -88,48 +88,66 @@ class Dropdown extends React.Component {
       renderedContent = children;
     }
     return (
-      <div
-        {...props}
-        className={css(
-          styles.dropdown,
-          direction === DropdownDirection.up && styles.modifiers.top,
-          isOpen && styles.modifiers.expanded,
-          className
+      <DropdownContext.Consumer>
+        {({ baseClass }) => (
+          <div
+            {...props}
+            className={css(
+              baseClass,
+              direction === DropdownDirection.up && styles.modifiers.top,
+              isOpen && styles.modifiers.expanded,
+              className
+            )}
+            ref={ref => {
+              this.parentRef = ref;
+            }}
+          >
+            {Children.map(toggle, oneToggle =>
+              cloneElement(oneToggle, {
+                parentRef: this.parentRef,
+                isOpen,
+                id,
+                isPlain,
+                ariaHasPopup,
+                onEnter: this.onEnter
+              })
+            )}
+            {isOpen && (
+              <DropdownMenu
+                component={component}
+                isOpen={isOpen}
+                position={position}
+                aria-labelledby={id}
+                openedOnEnter={this.openedOnEnter}
+                isGrouped={isGrouped}
+              >
+                {renderedContent}
+              </DropdownMenu>
+            )}
+          </div>
         )}
-        ref={ref => {
-          this.parentRef = ref;
-        }}
-      >
-        {Children.map(toggle, oneToggle =>
-          cloneElement(oneToggle, {
-            parentRef: this.parentRef,
-            isOpen,
-            id,
-            isPlain,
-            ariaHasPopup,
-            onEnter: this.onEnter
-          })
-        )}
-        {isOpen && (
-          <DropdownContext.Provider value={event => onSelect && onSelect(event)}>
-            <DropdownMenu
-              component={component}
-              isOpen={isOpen}
-              position={position}
-              aria-labelledby={id}
-              openedOnEnter={this.openedOnEnter}
-              isGrouped={isGrouped}
-            >
-              {renderedContent}
-            </DropdownMenu>
-          </DropdownContext.Provider>
-        )}
-      </div>
+      </DropdownContext.Consumer>
     );
   }
 }
 
+const Dropdown = ({ onSelect, ...props }) => (
+  <DropdownContext.Provider
+    value={{
+      onSelect: event => onSelect && onSelect(event),
+      menuClass: styles.dropdownMenu,
+      itemClass: styles.dropdownMenuItem,
+      toggleClass: styles.dropdownToggle,
+      baseClass: styles.dropdown
+    }}
+  >
+    <DropdownWithContext {...props} />
+  </DropdownContext.Provider>
+);
+
 Dropdown.propTypes = propTypes;
 Dropdown.defaultProps = defaultProps;
+DropdownWithContext.propTypes = propTypes;
+DropdownWithContext.defaultProps = defaultProps;
 
 export default Dropdown;
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts
index 009ef1350e9..78131ea10d2 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.d.ts
@@ -1,6 +1,27 @@
-import { HTMLProps, ReactType } from 'react';
+import * as React from 'react';
 
-export interface DropdownItemProps extends HTMLProps<HTMLAnchorElement> {
-  component?: ReactType | string;
-  isDisabled?: Boolean;
-}
+export interface DropdownItemProps extends React.HTMLProps<HTMLAnchorElement> {
+  /** Anything which can be rendered as dropdown item */
+  children?: React.ReactNode; 
+  /** Classes applied to root element of dropdown item */
+  className?: string; 
+  /** Indicates which component will be used as dropdown item */
+  component?: React.ReactType | string;
+  /** Flag if this is for the app launcher */
+  isAppLauncher?: boolean; 
+  /** Role for the item */
+  role?: string; 
+  /** Render dropdown item as disabled option */
+  isDisabled?: boolean; 
+  /** Forces display of the hover state of the element */
+  isHovered?: boolean; 
+  /** Default hyperlink location */
+  href?: string; 
+  index?: number; 
+  context?: {
+    keyHandler?: (index: number, direction: string) => void,
+    sendRef?: (index: number, ref: any, isDisabled: boolean) => void
+  };
+  /** Callback for click event */
+  onClick?: () => void; 
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js
index 56338faf012..571741bb41d 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownItem.js
@@ -112,7 +112,6 @@ class DropdownItem extends React.Component {
       this.props.role === 'separator'
         ? (classes = className)
         : (classes = css(
-            dropdownStyles.dropdownMenuItem,
             isDisabled && dropdownStyles.modifiers.disabled,
             isHovered && dropdownStyles.modifiers.hover,
             className
@@ -120,7 +119,7 @@ class DropdownItem extends React.Component {
     }
     return (
       <DropdownContext.Consumer>
-        {onSelect => (
+        {({ onSelect, itemClass }) => (
           <li role="none">
             {React.isValidElement(children) ? (
               React.Children.map(children, child =>
@@ -128,7 +127,8 @@ class DropdownItem extends React.Component {
                   className: `${css(
                     isDisabled && dropdownStyles.modifiers.disabled,
                     isHovered && dropdownStyles.modifiers.hover,
-                    className
+                    className,
+                    itemClass
                   )} ${child.props.className}`,
                   ref: this.ref,
                   onKeyDown: this.onKeyDown,
@@ -143,7 +143,7 @@ class DropdownItem extends React.Component {
             ) : (
               <Component
                 {...additionalProps}
-                className={classes}
+                className={css(classes, this.props.role !== 'separator' && itemClass)}
                 ref={this.ref}
                 onKeyDown={this.onKeyDown}
                 onClick={event => {
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
index 5fc68c02d46..00ff1647410 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/DropdownMenu.js
@@ -148,10 +148,10 @@ class DropdownMenu extends React.Component {
       >
         {Component === 'div' ? (
           <DropdownContext.Consumer>
-            {onSelect => (
+            {({ onSelect, menuClass }) => (
               <ul
                 className={css(
-                  styles.dropdownMenu,
+                  menuClass,
                   position === DropdownPosition.right && styles.modifiers.alignRight,
                   className
                 )}
@@ -164,31 +164,39 @@ class DropdownMenu extends React.Component {
           </DropdownContext.Consumer>
         ) : (
           (isGrouped && (
-            <div
-              {...props}
-              className={css(
-                styles.dropdownMenu,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                className
+            <DropdownContext.Consumer>
+              {({ menuClass }) => (
+                <div
+                  {...props}
+                  className={css(
+                    menuClass,
+                    position === DropdownPosition.right && styles.modifiers.alignRight,
+                    className
+                  )}
+                  hidden={!isOpen}
+                  role="menu"
+                >
+                  {this.extendChildren()}
+                </div>
               )}
-              hidden={!isOpen}
-              role="menu"
-            >
-              {this.extendChildren()}
-            </div>
+            </DropdownContext.Consumer>
           )) || (
-            <Component
-              {...props}
-              className={css(
-                styles.dropdownMenu,
-                position === DropdownPosition.right && styles.modifiers.alignRight,
-                className
+            <DropdownContext.Consumer>
+              {({ menuClass }) => (
+                <Component
+                  {...props}
+                  className={css(
+                    menuClass,
+                    position === DropdownPosition.right && styles.modifiers.alignRight,
+                    className
+                  )}
+                  hidden={!isOpen}
+                  role="menu"
+                >
+                  {this.extendChildren()}
+                </Component>
               )}
-              hidden={!isOpen}
-              role="menu"
-            >
-              {this.extendChildren()}
-            </Component>
+            </DropdownContext.Consumer>
           )
         )}
       </DropdownArrowContext.Provider>
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
index 629c831edd9..d6ba543349e 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/Toggle.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown';
+import { DropdownContext } from './dropdownConstants';
 import { css } from '@patternfly/react-styles';
 import { KEY_CODES } from '../../helpers/constants';
 
@@ -121,30 +122,34 @@ class Toggle extends Component {
       ...props
     } = this.props;
     return (
-      <button
-        {...props}
-        id={id}
-        ref={toggle => {
-          this.toggle = toggle;
-        }}
-        className={css(
-          isSplitButton ? styles.dropdownToggleButton : styles.dropdownToggle,
-          isFocused && styles.modifiers.focus,
-          isHovered && styles.modifiers.hover,
-          isActive && styles.modifiers.active,
-          isPlain && styles.modifiers.plain,
-          isDisabled && styles.modifiers.disabled,
-          className
+      <DropdownContext.Consumer>
+        {({ toggleClass }) => (
+          <button
+            {...props}
+            id={id}
+            ref={toggle => {
+              this.toggle = toggle;
+            }}
+            className={css(
+              isSplitButton ? styles.dropdownToggleButton : toggleClass || styles.dropdownToggle,
+              isFocused && styles.modifiers.focus,
+              isHovered && styles.modifiers.hover,
+              isActive && styles.modifiers.active,
+              isPlain && styles.modifiers.plain,
+              isDisabled && styles.modifiers.disabled,
+              className
+            )}
+            type={type || 'button'}
+            onClick={event => onToggle && onToggle(!isOpen, event)}
+            aria-expanded={isOpen}
+            aria-haspopup={ariaHasPopup}
+            onKeyDown={this.onKeyDown}
+            disabled={isDisabled}
+          >
+            {children}
+          </button>
         )}
-        type={type || 'button'}
-        onClick={event => onToggle && onToggle(!isOpen, event)}
-        aria-expanded={isOpen}
-        aria-haspopup={ariaHasPopup}
-        onKeyDown={this.onKeyDown}
-        disabled={isDisabled}
-      >
-        {children}
-      </button>
+      </DropdownContext.Consumer>
     );
   }
 }
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
index f5d606d75ea..0046014a3ba 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -26,26 +26,35 @@ exports[`KebabToggle basic 1`] = `
     />
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-expanded"
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={Array []}
+    isGrouped={false}
+    isOpen={true}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <Kebab
+        aria-label="Actions"
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
   >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={null}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={true}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
+    <div
+      className="pf-c-dropdown pf-m-expanded"
     >
-      <Toggle
+      <Kebab
         aria-label="Actions"
         ariaHasPopup={null}
         className=""
@@ -56,80 +65,98 @@ exports[`KebabToggle basic 1`] = `
         isHovered={false}
         isOpen={true}
         isPlain={false}
-        isSplitButton={false}
+        key=".0"
         onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
       >
-        <button
-          aria-expanded={true}
-          aria-haspopup={null}
+        <Toggle
           aria-label="Actions"
-          className="pf-c-dropdown__toggle"
-          disabled={false}
+          ariaHasPopup={null}
+          className=""
           id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={true}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
         >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
+          <button
+            aria-expanded={true}
+            aria-haspopup={null}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
           >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
             >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown Toggle"
-      className=""
-      component="div"
-      isGrouped={false}
-      isOpen={true}
-      openedOnEnter={false}
-      position="left"
-    >
-      <ul
-        className="pf-c-dropdown__menu"
-        hidden={false}
-        onClick={[Function]}
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+      <DropdownMenu
+        aria-labelledby="Dropdown Toggle"
+        className=""
+        component="div"
+        isGrouped={false}
+        isOpen={true}
+        openedOnEnter={false}
+        position="left"
       >
-        <div
-          aria-labelledby="Dropdown Toggle"
+        <ul
+          className="pf-c-dropdown__menu"
+          hidden={false}
+          onClick={[Function]}
         >
           <div
-            className="pf-c-dropdown__menu-item"
-            key=".0"
-            onKeyDown={[Function]}
-            tabIndex={-1}
+            aria-labelledby="Dropdown Toggle"
           >
-            BASIC
+            <div
+              className="pf-c-dropdown__menu-item"
+              key=".0"
+              onKeyDown={[Function]}
+              tabIndex={-1}
+            >
+              BASIC
+            </div>
           </div>
-        </div>
-      </ul>
-    </DropdownMenu>
-  </div>
+        </ul>
+      </DropdownMenu>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
 
@@ -283,26 +310,159 @@ exports[`KebabToggle dropup + right aligned 1`] = `
     />
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-top"
+  <DropdownWithContext
+    className=""
+    direction="up"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <Kebab
+        aria-label="Actions"
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
   >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={true}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
+    <div
+      className="pf-c-dropdown pf-m-top"
     >
-      <Toggle
+      <Kebab
         aria-label="Actions"
         ariaHasPopup={true}
         className=""
@@ -313,52 +473,70 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         isHovered={false}
         isOpen={false}
         isPlain={false}
-        isSplitButton={false}
+        key=".0"
         onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
       >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
+        <Toggle
           aria-label="Actions"
-          className="pf-c-dropdown__toggle"
-          disabled={false}
+          ariaHasPopup={true}
+          className=""
           id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
         >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
           >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
             >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-  </div>
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
 
@@ -512,102 +690,253 @@ exports[`KebabToggle dropup 1`] = `
     />
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-top"
-  >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={true}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
-        aria-label="Actions"
-        ariaHasPopup={true}
-        className=""
-        id="Dropdown Toggle"
-        isActive={false}
-        isDisabled={false}
-        isFocused={false}
-        isHovered={false}
-        isOpen={false}
-        isPlain={false}
-        isSplitButton={false}
-        onEnter={[Function]}
-        onToggle={[Function]}
-        parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          aria-label="Actions"
-          className="pf-c-dropdown__toggle"
-          disabled={false}
-          id="Dropdown Toggle"
+  <DropdownWithContext
+    className=""
+    direction="up"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
           onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          role={null}
         >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
-            >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-  </div>
-</Dropdown>
-`;
-
-exports[`KebabToggle expanded 1`] = `
-<Dropdown
-  className=""
-  direction="down"
-  dropdownItems={
-    Array [
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <Kebab
+        aria-label="Actions"
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
+  >
+    <div
+      className="pf-c-dropdown pf-m-top"
+    >
+      <Kebab
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+    </div>
+  </DropdownWithContext>
+</Dropdown>
+`;
+
+exports[`KebabToggle expanded 1`] = `
+<Dropdown
+  className=""
+  direction="down"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
         isAppLauncher={false}
         isDisabled={false}
         isHovered={false}
@@ -741,96 +1070,11 @@ exports[`KebabToggle expanded 1`] = `
     />
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-expanded"
-  >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={true}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={true}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
-        aria-label="Actions"
-        ariaHasPopup={true}
-        className=""
-        id="Dropdown Toggle"
-        isActive={false}
-        isDisabled={false}
-        isFocused={false}
-        isHovered={false}
-        isOpen={true}
-        isPlain={false}
-        isSplitButton={false}
-        onEnter={[Function]}
-        onToggle={[Function]}
-        parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={true}
-          aria-haspopup={true}
-          aria-label="Actions"
-          className="pf-c-dropdown__toggle"
-          disabled={false}
-          id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
-            >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-    <DropdownMenu
-      aria-labelledby="Dropdown Toggle"
-      className=""
-      component="ul"
-      isGrouped={false}
-      isOpen={true}
-      openedOnEnter={false}
-      position="left"
-    >
-      <ul
-        aria-labelledby="Dropdown Toggle"
-        className="pf-c-dropdown__menu"
-        hidden={false}
-        role="menu"
-      >
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
         <DropdownItem
           className=""
           component="a"
@@ -841,29 +1085,15 @@ exports[`KebabToggle expanded 1`] = `
             }
           }
           href="#"
-          index={0}
+          index={-1}
           isAppLauncher={false}
           isDisabled={false}
           isHovered={false}
-          key=".$link"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <a
-              aria-disabled={false}
-              className="pf-c-dropdown__menu-item"
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-            >
-              Link
-            </a>
-          </li>
-        </DropdownItem>
+          Link
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="button"
@@ -874,30 +1104,15 @@ exports[`KebabToggle expanded 1`] = `
             }
           }
           href="#"
-          index={1}
+          index={-1}
           isAppLauncher={false}
           isDisabled={false}
           isHovered={false}
-          key=".$action"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <button
-              className="pf-c-dropdown__menu-item"
-              disabled={false}
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              type="button"
-            >
-              Action
-            </button>
-          </li>
-        </DropdownItem>
+          Action
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="a"
@@ -908,30 +1123,15 @@ exports[`KebabToggle expanded 1`] = `
             }
           }
           href="#"
-          index={2}
+          index={-1}
           isAppLauncher={false}
           isDisabled={true}
           isHovered={false}
-          key=".$disabled link"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-c-dropdown__menu-item pf-m-disabled"
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </li>
-        </DropdownItem>
+          Disabled Link
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="button"
@@ -942,69 +1142,22 @@ exports[`KebabToggle expanded 1`] = `
             }
           }
           href="#"
-          index={3}
+          index={-1}
           isAppLauncher={false}
           isDisabled={true}
           isHovered={false}
-          key=".$disabled action"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <button
-              className="pf-c-dropdown__menu-item pf-m-disabled"
-              disabled={true}
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              type="button"
-            >
-              Disabled Action
-            </button>
-          </li>
-        </DropdownItem>
+          Disabled Action
+        </DropdownItem>,
         <Separator
           className=""
           component="a"
           href="#"
-          index={4}
           isDisabled={false}
           isHovered={false}
-          key=".$separator"
-        >
-          <DropdownItem
-            className="pf-c-dropdown__separator"
-            component="div"
-            context={
-              Object {
-                "keyHandler": [Function],
-                "sendRef": [Function],
-              }
-            }
-            href="#"
-            index={4}
-            isAppLauncher={false}
-            isDisabled={false}
-            isHovered={false}
-            onClick={[Function]}
-            role="separator"
-          >
-            <li
-              role="none"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                role="separator"
-              />
-            </li>
-          </DropdownItem>
-        </Separator>
+        />,
         <DropdownItem
           className=""
           component="a"
@@ -1015,29 +1168,15 @@ exports[`KebabToggle expanded 1`] = `
             }
           }
           href="#"
-          index={5}
+          index={-1}
           isAppLauncher={false}
           isDisabled={false}
           isHovered={false}
-          key=".$separated link"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <a
-              aria-disabled={false}
-              className="pf-c-dropdown__menu-item"
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-            >
-              Separated Link
-            </a>
-          </li>
-        </DropdownItem>
+          Separated Link
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="button"
@@ -1048,54 +1187,395 @@ exports[`KebabToggle expanded 1`] = `
             }
           }
           href="#"
-          index={6}
+          index={-1}
           isAppLauncher={false}
           isDisabled={false}
           isHovered={false}
-          key=".$separated action"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <button
-              className="pf-c-dropdown__menu-item"
-              disabled={false}
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              type="button"
-            >
-              Separated Action
-            </button>
-          </li>
-        </DropdownItem>
-      </ul>
-    </DropdownMenu>
-  </div>
-</Dropdown>
-`;
-
-exports[`KebabToggle plain 1`] = `
-<Dropdown
-  className=""
-  direction="down"
-  dropdownItems={
-    Array [
-      <DropdownItem
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={true}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <Kebab
+        aria-label="Actions"
         className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
-          }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
+  >
+    <div
+      className="pf-c-dropdown pf-m-expanded"
+    >
+      <Kebab
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={true}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={true}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={true}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+      <DropdownMenu
+        aria-labelledby="Dropdown Toggle"
+        className=""
+        component="ul"
+        isGrouped={false}
+        isOpen={true}
+        openedOnEnter={false}
+        position="left"
+      >
+        <ul
+          aria-labelledby="Dropdown Toggle"
+          className="pf-c-dropdown__menu"
+          hidden={false}
+          role="menu"
+        >
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={0}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={false}
+                className="pf-c-dropdown__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+              >
+                Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={1}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-c-dropdown__menu-item"
+                disabled={false}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Action
+              </button>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={2}
+            isAppLauncher={false}
+            isDisabled={true}
+            isHovered={false}
+            key=".$disabled link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={true}
+                className="pf-m-disabled pf-c-dropdown__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                tabIndex={-1}
+              >
+                Disabled Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={3}
+            isAppLauncher={false}
+            isDisabled={true}
+            isHovered={false}
+            key=".$disabled action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-m-disabled pf-c-dropdown__menu-item"
+                disabled={true}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Disabled Action
+              </button>
+            </li>
+          </DropdownItem>
+          <Separator
+            className=""
+            component="a"
+            href="#"
+            index={4}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separator"
+          >
+            <DropdownItem
+              className="pf-c-dropdown__separator"
+              component="div"
+              context={
+                Object {
+                  "keyHandler": [Function],
+                  "sendRef": [Function],
+                }
+              }
+              href="#"
+              index={4}
+              isAppLauncher={false}
+              isDisabled={false}
+              isHovered={false}
+              onClick={[Function]}
+              role="separator"
+            >
+              <li
+                role="none"
+              >
+                <div
+                  className="pf-c-dropdown__separator"
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="separator"
+                />
+              </li>
+            </DropdownItem>
+          </Separator>
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={5}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separated link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={false}
+                className="pf-c-dropdown__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+              >
+                Separated Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={6}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separated action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-c-dropdown__menu-item"
+                disabled={false}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Separated Action
+              </button>
+            </li>
+          </DropdownItem>
+        </ul>
+      </DropdownMenu>
+    </div>
+  </DropdownWithContext>
+</Dropdown>
+`;
+
+exports[`KebabToggle plain 1`] = `
+<Dropdown
+  className=""
+  direction="down"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
         isDisabled={false}
         isHovered={false}
         onClick={[Function]}
@@ -1228,255 +1708,159 @@ exports[`KebabToggle plain 1`] = `
     />
   }
 >
-  <div
-    className="pf-c-dropdown"
-  >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={true}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={true}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
-        aria-label="Actions"
-        ariaHasPopup={true}
-        className=""
-        id="Dropdown Toggle"
-        isActive={false}
-        isDisabled={false}
-        isFocused={false}
-        isHovered={false}
-        isOpen={false}
-        isPlain={true}
-        isSplitButton={false}
-        onEnter={[Function]}
-        onToggle={[Function]}
-        parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          aria-label="Actions"
-          className="pf-c-dropdown__toggle pf-m-plain"
-          disabled={false}
-          id="Dropdown Toggle"
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
           onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          role={null}
         >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
-            >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-  </div>
-</Dropdown>
-`;
-
-exports[`KebabToggle regular 1`] = `
-<Dropdown
-  className=""
-  direction="down"
-  dropdownItems={
-    Array [
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Link
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="button"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Action
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={true}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="button"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={true}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Disabled Action
-      </DropdownItem>,
-      <Separator
-        className=""
-        component="a"
-        href="#"
-        isDisabled={false}
-        isHovered={false}
-      />,
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Separated Link
-      </DropdownItem>,
-      <DropdownItem
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={true}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <Kebab
+        aria-label="Actions"
         className=""
-        component="button"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
-          }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
+        id="Dropdown Toggle"
+        isActive={false}
         isDisabled={false}
+        isFocused={false}
         isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Separated Action
-      </DropdownItem>,
-    ]
-  }
-  isGrouped={false}
-  isOpen={false}
-  isPlain={false}
-  onSelect={[Function]}
-  position="left"
-  toggle={
-    <Kebab
-      aria-label="Actions"
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      onToggle={[Function]}
-      parentRef={null}
-    />
-  }
->
-  <div
-    className="pf-c-dropdown"
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
   >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={true}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
+    <div
+      className="pf-c-dropdown"
     >
-      <Toggle
+      <Kebab
         aria-label="Actions"
         ariaHasPopup={true}
         className=""
@@ -1486,57 +1870,75 @@ exports[`KebabToggle regular 1`] = `
         isFocused={false}
         isHovered={false}
         isOpen={false}
-        isPlain={false}
-        isSplitButton={false}
+        isPlain={true}
+        key=".0"
         onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
       >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
+        <Toggle
           aria-label="Actions"
-          className="pf-c-dropdown__toggle"
-          disabled={false}
+          ariaHasPopup={true}
+          className=""
           id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={true}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
         >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle pf-m-plain"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
           >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
             >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-  </div>
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
 
-exports[`KebabToggle right aligned 1`] = `
+exports[`KebabToggle regular 1`] = `
 <Dropdown
   className=""
   direction="down"
@@ -1669,7 +2071,7 @@ exports[`KebabToggle right aligned 1`] = `
   isOpen={false}
   isPlain={false}
   onSelect={[Function]}
-  position="right"
+  position="left"
   toggle={
     <Kebab
       aria-label="Actions"
@@ -1686,28 +2088,142 @@ exports[`KebabToggle right aligned 1`] = `
     />
   }
 >
-  <div
-    className="pf-c-dropdown"
-  >
-    <Kebab
-      aria-label="Actions"
-      ariaHasPopup={true}
-      className=""
-      id="Dropdown Toggle"
-      isActive={false}
-      isDisabled={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <Kebab
         aria-label="Actions"
-        ariaHasPopup={true}
         className=""
         id="Dropdown Toggle"
         isActive={false}
@@ -1716,197 +2232,96 @@ exports[`KebabToggle right aligned 1`] = `
         isHovered={false}
         isOpen={false}
         isPlain={false}
-        isSplitButton={false}
-        onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          aria-label="Actions"
-          className="pf-c-dropdown__toggle"
-          disabled={false}
-          id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <EllipsisVIcon
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 192 512"
-              width="1em"
-            >
-              <path
-                d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                transform=""
-              />
-            </svg>
-          </EllipsisVIcon>
-        </button>
-      </Toggle>
-    </Kebab>
-  </div>
-</Dropdown>
-`;
-
-exports[`dropdown basic 1`] = `
-<Dropdown
-  className=""
-  direction="down"
-  dropdownItems={Array []}
-  isGrouped={false}
-  isOpen={true}
-  isPlain={false}
-  onSelect={[Function]}
-  position="left"
-  toggle={
-    <DropdownToggle
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      Dropdown
-    </DropdownToggle>
-  }
->
-  <div
-    className="pf-c-dropdown pf-m-expanded"
+      />
+    }
   >
-    <DropdownToggle
-      ariaHasPopup={null}
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={true}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
+    <div
+      className="pf-c-dropdown"
     >
-      <Toggle
-        ariaHasPopup={null}
+      <Kebab
+        aria-label="Actions"
+        ariaHasPopup={true}
         className=""
         id="Dropdown Toggle"
         isActive={false}
         isDisabled={false}
         isFocused={false}
         isHovered={false}
-        isOpen={true}
+        isOpen={false}
         isPlain={false}
-        isSplitButton={false}
+        key=".0"
         onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
       >
-        <button
-          aria-expanded={true}
-          aria-haspopup={null}
-          className="pf-c-dropdown__toggle"
-          disabled={false}
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
           id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <span
-            className="pf-c-dropdown__toggle-text"
-          >
-            Dropdown
-          </span>
-          <CaretDownIcon
-            className="pf-c-dropdown__toggle-icon"
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              className="pf-c-dropdown__toggle-icon"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                transform=""
-              />
-            </svg>
-          </CaretDownIcon>
-        </button>
-      </Toggle>
-    </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown Toggle"
-      className=""
-      component="div"
-      isGrouped={false}
-      isOpen={true}
-      openedOnEnter={false}
-      position="left"
-    >
-      <ul
-        className="pf-c-dropdown__menu"
-        hidden={false}
-        onClick={[Function]}
-      >
-        <div
-          aria-labelledby="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
         >
-          <div
-            className="pf-c-dropdown__menu-item"
-            key=".0"
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
             onKeyDown={[Function]}
-            tabIndex={-1}
+            type="button"
           >
-            BASIC
-          </div>
-        </div>
-      </ul>
-    </DropdownMenu>
-  </div>
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
 
-exports[`dropdown dropup + right aligned 1`] = `
+exports[`KebabToggle right aligned 1`] = `
 <Dropdown
   className=""
-  direction="up"
+  direction="down"
   dropdownItems={
     Array [
       <DropdownItem
@@ -2038,106 +2453,418 @@ exports[`dropdown dropup + right aligned 1`] = `
   onSelect={[Function]}
   position="right"
   toggle={
-    <DropdownToggle
+    <Kebab
+      aria-label="Actions"
       className=""
-      iconComponent={[Function]}
       id="Dropdown Toggle"
       isActive={false}
+      isDisabled={false}
       isFocused={false}
       isHovered={false}
       isOpen={false}
       isPlain={false}
       onToggle={[Function]}
       parentRef={null}
-    >
-      Dropdown
-    </DropdownToggle>
+    />
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-top"
-  >
-    <DropdownToggle
-      ariaHasPopup={true}
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
-        ariaHasPopup={true}
-        className=""
-        id="Dropdown Toggle"
-        isActive={false}
-        isDisabled={false}
-        isFocused={false}
-        isHovered={false}
-        isOpen={false}
-        isPlain={false}
-        isSplitButton={false}
-        onEnter={[Function]}
-        onToggle={[Function]}
-        parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          className="pf-c-dropdown__toggle"
-          disabled={false}
-          id="Dropdown Toggle"
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
           onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          role={null}
         >
-          <span
-            className="pf-c-dropdown__toggle-text"
-          >
-            Dropdown
-          </span>
-          <CaretDownIcon
-            className="pf-c-dropdown__toggle-icon"
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              className="pf-c-dropdown__toggle-icon"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                transform=""
-              />
-            </svg>
-          </CaretDownIcon>
-        </button>
-      </Toggle>
-    </DropdownToggle>
-  </div>
-</Dropdown>
-`;
-
-exports[`dropdown dropup 1`] = `
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <Kebab
+        aria-label="Actions"
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
+  >
+    <div
+      className="pf-c-dropdown"
+    >
+      <Kebab
+        aria-label="Actions"
+        ariaHasPopup={true}
+        className=""
+        id="Dropdown Toggle"
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          aria-label="Actions"
+          ariaHasPopup={true}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Actions"
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <EllipsisVIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 192 512"
+                width="1em"
+              >
+                <path
+                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                  transform=""
+                />
+              </svg>
+            </EllipsisVIcon>
+          </button>
+        </Toggle>
+      </Kebab>
+    </div>
+  </DropdownWithContext>
+</Dropdown>
+`;
+
+exports[`dropdown basic 1`] = `
+<Dropdown
+  className=""
+  direction="down"
+  dropdownItems={Array []}
+  isGrouped={false}
+  isOpen={true}
+  isPlain={false}
+  onSelect={[Function]}
+  position="left"
+  toggle={
+    <DropdownToggle
+      className=""
+      iconComponent={[Function]}
+      id="Dropdown Toggle"
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentRef={null}
+    >
+      Dropdown
+    </DropdownToggle>
+  }
+>
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={Array []}
+    isGrouped={false}
+    isOpen={true}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        Dropdown
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-dropdown pf-m-expanded"
+    >
+      <DropdownToggle
+        ariaHasPopup={null}
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={true}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          ariaHasPopup={null}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={true}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={true}
+            aria-haspopup={null}
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className="pf-c-dropdown__toggle-text"
+            >
+              Dropdown
+            </span>
+            <CaretDownIcon
+              className="pf-c-dropdown__toggle-icon"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-c-dropdown__toggle-icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  transform=""
+                />
+              </svg>
+            </CaretDownIcon>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+      <DropdownMenu
+        aria-labelledby="Dropdown Toggle"
+        className=""
+        component="div"
+        isGrouped={false}
+        isOpen={true}
+        openedOnEnter={false}
+        position="left"
+      >
+        <ul
+          className="pf-c-dropdown__menu"
+          hidden={false}
+          onClick={[Function]}
+        >
+          <div
+            aria-labelledby="Dropdown Toggle"
+          >
+            <div
+              className="pf-c-dropdown__menu-item"
+              key=".0"
+              onKeyDown={[Function]}
+              tabIndex={-1}
+            >
+              BASIC
+            </div>
+          </div>
+        </ul>
+      </DropdownMenu>
+    </div>
+  </DropdownWithContext>
+</Dropdown>
+`;
+
+exports[`dropdown dropup + right aligned 1`] = `
 <Dropdown
   className=""
   direction="up"
@@ -2270,7 +2997,7 @@ exports[`dropdown dropup 1`] = `
   isOpen={false}
   isPlain={false}
   onSelect={[Function]}
-  position="left"
+  position="right"
   toggle={
     <DropdownToggle
       className=""
@@ -2288,90 +3015,1272 @@ exports[`dropdown dropup 1`] = `
     </DropdownToggle>
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-top"
-  >
-    <DropdownToggle
-      ariaHasPopup={true}
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
-        ariaHasPopup={true}
-        className=""
-        id="Dropdown Toggle"
-        isActive={false}
-        isDisabled={false}
-        isFocused={false}
-        isHovered={false}
-        isOpen={false}
-        isPlain={false}
-        isSplitButton={false}
-        onEnter={[Function]}
-        onToggle={[Function]}
-        parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          className="pf-c-dropdown__toggle"
-          disabled={false}
-          id="Dropdown Toggle"
+  <DropdownWithContext
+    className=""
+    direction="up"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
           onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          role={null}
         >
-          <span
-            className="pf-c-dropdown__toggle-text"
-          >
-            Dropdown
-          </span>
-          <CaretDownIcon
-            className="pf-c-dropdown__toggle-icon"
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              className="pf-c-dropdown__toggle-icon"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <DropdownToggle
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        Dropdown
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-dropdown pf-m-top"
+    >
+      <DropdownToggle
+        ariaHasPopup={true}
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          ariaHasPopup={true}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className="pf-c-dropdown__toggle-text"
+            >
+              Dropdown
+            </span>
+            <CaretDownIcon
+              className="pf-c-dropdown__toggle-icon"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-c-dropdown__toggle-icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  transform=""
+                />
+              </svg>
+            </CaretDownIcon>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
+</Dropdown>
+`;
+
+exports[`dropdown dropup 1`] = `
+<Dropdown
+  className=""
+  direction="up"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isGrouped={false}
+  isOpen={false}
+  isPlain={false}
+  onSelect={[Function]}
+  position="left"
+  toggle={
+    <DropdownToggle
+      className=""
+      iconComponent={[Function]}
+      id="Dropdown Toggle"
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentRef={null}
+    >
+      Dropdown
+    </DropdownToggle>
+  }
+>
+  <DropdownWithContext
+    className=""
+    direction="up"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        Dropdown
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-dropdown pf-m-top"
+    >
+      <DropdownToggle
+        ariaHasPopup={true}
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          ariaHasPopup={true}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className="pf-c-dropdown__toggle-text"
+            >
+              Dropdown
+            </span>
+            <CaretDownIcon
+              className="pf-c-dropdown__toggle-icon"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-c-dropdown__toggle-icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  transform=""
+                />
+              </svg>
+            </CaretDownIcon>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
+</Dropdown>
+`;
+
+exports[`dropdown expanded 1`] = `
+<Dropdown
+  className=""
+  direction="down"
+  dropdownItems={
+    Array [
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Action
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={true}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Disabled Action
+      </DropdownItem>,
+      <Separator
+        className=""
+        component="a"
+        href="#"
+        isDisabled={false}
+        isHovered={false}
+      />,
+      <DropdownItem
+        className=""
+        component="a"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Link
+      </DropdownItem>,
+      <DropdownItem
+        className=""
+        component="button"
+        context={
+          Object {
+            "keyHandler": [Function],
+            "sendRef": [Function],
+          }
+        }
+        href="#"
+        index={-1}
+        isAppLauncher={false}
+        isDisabled={false}
+        isHovered={false}
+        onClick={[Function]}
+        role={null}
+      >
+        Separated Action
+      </DropdownItem>,
+    ]
+  }
+  isGrouped={false}
+  isOpen={true}
+  isPlain={false}
+  onSelect={[Function]}
+  position="left"
+  toggle={
+    <DropdownToggle
+      className=""
+      iconComponent={[Function]}
+      id="Dropdown Toggle"
+      isActive={false}
+      isFocused={false}
+      isHovered={false}
+      isOpen={false}
+      isPlain={false}
+      onToggle={[Function]}
+      parentRef={null}
+    >
+      Dropdown
+    </DropdownToggle>
+  }
+>
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={true}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        Dropdown
+      </DropdownToggle>
+    }
+  >
+    <div
+      className="pf-c-dropdown pf-m-expanded"
+    >
+      <DropdownToggle
+        ariaHasPopup={true}
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={true}
+        isPlain={false}
+        key=".0"
+        onEnter={[Function]}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        <Toggle
+          ariaHasPopup={true}
+          className=""
+          id="Dropdown Toggle"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={true}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
+        >
+          <button
+            aria-expanded={true}
+            aria-haspopup={true}
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <span
+              className="pf-c-dropdown__toggle-text"
+            >
+              Dropdown
+            </span>
+            <CaretDownIcon
+              className="pf-c-dropdown__toggle-icon"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-c-dropdown__toggle-icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  transform=""
+                />
+              </svg>
+            </CaretDownIcon>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+      <DropdownMenu
+        aria-labelledby="Dropdown Toggle"
+        className=""
+        component="ul"
+        isGrouped={false}
+        isOpen={true}
+        openedOnEnter={false}
+        position="left"
+      >
+        <ul
+          aria-labelledby="Dropdown Toggle"
+          className="pf-c-dropdown__menu"
+          hidden={false}
+          role="menu"
+        >
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={0}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={false}
+                className="pf-c-dropdown__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+              >
+                Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={1}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-c-dropdown__menu-item"
+                disabled={false}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Action
+              </button>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={2}
+            isAppLauncher={false}
+            isDisabled={true}
+            isHovered={false}
+            key=".$disabled link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={true}
+                className="pf-m-disabled pf-c-dropdown__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                tabIndex={-1}
+              >
+                Disabled Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={3}
+            isAppLauncher={false}
+            isDisabled={true}
+            isHovered={false}
+            key=".$disabled action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <button
+                className="pf-m-disabled pf-c-dropdown__menu-item"
+                disabled={true}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Disabled Action
+              </button>
+            </li>
+          </DropdownItem>
+          <Separator
+            className=""
+            component="a"
+            href="#"
+            index={4}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separator"
+          >
+            <DropdownItem
+              className="pf-c-dropdown__separator"
+              component="div"
+              context={
+                Object {
+                  "keyHandler": [Function],
+                  "sendRef": [Function],
+                }
+              }
+              href="#"
+              index={4}
+              isAppLauncher={false}
+              isDisabled={false}
+              isHovered={false}
+              onClick={[Function]}
+              role="separator"
+            >
+              <li
+                role="none"
+              >
+                <div
+                  className="pf-c-dropdown__separator"
+                  href="#"
+                  onClick={[Function]}
+                  onKeyDown={[Function]}
+                  role="separator"
+                />
+              </li>
+            </DropdownItem>
+          </Separator>
+          <DropdownItem
+            className=""
+            component="a"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
+              }
+            }
+            href="#"
+            index={5}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separated link"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
+            >
+              <a
+                aria-disabled={false}
+                className="pf-c-dropdown__menu-item"
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+              >
+                Separated Link
+              </a>
+            </li>
+          </DropdownItem>
+          <DropdownItem
+            className=""
+            component="button"
+            context={
+              Object {
+                "keyHandler": [Function],
+                "sendRef": [Function],
               }
-              viewBox="0 0 320 512"
-              width="1em"
+            }
+            href="#"
+            index={6}
+            isAppLauncher={false}
+            isDisabled={false}
+            isHovered={false}
+            key=".$separated action"
+            onClick={[Function]}
+            role={null}
+          >
+            <li
+              role="none"
             >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                transform=""
-              />
-            </svg>
-          </CaretDownIcon>
-        </button>
-      </Toggle>
-    </DropdownToggle>
-  </div>
+              <button
+                className="pf-c-dropdown__menu-item"
+                disabled={false}
+                href="#"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role={null}
+                type="button"
+              >
+                Separated Action
+              </button>
+            </li>
+          </DropdownItem>
+        </ul>
+      </DropdownMenu>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
 
-exports[`dropdown expanded 1`] = `
+exports[`dropdown regular 1`] = `
 <Dropdown
   className=""
   direction="down"
@@ -2501,7 +4410,7 @@ exports[`dropdown expanded 1`] = `
     ]
   }
   isGrouped={false}
-  isOpen={true}
+  isOpen={false}
   isPlain={false}
   onSelect={[Function]}
   position="left"
@@ -2522,100 +4431,11 @@ exports[`dropdown expanded 1`] = `
     </DropdownToggle>
   }
 >
-  <div
-    className="pf-c-dropdown pf-m-expanded"
-  >
-    <DropdownToggle
-      ariaHasPopup={true}
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={true}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      <Toggle
-        ariaHasPopup={true}
-        className=""
-        id="Dropdown Toggle"
-        isActive={false}
-        isDisabled={false}
-        isFocused={false}
-        isHovered={false}
-        isOpen={true}
-        isPlain={false}
-        isSplitButton={false}
-        onEnter={[Function]}
-        onToggle={[Function]}
-        parentRef={null}
-        type={null}
-      >
-        <button
-          aria-expanded={true}
-          aria-haspopup={true}
-          className="pf-c-dropdown__toggle"
-          disabled={false}
-          id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
-        >
-          <span
-            className="pf-c-dropdown__toggle-text"
-          >
-            Dropdown
-          </span>
-          <CaretDownIcon
-            className="pf-c-dropdown__toggle-icon"
-            color="currentColor"
-            size="sm"
-            title={null}
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              className="pf-c-dropdown__toggle-icon"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                transform=""
-              />
-            </svg>
-          </CaretDownIcon>
-        </button>
-      </Toggle>
-    </DropdownToggle>
-    <DropdownMenu
-      aria-labelledby="Dropdown Toggle"
-      className=""
-      component="ul"
-      isGrouped={false}
-      isOpen={true}
-      openedOnEnter={false}
-      position="left"
-    >
-      <ul
-        aria-labelledby="Dropdown Toggle"
-        className="pf-c-dropdown__menu"
-        hidden={false}
-        role="menu"
-      >
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
         <DropdownItem
           className=""
           component="a"
@@ -2626,29 +4446,15 @@ exports[`dropdown expanded 1`] = `
             }
           }
           href="#"
-          index={0}
+          index={-1}
           isAppLauncher={false}
           isDisabled={false}
           isHovered={false}
-          key=".$link"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <a
-              aria-disabled={false}
-              className="pf-c-dropdown__menu-item"
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-            >
-              Link
-            </a>
-          </li>
-        </DropdownItem>
+          Link
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="button"
@@ -2659,30 +4465,15 @@ exports[`dropdown expanded 1`] = `
             }
           }
           href="#"
-          index={1}
+          index={-1}
           isAppLauncher={false}
           isDisabled={false}
           isHovered={false}
-          key=".$action"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <button
-              className="pf-c-dropdown__menu-item"
-              disabled={false}
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              type="button"
-            >
-              Action
-            </button>
-          </li>
-        </DropdownItem>
+          Action
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="a"
@@ -2693,30 +4484,15 @@ exports[`dropdown expanded 1`] = `
             }
           }
           href="#"
-          index={2}
+          index={-1}
           isAppLauncher={false}
           isDisabled={true}
           isHovered={false}
-          key=".$disabled link"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <a
-              aria-disabled={true}
-              className="pf-c-dropdown__menu-item pf-m-disabled"
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              tabIndex={-1}
-            >
-              Disabled Link
-            </a>
-          </li>
-        </DropdownItem>
+          Disabled Link
+        </DropdownItem>,
         <DropdownItem
           className=""
           component="button"
@@ -2727,373 +4503,166 @@ exports[`dropdown expanded 1`] = `
             }
           }
           href="#"
-          index={3}
+          index={-1}
           isAppLauncher={false}
           isDisabled={true}
           isHovered={false}
-          key=".$disabled action"
           onClick={[Function]}
           role={null}
         >
-          <li
-            role="none"
-          >
-            <button
-              className="pf-c-dropdown__menu-item pf-m-disabled"
-              disabled={true}
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              type="button"
-            >
-              Disabled Action
-            </button>
-          </li>
-        </DropdownItem>
+          Disabled Action
+        </DropdownItem>,
         <Separator
-          className=""
-          component="a"
-          href="#"
-          index={4}
-          isDisabled={false}
-          isHovered={false}
-          key=".$separator"
-        >
-          <DropdownItem
-            className="pf-c-dropdown__separator"
-            component="div"
-            context={
-              Object {
-                "keyHandler": [Function],
-                "sendRef": [Function],
-              }
-            }
-            href="#"
-            index={4}
-            isAppLauncher={false}
-            isDisabled={false}
-            isHovered={false}
-            onClick={[Function]}
-            role="separator"
-          >
-            <li
-              role="none"
-            >
-              <div
-                className="pf-c-dropdown__separator"
-                href="#"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                role="separator"
-              />
-            </li>
-          </DropdownItem>
-        </Separator>
-        <DropdownItem
-          className=""
-          component="a"
-          context={
-            Object {
-              "keyHandler": [Function],
-              "sendRef": [Function],
-            }
-          }
-          href="#"
-          index={5}
-          isAppLauncher={false}
-          isDisabled={false}
-          isHovered={false}
-          key=".$separated link"
-          onClick={[Function]}
-          role={null}
-        >
-          <li
-            role="none"
-          >
-            <a
-              aria-disabled={false}
-              className="pf-c-dropdown__menu-item"
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-            >
-              Separated Link
-            </a>
-          </li>
-        </DropdownItem>
-        <DropdownItem
-          className=""
-          component="button"
-          context={
-            Object {
-              "keyHandler": [Function],
-              "sendRef": [Function],
-            }
-          }
-          href="#"
-          index={6}
-          isAppLauncher={false}
-          isDisabled={false}
-          isHovered={false}
-          key=".$separated action"
-          onClick={[Function]}
-          role={null}
-        >
-          <li
-            role="none"
-          >
-            <button
-              className="pf-c-dropdown__menu-item"
-              disabled={false}
-              href="#"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              role={null}
-              type="button"
-            >
-              Separated Action
-            </button>
-          </li>
-        </DropdownItem>
-      </ul>
-    </DropdownMenu>
-  </div>
-</Dropdown>
-`;
-
-exports[`dropdown regular 1`] = `
-<Dropdown
-  className=""
-  direction="down"
-  dropdownItems={
-    Array [
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
-          }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Link
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="button"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
-          }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Action
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
-          }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={true}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="button"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
-          }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={true}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Disabled Action
-      </DropdownItem>,
-      <Separator
-        className=""
-        component="a"
-        href="#"
-        isDisabled={false}
-        isHovered={false}
-      />,
-      <DropdownItem
-        className=""
-        component="a"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
-        isHovered={false}
-        onClick={[Function]}
-        role={null}
-      >
-        Separated Link
-      </DropdownItem>,
-      <DropdownItem
-        className=""
-        component="button"
-        context={
-          Object {
-            "keyHandler": [Function],
-            "sendRef": [Function],
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
           }
-        }
-        href="#"
-        index={-1}
-        isAppLauncher={false}
-        isDisabled={false}
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="left"
+    toggle={
+      <DropdownToggle
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
         isHovered={false}
-        onClick={[Function]}
-        role={null}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
       >
-        Separated Action
-      </DropdownItem>,
-    ]
-  }
-  isGrouped={false}
-  isOpen={false}
-  isPlain={false}
-  onSelect={[Function]}
-  position="left"
-  toggle={
-    <DropdownToggle
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      onToggle={[Function]}
-      parentRef={null}
-    >
-      Dropdown
-    </DropdownToggle>
-  }
->
-  <div
-    className="pf-c-dropdown"
+        Dropdown
+      </DropdownToggle>
+    }
   >
-    <DropdownToggle
-      ariaHasPopup={true}
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
+    <div
+      className="pf-c-dropdown"
     >
-      <Toggle
+      <DropdownToggle
         ariaHasPopup={true}
         className=""
+        iconComponent={[Function]}
         id="Dropdown Toggle"
         isActive={false}
-        isDisabled={false}
         isFocused={false}
         isHovered={false}
         isOpen={false}
         isPlain={false}
-        isSplitButton={false}
+        key=".0"
         onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
       >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          className="pf-c-dropdown__toggle"
-          disabled={false}
+        <Toggle
+          ariaHasPopup={true}
+          className=""
           id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
         >
-          <span
-            className="pf-c-dropdown__toggle-text"
-          >
-            Dropdown
-          </span>
-          <CaretDownIcon
-            className="pf-c-dropdown__toggle-icon"
-            color="currentColor"
-            size="sm"
-            title={null}
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
           >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
+            <span
+              className="pf-c-dropdown__toggle-text"
+            >
+              Dropdown
+            </span>
+            <CaretDownIcon
               className="pf-c-dropdown__toggle-icon"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 320 512"
-              width="1em"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
             >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                transform=""
-              />
-            </svg>
-          </CaretDownIcon>
-        </button>
-      </Toggle>
-    </DropdownToggle>
-  </div>
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-c-dropdown__toggle-icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  transform=""
+                />
+              </svg>
+            </CaretDownIcon>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
 
@@ -3248,85 +4817,237 @@ exports[`dropdown right aligned 1`] = `
     </DropdownToggle>
   }
 >
-  <div
-    className="pf-c-dropdown"
+  <DropdownWithContext
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Action
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={true}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Disabled Action
+        </DropdownItem>,
+        <Separator
+          className=""
+          component="a"
+          href="#"
+          isDisabled={false}
+          isHovered={false}
+        />,
+        <DropdownItem
+          className=""
+          component="a"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Link
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          context={
+            Object {
+              "keyHandler": [Function],
+              "sendRef": [Function],
+            }
+          }
+          href="#"
+          index={-1}
+          isAppLauncher={false}
+          isDisabled={false}
+          isHovered={false}
+          onClick={[Function]}
+          role={null}
+        >
+          Separated Action
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={false}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <DropdownToggle
+        className=""
+        iconComponent={[Function]}
+        id="Dropdown Toggle"
+        isActive={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      >
+        Dropdown
+      </DropdownToggle>
+    }
   >
-    <DropdownToggle
-      ariaHasPopup={true}
-      className=""
-      iconComponent={[Function]}
-      id="Dropdown Toggle"
-      isActive={false}
-      isFocused={false}
-      isHovered={false}
-      isOpen={false}
-      isPlain={false}
-      key=".0"
-      onEnter={[Function]}
-      onToggle={[Function]}
-      parentRef={null}
+    <div
+      className="pf-c-dropdown"
     >
-      <Toggle
+      <DropdownToggle
         ariaHasPopup={true}
         className=""
+        iconComponent={[Function]}
         id="Dropdown Toggle"
         isActive={false}
-        isDisabled={false}
         isFocused={false}
         isHovered={false}
         isOpen={false}
         isPlain={false}
-        isSplitButton={false}
+        key=".0"
         onEnter={[Function]}
         onToggle={[Function]}
         parentRef={null}
-        type={null}
       >
-        <button
-          aria-expanded={false}
-          aria-haspopup={true}
-          className="pf-c-dropdown__toggle"
-          disabled={false}
+        <Toggle
+          ariaHasPopup={true}
+          className=""
           id="Dropdown Toggle"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          type="button"
+          isActive={false}
+          isDisabled={false}
+          isFocused={false}
+          isHovered={false}
+          isOpen={false}
+          isPlain={false}
+          isSplitButton={false}
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={null}
+          type={null}
         >
-          <span
-            className="pf-c-dropdown__toggle-text"
-          >
-            Dropdown
-          </span>
-          <CaretDownIcon
-            className="pf-c-dropdown__toggle-icon"
-            color="currentColor"
-            size="sm"
-            title={null}
+          <button
+            aria-expanded={false}
+            aria-haspopup={true}
+            className="pf-c-dropdown__toggle"
+            disabled={false}
+            id="Dropdown Toggle"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
           >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
+            <span
+              className="pf-c-dropdown__toggle-text"
+            >
+              Dropdown
+            </span>
+            <CaretDownIcon
               className="pf-c-dropdown__toggle-icon"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
-              }
-              viewBox="0 0 320 512"
-              width="1em"
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
             >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                transform=""
-              />
-            </svg>
-          </CaretDownIcon>
-        </button>
-      </Toggle>
-    </DropdownToggle>
-  </div>
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                className="pf-c-dropdown__toggle-icon"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 320 512"
+                width="1em"
+              >
+                <path
+                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  transform=""
+                />
+              </svg>
+            </CaretDownIcon>
+          </button>
+        </Toggle>
+      </DropdownToggle>
+    </div>
+  </DropdownWithContext>
 </Dropdown>
 `;
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
index cc2706ccf32..0e3a49fc0ca 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/DropdownToggle.test.js.snap
@@ -45,6 +45,7 @@ exports[`state active 1`] = `
       <CaretDownIcon
         className="pf-c-dropdown__toggle-icon"
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -119,6 +120,7 @@ exports[`state focus 1`] = `
       <CaretDownIcon
         className="pf-c-dropdown__toggle-icon"
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -193,6 +195,7 @@ exports[`state hover 1`] = `
       <CaretDownIcon
         className="pf-c-dropdown__toggle-icon"
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Toggle.test.js.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Toggle.test.js.snap
index 0e70cdbbd6d..39c8e7c2659 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Toggle.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Toggle.test.js.snap
@@ -45,6 +45,7 @@ exports[`Dropdown toggle 1`] = `
       <CaretDownIcon
         className="pf-c-dropdown__toggle-icon"
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -116,6 +117,7 @@ exports[`Kebab toggle 1`] = `
     >
       <EllipsisVIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts
index a5b28878890..ff0c263f17f 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.d.ts
@@ -1,9 +1,24 @@
-export const DropdownPosition: {
-  right: 'right';
-  left: 'left';
-};
-
-export const DropdownDirection: {
-  up: 'up';
-  down: 'down';
-};
+import * as React from 'react';
+
+export enum DropdownPosition {
+  right = 'right',
+  left = 'left'
+}
+
+export enum DropdownDirection {
+  up = 'up',
+  down = 'down'
+}
+
+export const DropdownContext: React.Context<{
+  onSelect: (event: any) => void,
+  menuClass?: string,
+  itemClass?: string,
+  toggleClass?: string,
+  baseClass?: string
+}>
+
+export const DropdownArrowContext: React.Context<{
+  keyHandler: (index: number, position: any, custom: boolean) => void,
+  sendRef: (index: number, node: any, isDisabled: boolean) => void
+}>
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.js b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.js
index a8e4765e6b4..8caae02a2ee 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/dropdownConstants.js
@@ -11,7 +11,11 @@ export const DropdownDirection = {
 };
 
 export const DropdownContext = React.createContext({
-  onSelect: () => {}
+  onSelect: () => {},
+  menuClass: '',
+  itemClass: '',
+  toggleClass: '',
+  baseClass: ''
 });
 
 export const DropdownArrowContext = React.createContext({
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts b/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts
index 7523f36b927..3cb22403a0e 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/index.d.ts
@@ -1,6 +1,5 @@
 export { default as Dropdown, DropdownProps } from './Dropdown';
-
-export { DropdownDirection, DropdownPosition } from './dropdownConstants';
+export { DropdownDirection, DropdownPosition, DropdownContext } from './dropdownConstants';
 export { default as DropdownItem, ItemProps } from './Item';
 export { default as DropdownSeparator, SeparatorProps } from './Separator';
 export { default as KebabToggle, KebabProps } from './KebabToggle';
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/index.js b/packages/patternfly-4/react-core/src/components/Dropdown/index.js
index cd3b6a5272d..10facabab0f 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/index.js
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/index.js
@@ -1,5 +1,5 @@
 export { default as Dropdown } from './Dropdown';
-export { DropdownDirection, DropdownPosition } from './dropdownConstants';
+export { DropdownDirection, DropdownPosition, DropdownContext } from './dropdownConstants';
 export { default as DropdownGroup } from './DropdownGroup';
 export { default as DropdownItem } from './Item';
 export { default as DropdownSeparator } from './Separator';
diff --git a/packages/patternfly-4/react-core/src/components/Expandable/__snapshots__/Expandable.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Expandable/__snapshots__/Expandable.test.tsx.snap
index b0affdc881a..88a87ebbb0a 100644
--- a/packages/patternfly-4/react-core/src/components/Expandable/__snapshots__/Expandable.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Expandable/__snapshots__/Expandable.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`Expandable 1`] = `
       aria-hidden={true}
       className="pf-c-expandable__toggle-icon"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
@@ -40,6 +41,7 @@ exports[`Renders Expandable expanded 1`] = `
       aria-hidden={true}
       className="pf-c-expandable__toggle-icon"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx
index 7dc850ca518..6ec4235b588 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx
@@ -11,6 +11,8 @@ export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIEle
   target?: string;
   /** Additional classes added to the Footer Link Item  */
   className?: string;
+  /** Component used to render the Footer Link Item */
+  linkComponent?: React.ReactNode;
 }
 
 export const LoginMainFooterLinksItem: React.FunctionComponent<LoginMainFooterLinksItemProps> = ({
@@ -18,11 +20,16 @@ export const LoginMainFooterLinksItem: React.FunctionComponent<LoginMainFooterLi
   href = '',
   target = '',
   className = '',
+  linkComponent = 'a',
   ...props
-}: LoginMainFooterLinksItemProps) => (
-  <li className={css(styles.loginMainFooterLinksItem, className)} {...props}>
-    <a className={css(styles.loginMainFooterLinksItemLink)} href={href} target={target}>
-      {children}
-    </a>
-  </li>
-);
+}: LoginMainFooterLinksItemProps) => {
+  const LinkComponent = linkComponent as any;
+
+  return (
+    <li className={css(styles.loginMainFooterLinksItem, className)} {...props}>
+      <LinkComponent className={css(styles.loginMainFooterLinksItemLink)} href={href} target={target}>
+        {children}
+      </LinkComponent>
+    </li>
+  );
+}
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx
index 32f61a280e4..c8a3de99645 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx
+++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx
@@ -8,7 +8,7 @@ const FocusTrap: any = require('focus-trap-react');
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
 
-import Backdrop from '../Backdrop/Backdrop';
+import { Backdrop } from '../Backdrop/Backdrop';
 import { ModalBoxBody } from './ModalBoxBody';
 import { ModalBoxHeader } from './ModalBoxHeader';
 import { ModalBoxCloseButton } from './ModalBoxCloseButton';
diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap
index 9d90add6d9f..017023e98f8 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`ModalBoxCloseButton Test 1`] = `
   >
     <TimesIcon
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     />
diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap
index 6c5194b15f3..415e4c3f592 100644
--- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Modal Content Test isOpen 1`] = `
-<Backdrop
-  className=""
->
+<Component>
   <FocusTrap
     _createFocusTrap={[Function]}
     active={true}
@@ -41,13 +39,11 @@ exports[`Modal Content Test isOpen 1`] = `
       </Component>
     </Component>
   </FocusTrap>
-</Backdrop>
+</Component>
 `;
 
 exports[`Modal Content Test only body 1`] = `
-<Backdrop
-  className=""
->
+<Component>
   <FocusTrap
     _createFocusTrap={[Function]}
     active={true}
@@ -85,13 +81,11 @@ exports[`Modal Content Test only body 1`] = `
       </Component>
     </Component>
   </FocusTrap>
-</Backdrop>
+</Component>
 `;
 
 exports[`Modal Content Test with footer 1`] = `
-<Backdrop
-  className=""
->
+<Component>
   <FocusTrap
     _createFocusTrap={[Function]}
     active={true}
@@ -134,13 +128,11 @@ exports[`Modal Content Test with footer 1`] = `
       </Component>
     </Component>
   </FocusTrap>
-</Backdrop>
+</Component>
 `;
 
 exports[`Modal Content Test with onclose 1`] = `
-<Backdrop
-  className=""
->
+<Component>
   <FocusTrap
     _createFocusTrap={[Function]}
     active={true}
@@ -183,13 +175,11 @@ exports[`Modal Content Test with onclose 1`] = `
       </Component>
     </Component>
   </FocusTrap>
-</Backdrop>
+</Component>
 `;
 
 exports[`Modal Content test without footer 1`] = `
-<Backdrop
-  className=""
->
+<Component>
   <FocusTrap
     _createFocusTrap={[Function]}
     active={true}
@@ -227,5 +217,5 @@ exports[`Modal Content test without footer 1`] = `
       </Component>
     </Component>
   </FocusTrap>
-</Backdrop>
+</Component>
 `;
diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavItem.tsx b/packages/patternfly-4/react-core/src/components/Nav/NavItem.tsx
index 7bdc61eaef1..73ff2f8b2c4 100644
--- a/packages/patternfly-4/react-core/src/components/Nav/NavItem.tsx
+++ b/packages/patternfly-4/react-core/src/components/Nav/NavItem.tsx
@@ -20,35 +20,39 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>,
   /** If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself. */
   preventDefault?: boolean;
   /** Callback for item click */
-  onClick?: NavSelectClickHandler
+  onClick?: NavSelectClickHandler;
+  /** Component used to render NavItems */
+  component?: React.ReactNode;
 }
 
 export const NavItem: React.FunctionComponent<NavItemProps> = ({
-   children = null as React.ReactNode,
-   className = '',
-   to = '',
-   isActive = false,
-   groupId = null as string,
-   itemId = null as string,
-   preventDefault = false,
-   onClick = null as NavSelectClickHandler,
+  children = null as React.ReactNode,
+  className = '',
+  to = '',
+  isActive = false,
+  groupId = null as string,
+  itemId = null as string,
+  preventDefault = false,
+  onClick = null as NavSelectClickHandler,
+  component = 'a',
   ...props
 }: NavItemProps) => {
+  const Component = component as any;
 
-  const renderDefaultLink = ():React.ReactNode => {
+  const renderDefaultLink = (): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;
     return (
       <NavContext.Consumer>
         {(context: any) => (
-          <a
+          <Component
             href={to}
-            onClick={e => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
+            onClick={(e: any) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
             className={css(styles.navLink, isActive && styles.modifiers.current, className)}
             aria-current={isActive ? 'page' : null}
             {...props}
           >
             {children}
-          </a>
+          </Component>
         )}
       </NavContext.Consumer>
     );
diff --git a/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.tsx.snap
index f808c431627..e4ad4bdd820 100644
--- a/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -241,6 +241,7 @@ exports[`Expandable Nav List - Trigger toggle 1`] = `
                 <AngleRightIcon
                   aria-hidden="true"
                   color="currentColor"
+                  noVerticalAlign={false}
                   size="sm"
                   title={null}
                 >
@@ -401,6 +402,7 @@ exports[`Expandable Nav List 1`] = `
                 <AngleRightIcon
                   aria-hidden="true"
                   color="currentColor"
+                  noVerticalAlign={false}
                   size="sm"
                   title={null}
                 >
@@ -561,6 +563,7 @@ exports[`Expandable Nav List with aria label 1`] = `
                 <AngleRightIcon
                   aria-hidden="true"
                   color="currentColor"
+                  noVerticalAlign={false}
                   size="sm"
                   title={null}
                 >
@@ -702,6 +705,7 @@ exports[`Horizontal Nav List 1`] = `
       >
         <AngleLeftIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -805,6 +809,7 @@ exports[`Horizontal Nav List 1`] = `
       >
         <AngleRightIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1071,6 +1076,7 @@ exports[`Nav List with custom item nodes 1`] = `
       >
         <AngleLeftIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1122,6 +1128,7 @@ exports[`Nav List with custom item nodes 1`] = `
       >
         <AngleRightIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1269,6 +1276,7 @@ exports[`Tertiary Nav List 1`] = `
       >
         <AngleLeftIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1372,6 +1380,7 @@ exports[`Tertiary Nav List 1`] = `
       >
         <AngleRightIcon
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap b/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
index 7f9b62a884a..a6094ee1339 100644
--- a/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
@@ -64,6 +64,7 @@ exports[`optionsMenu expanded 1`] = `
           aria-hidden={true}
           className="pf-c-options-menu__toggle-icon"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -122,6 +123,7 @@ exports[`optionsMenu expanded 1`] = `
                   >
                     <CheckIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -169,6 +171,7 @@ exports[`optionsMenu expanded 1`] = `
                   >
                     <CheckIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -217,6 +220,7 @@ exports[`optionsMenu expanded 1`] = `
                   >
                     <CheckIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -264,6 +268,7 @@ exports[`optionsMenu expanded 1`] = `
                   >
                     <CheckIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -330,6 +335,7 @@ exports[`optionsMenu expanded 1`] = `
                   >
                     <CheckIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -377,6 +383,7 @@ exports[`optionsMenu expanded 1`] = `
                   >
                     <CheckIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -476,6 +483,7 @@ exports[`optionsMenu open up 1`] = `
           aria-hidden={true}
           className="pf-c-options-menu__toggle-icon"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -567,6 +575,7 @@ exports[`optionsMenu plain 1`] = `
           aria-hidden={true}
           className="pf-c-options-menu__toggle-icon"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -660,6 +669,7 @@ exports[`optionsMenu regular 1`] = `
           aria-hidden={true}
           className="pf-c-options-menu__toggle-icon"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -755,6 +765,7 @@ exports[`optionsMenu right aligned + open up 1`] = `
           aria-hidden={true}
           className="pf-c-options-menu__toggle-icon"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -849,6 +860,7 @@ exports[`optionsMenu right aligned 1`] = `
           aria-hidden={true}
           className="pf-c-options-menu__toggle-icon"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
diff --git a/packages/patternfly-4/react-core/src/components/Page/PageHeader.d.ts b/packages/patternfly-4/react-core/src/components/Page/PageHeader.d.ts
index 30b1c442d42..9b9bcb492aa 100644
--- a/packages/patternfly-4/react-core/src/components/Page/PageHeader.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Page/PageHeader.d.ts
@@ -7,6 +7,7 @@ export interface PageHeaderProps extends HTMLProps<HTMLDivElement> {
   toolbar?: ReactNode;
   avatar?: ReactNode;
   topNav?: ReactNode;
+  logoComponent?: ReactNode;
   showNavToggle?: boolean;
   isNavOpen?: boolean;
   onNavToggle?: Function;
diff --git a/packages/patternfly-4/react-core/src/components/Page/PageHeader.js b/packages/patternfly-4/react-core/src/components/Page/PageHeader.js
index 4e357d28c7a..a70224ccba8 100644
--- a/packages/patternfly-4/react-core/src/components/Page/PageHeader.js
+++ b/packages/patternfly-4/react-core/src/components/Page/PageHeader.js
@@ -13,6 +13,8 @@ const propTypes = {
   logo: PropTypes.node,
   /** Additional props passed to the logo anchor container */
   logoProps: PropTypes.object,
+  /** Component to use to wrap the passed <logo> */
+  logoComponent: PropTypes.node,
   /** Component to render the toolbar (e.g. <Toolbar />) */
   toolbar: PropTypes.node,
   /** Component to render the avatar (e.g. <Avatar /> */
@@ -35,6 +37,7 @@ const defaultProps = {
   className: '',
   logo: null,
   logoProps: null,
+  logoComponent: 'a',
   toolbar: null,
   avatar: null,
   topNav: null,
@@ -48,6 +51,7 @@ const PageHeader = ({
   className,
   logo,
   logoProps,
+  logoComponent: LogoComponent,
   toolbar,
   avatar,
   topNav,
@@ -81,9 +85,9 @@ const PageHeader = ({
                 </div>
               )}
               {logo && (
-                <a className={css(styles.pageHeaderBrandLink)} {...logoProps}>
+                <LogoComponent className={css(styles.pageHeaderBrandLink)} {...logoProps}>
                   {logo}
-                </a>
+                </LogoComponent>
               )}
             </div>
           )}
diff --git a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.js.snap b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.js.snap
index e7020aaad2e..3aec120b09c 100644
--- a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/Page.test.js.snap
@@ -12,6 +12,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       nav="Navigation"
       onNavToggle={[Function]}
@@ -45,6 +46,7 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       nav="Navigation"
       onNavToggle={[Function]}
@@ -157,6 +159,7 @@ exports[`Check page to verify breadcrumb is created 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       nav="Navigation"
       onNavToggle={[Function]}
@@ -190,6 +193,7 @@ exports[`Check page to verify breadcrumb is created 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       nav="Navigation"
       onNavToggle={[Function]}
@@ -329,6 +333,7 @@ exports[`Check page to verify skip to content is created 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       nav="Navigation"
       onNavToggle={[Function]}
@@ -384,6 +389,7 @@ exports[`Check page to verify skip to content is created 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       nav="Navigation"
       onNavToggle={[Function]}
@@ -452,6 +458,7 @@ exports[`Check page to verify skip to content is created 1`] = `
                   >
                     <AngleRightIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -496,6 +503,7 @@ exports[`Check page to verify skip to content is created 1`] = `
                   >
                     <AngleRightIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -540,6 +548,7 @@ exports[`Check page to verify skip to content is created 1`] = `
                   >
                     <AngleRightIcon
                       color="currentColor"
+                      noVerticalAlign={false}
                       size="sm"
                       title={null}
                     >
@@ -655,6 +664,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       onNavToggle={[Function]}
       showNavToggle={false}
@@ -685,6 +695,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
       className=""
       isNavOpen={true}
       logo="Logo"
+      logoComponent="a"
       logoProps={null}
       onNavToggle={[Function]}
       showNavToggle={false}
diff --git a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/PageHeader.test.js.snap b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/PageHeader.test.js.snap
index 628d72e87aa..4022e02972d 100644
--- a/packages/patternfly-4/react-core/src/components/Page/__snapshots__/PageHeader.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Page/__snapshots__/PageHeader.test.js.snap
@@ -7,6 +7,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
   className=""
   isNavOpen={true}
   logo="Logo"
+  logoComponent="a"
   logoProps={null}
   onNavToggle={[Function]}
   showNavToggle={false}
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js
index de9b1479614..797b2799f0b 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js
@@ -1,43 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CaretDownIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
 import { css, getModifier } from '@patternfly/react-styles';
+
 import { fillTemplate } from '../../helpers';
+import { DropdownToggle } from '../Dropdown';
+
+function OptionsToggle(props) {
+  const {
+    itemsTitle,
+    optionsToggle,
+    firstIndex,
+    lastIndex,
+    itemCount,
+    widgetId,
+    onToggle,
+    isOpen,
+    showToggle,
+    parentRef,
+    toggleTemplate: ToggleTemplate
+  } = props;
 
-const OptionsToggle = ({
-  itemsTitle,
-  optionsToggle,
-  firstIndex,
-  lastIndex,
-  itemCount,
-  widgetId,
-  onToggle,
-  isOpen,
-  toggleTemplate: ToggleTemplate
-}) => (
-  <div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))}>
-    <span className={css(styles.optionsMenuToggleText)}>
-      {typeof ToggleTemplate === 'string' ? (
-        fillTemplate(ToggleTemplate, { firstIndex, lastIndex, itemCount, itemsTitle })
-      ) : (
-        <ToggleTemplate firstIndex={firstIndex} lastIndex={lastIndex} itemCount={itemCount} itemsTitle={itemsTitle} />
+  return (
+    <div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))}>
+      <span className={css(styles.optionsMenuToggleText)}>
+        {typeof ToggleTemplate === 'string' ? (
+          fillTemplate(ToggleTemplate, { firstIndex, lastIndex, itemCount, itemsTitle })
+        ) : (
+          <ToggleTemplate firstIndex={firstIndex} lastIndex={lastIndex} itemCount={itemCount} itemsTitle={itemsTitle} />
+        )}
+      </span>
+      {showToggle && (
+        <DropdownToggle
+          aria-label={optionsToggle}
+          onToggle={onToggle}
+          isOpen={isOpen}
+          id={`${widgetId}-toggle`}
+          isSplitButton
+          className={styles.optionsMenuToggleButton}
+          parentRef={parentRef}
+        />
       )}
-    </span>
-    <button
-      className={css(styles.optionsMenuToggleButton)}
-      id={`${widgetId}-toggle`}
-      aria-haspopup="listbox"
-      aria-labelledby={`${widgetId}-toggle ${widgetId}-label`}
-      aria-label={optionsToggle}
-      aria-expanded={isOpen}
-      onClick={() => onToggle(!isOpen)}
-      type="button"
-    >
-      <CaretDownIcon />
-    </button>
-  </div>
-);
+    </div>
+  );
+}
 
 OptionsToggle.propTypes = {
   itemsTitle: PropTypes.string,
@@ -48,6 +54,8 @@ OptionsToggle.propTypes = {
   widgetId: PropTypes.string,
   onToggle: PropTypes.func,
   isOpen: PropTypes.bool,
+  parentRef: PropTypes.any,
+  showToggle: PropTypes.bool,
   toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
 };
 
@@ -60,7 +68,8 @@ OptionsToggle.defaultProps = {
   widgetId: '',
   onToggle: () => undefined,
   isOpen: false,
+  parentRef: null,
+  showToggle: true,
   toggleTemplate: ''
 };
-
 export default OptionsToggle;
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js
index a316c2a0839..bf8f7fae9f8 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js
@@ -28,6 +28,11 @@ describe('component render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('empty per page options', () => {
+    const wrapper = mount(<Pagination itemCount={40} perPageOptions={[]} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('no items', () => {
     const wrapper = mount(<Pagination itemCount={0} />);
     expect(wrapper).toMatchSnapshot();
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
index 3e3e6928b83..1a9572d942d 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
+++ b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
@@ -112,7 +112,13 @@ class PaginationOptionsMenu extends Component {
       ...props
     } = this.props;
     return (
-      <div className={css(styles.optionsMenu, className)} {...props}>
+      <div
+        className={css(styles.optionsMenu, className)}
+        {...props}
+        ref={ref => {
+          this.parentRef = ref;
+        }}
+      >
         <span id={`${widgetId}-label`} hidden>
           {itemsPerPageTitle}:
         </span>
@@ -123,6 +129,7 @@ class PaginationOptionsMenu extends Component {
           toggle={
             <OptionsToggle
               optionsToggle={optionsToggle}
+              showToggle={perPageOptions && perPageOptions.length > 0}
               itemsTitle={itemsTitle}
               onToggle={this.onToggle}
               isOpen={this.state.isOpen}
@@ -130,6 +137,7 @@ class PaginationOptionsMenu extends Component {
               lastIndex={lastIndex}
               itemCount={itemCount}
               widgetId={widgetId}
+              parentRef={this.parentRef}
               toggleTemplate={toggleTemplate}
             />
           }
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
index a30f459bf9a..622cb37aa61 100644
--- a/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Pagination/__snapshots__/Pagination.test.js.snap
@@ -133,6 +133,7 @@ exports[`component render custom pagination toggle 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -202,77 +203,219 @@ exports[`component render custom pagination toggle 1`] = `
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate="\${firstIndex} - \${lastIndex} - \${itemCount} - \${itemsTitle}"
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={40}
+                itemsTitle="items"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate="\${firstIndex} - \${lastIndex} - \${itemCount} - \${itemsTitle}"
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-8"
-              isOpen={false}
-              isPlain={true}
-              itemCount={40}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={10}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate="\${firstIndex} - \${lastIndex} - \${itemCount} - \${itemsTitle}"
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-9"
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate="\${firstIndex} - \${lastIndex} - \${itemCount} - \${itemsTitle}"
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  1 - 10 - 40 - items
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    1 - 10 - 40 - items
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
+                  >
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -317,6 +460,7 @@ exports[`component render custom pagination toggle 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -361,6 +505,7 @@ exports[`component render custom pagination toggle 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -426,6 +571,7 @@ exports[`component render custom pagination toggle 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -470,6 +616,7 @@ exports[`component render custom pagination toggle 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -622,95 +769,179 @@ exports[`component render custom perPageOptions 1`] = `
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-1"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  some
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={40}
+                itemsTitle="items"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-4"
-              isOpen={false}
-              isPlain={true}
-              itemCount={40}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={10}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-4"
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={1}
-                    itemCount={40}
-                    itemsTitle="items"
-                    lastIndex={10}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      1
-                       - 
-                      10
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      40
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={40}
+                      itemsTitle="items"
+                      lastIndex={10}
+                    >
+                      <strong>
+                        1
+                         - 
+                        10
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        40
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -755,6 +986,7 @@ exports[`component render custom perPageOptions 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -799,6 +1031,7 @@ exports[`component render custom perPageOptions 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -864,6 +1097,7 @@ exports[`component render custom perPageOptions 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -908,6 +1142,7 @@ exports[`component render custom perPageOptions 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1072,6 +1307,7 @@ exports[`component render custom start end 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -1134,102 +1370,647 @@ exports[`component render custom start end 1`] = `
           position="left"
           toggle={
             <OptionsToggle
-              firstIndex={5}
+              firstIndex={5}
+              isOpen={false}
+              itemCount={40}
+              itemsTitle="items"
+              lastIndex={15}
+              onToggle={[Function]}
+              optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
+              toggleTemplate={[Function]}
+              widgetId="pagination-options-menu"
+            />
+          }
+        >
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={5}
+                isOpen={false}
+                itemCount={40}
+                itemsTitle="items"
+                lastIndex={15}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
+          >
+            <div
+              className="pf-c-dropdown"
+            >
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={5}
+                id="pf-toggle-id-7"
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={15}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              >
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+                >
+                  <span
+                    className="pf-c-options-menu__toggle-text"
+                  >
+                    <ToggleTemplate
+                      firstIndex={5}
+                      itemCount={40}
+                      itemsTitle="items"
+                      lastIndex={15}
+                    >
+                      <strong>
+                        5
+                         - 
+                        15
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        40
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
+                  >
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
+                    >
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
+        </Dropdown>
+      </div>
+    </PaginationOptionsMenu>
+    <Navigation
+      className=""
+      currPage="Current page"
+      lastPage={4}
+      onFirstClick={[Function]}
+      onLastClick={[Function]}
+      onNextClick={[Function]}
+      onPageInput={[Function]}
+      onPreviousClick={[Function]}
+      onSetPage={[Function]}
+      page={1}
+      pagesTitle="pages"
+      paginationTitle="Pagination"
+      toFirstPage="Go to first page"
+      toLastPage="Go to last page"
+      toNextPage="Go to next page"
+      toPreviousPage="Go to previous page"
+    >
+      <nav
+        aria-label="Pagination"
+        className="pf-c-pagination__nav"
+      >
+        <Component
+          aria-label="Go to first page"
+          data-action="first"
+          isDisabled={true}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to first page"
+            className="pf-c-button pf-m-plain pf-m-disabled"
+            data-action="first"
+            disabled={true}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleDoubleLeftIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                  transform=""
+                />
+              </svg>
+            </AngleDoubleLeftIcon>
+          </button>
+        </Component>
+        <Component
+          aria-label="Go to previous page"
+          data-action="previous"
+          isDisabled={true}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to previous page"
+            className="pf-c-button pf-m-plain pf-m-disabled"
+            data-action="previous"
+            disabled={true}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleLeftIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                  transform=""
+                />
+              </svg>
+            </AngleLeftIcon>
+          </button>
+        </Component>
+        <div
+          className="pf-c-pagination__nav-page-select"
+        >
+          <input
+            aria-label="Current page"
+            className="pf-c-form-control"
+            max={4}
+            min="1"
+            onChange={[Function]}
+            type="number"
+            value={1}
+          />
+          <span
+            aria-hidden="true"
+          >
+            of 
+            4
+             
+            pages
+          </span>
+        </div>
+        <Component
+          aria-label="Go to next page"
+          data-action="next"
+          isDisabled={false}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to next page"
+            className="pf-c-button pf-m-plain"
+            data-action="next"
+            disabled={false}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleRightIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  transform=""
+                />
+              </svg>
+            </AngleRightIcon>
+          </button>
+        </Component>
+        <Component
+          aria-label="Go to last page"
+          data-action="last"
+          isDisabled={false}
+          onClick={[Function]}
+          variant="plain"
+        >
+          <button
+            aria-disabled={null}
+            aria-label="Go to last page"
+            className="pf-c-button pf-m-plain"
+            data-action="last"
+            disabled={false}
+            onClick={[Function]}
+            tabIndex={null}
+            type="button"
+          >
+            <AngleDoubleRightIcon
+              color="currentColor"
+              noVerticalAlign={false}
+              size="sm"
+              title={null}
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                  transform=""
+                />
+              </svg>
+            </AngleDoubleRightIcon>
+          </button>
+        </Component>
+      </nav>
+    </Navigation>
+  </div>
+</Pagination>
+`;
+
+exports[`component render empty per page options 1`] = `
+<Pagination
+  className=""
+  dropDirection="down"
+  itemCount={40}
+  itemsEnd={null}
+  itemsStart={null}
+  onFirstClick={[Function]}
+  onLastClick={[Function]}
+  onNextClick={[Function]}
+  onPageInput={[Function]}
+  onPerPageSelect={[Function]}
+  onPreviousClick={[Function]}
+  onSetPage={[Function]}
+  page={1}
+  perPage={10}
+  perPageOptions={Array []}
+  titles={
+    Object {
+      "currPage": "Current page",
+      "items": "items",
+      "itemsPerPage": "Items per page",
+      "optionsToggle": "Select",
+      "pages": "pages",
+      "paginationTitle": "Pagination",
+      "perPageSuffix": "per page",
+      "toFirstPage": "Go to first page",
+      "toLastPage": "Go to last page",
+      "toNextPage": "Go to next page",
+      "toPreviousPage": "Go to previous page",
+    }
+  }
+  toggleTemplate={[Function]}
+  variant="top"
+  widgetId="pagination-options-menu"
+>
+  <div
+    className="pf-c-pagination"
+  >
+    <div
+      className="pf-c-pagination__total-items"
+    >
+      40 items
+    </div>
+    <PaginationOptionsMenu
+      className=""
+      dropDirection="down"
+      firstIndex={1}
+      itemCount={40}
+      itemsPerPageTitle="Items per page"
+      itemsTitle="items"
+      lastIndex={10}
+      onPerPageSelect={[Function]}
+      optionsToggle="Select"
+      perPage={10}
+      perPageOptions={Array []}
+      perPageSuffix="per page"
+      toggleTemplate={[Function]}
+      widgetId="pagination-options-menu"
+    >
+      <div
+        className="pf-c-options-menu"
+      >
+        <span
+          hidden={true}
+          id="pagination-options-menu-label"
+        >
+          Items per page
+          :
+        </span>
+        <Dropdown
+          className=""
+          direction="down"
+          dropdownItems={Array []}
+          isGrouped={false}
+          isOpen={false}
+          isPlain={true}
+          onSelect={[Function]}
+          position="left"
+          toggle={
+            <OptionsToggle
+              firstIndex={1}
               isOpen={false}
               itemCount={40}
               itemsTitle="items"
-              lastIndex={15}
+              lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={false}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={Array []}
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={40}
+                itemsTitle="items"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={false}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={5}
-              id="pf-toggle-id-6"
-              isOpen={false}
-              isPlain={true}
-              itemCount={40}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={15}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={null}
+                firstIndex={1}
+                id="pf-toggle-id-5"
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={false}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={5}
-                    itemCount={40}
-                    itemsTitle="items"
-                    lastIndex={15}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      5
-                       - 
-                      15
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      40
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
-                  >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={40}
+                      itemsTitle="items"
+                      lastIndex={10}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <strong>
+                        1
+                         - 
+                        10
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        40
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -1274,6 +2055,7 @@ exports[`component render custom start end 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1318,6 +2100,7 @@ exports[`component render custom start end 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1383,6 +2166,7 @@ exports[`component render custom start end 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1427,6 +2211,7 @@ exports[`component render custom start end 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1591,6 +2376,7 @@ exports[`component render last page 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -1660,95 +2446,237 @@ exports[`component render last page 1`] = `
               lastIndex={20}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={11}
+                isOpen={false}
+                itemCount={20}
+                itemsTitle="items"
+                lastIndex={20}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={11}
-              id="pf-toggle-id-3"
-              isOpen={false}
-              isPlain={true}
-              itemCount={20}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={20}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={11}
+                id="pf-toggle-id-3"
+                isOpen={false}
+                isPlain={true}
+                itemCount={20}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={20}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={11}
-                    itemCount={20}
-                    itemsTitle="items"
-                    lastIndex={20}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      11
-                       - 
-                      20
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      20
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={11}
+                      itemCount={20}
+                      itemsTitle="items"
+                      lastIndex={20}
+                    >
+                      <strong>
+                        11
+                         - 
+                        20
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        20
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -1793,6 +2721,7 @@ exports[`component render last page 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1837,6 +2766,7 @@ exports[`component render last page 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1902,6 +2832,7 @@ exports[`component render last page 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -1946,6 +2877,7 @@ exports[`component render last page 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2126,6 +3058,7 @@ exports[`component render limited number of pages 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -2179,95 +3112,237 @@ exports[`component render limited number of pages 1`] = `
               lastIndex={20}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={20}
+                itemsTitle="items"
+                lastIndex={20}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-2"
-              isOpen={false}
-              isPlain={true}
-              itemCount={20}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={20}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-2"
+                isOpen={false}
+                isPlain={true}
+                itemCount={20}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={20}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={1}
-                    itemCount={20}
-                    itemsTitle="items"
-                    lastIndex={20}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      1
-                       - 
-                      20
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      20
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={20}
+                      itemsTitle="items"
+                      lastIndex={20}
+                    >
+                      <strong>
+                        1
+                         - 
+                        20
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        20
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -2312,6 +3387,7 @@ exports[`component render limited number of pages 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2356,6 +3432,7 @@ exports[`component render limited number of pages 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2421,6 +3498,7 @@ exports[`component render limited number of pages 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2465,6 +3543,7 @@ exports[`component render limited number of pages 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2629,6 +3708,7 @@ exports[`component render no items 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -2698,95 +3778,237 @@ exports[`component render no items 1`] = `
               lastIndex={0}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={0}
+                isOpen={false}
+                itemCount={0}
+                itemsTitle="items"
+                lastIndex={0}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={0}
-              id="pf-toggle-id-5"
-              isOpen={false}
-              isPlain={true}
-              itemCount={0}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={0}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={0}
+                id="pf-toggle-id-6"
+                isOpen={false}
+                isPlain={true}
+                itemCount={0}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={0}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={0}
-                    itemCount={0}
-                    itemsTitle="items"
-                    lastIndex={0}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      0
-                       - 
-                      0
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      0
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={0}
+                      itemCount={0}
+                      itemsTitle="items"
+                      lastIndex={0}
+                    >
+                      <strong>
+                        0
+                         - 
+                        0
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        0
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -2831,6 +4053,7 @@ exports[`component render no items 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2875,6 +4098,7 @@ exports[`component render no items 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2940,6 +4164,7 @@ exports[`component render no items 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -2984,6 +4209,7 @@ exports[`component render no items 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3143,6 +4369,7 @@ exports[`component render should render correctly bottom 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -3212,95 +4439,237 @@ exports[`component render should render correctly bottom 1`] = `
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={20}
+                itemsTitle="items"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-1"
-              isOpen={false}
-              isPlain={true}
-              itemCount={20}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={10}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-1"
+                isOpen={false}
+                isPlain={true}
+                itemCount={20}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={1}
-                    itemCount={20}
-                    itemsTitle="items"
-                    lastIndex={10}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      1
-                       - 
-                      10
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      20
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={20}
+                      itemsTitle="items"
+                      lastIndex={10}
+                    >
+                      <strong>
+                        1
+                         - 
+                        10
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        20
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -3345,6 +4714,7 @@ exports[`component render should render correctly bottom 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3389,6 +4759,7 @@ exports[`component render should render correctly bottom 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3454,6 +4825,7 @@ exports[`component render should render correctly bottom 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3498,6 +4870,7 @@ exports[`component render should render correctly bottom 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3662,6 +5035,7 @@ exports[`component render should render correctly top 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -3731,95 +5105,237 @@ exports[`component render should render correctly top 1`] = `
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={20}
+                itemsTitle="items"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-0"
-              isOpen={false}
-              isPlain={true}
-              itemCount={20}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={10}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-0"
+                isOpen={false}
+                isPlain={true}
+                itemCount={20}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={1}
-                    itemCount={20}
-                    itemsTitle="items"
-                    lastIndex={10}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      1
-                       - 
-                      10
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      20
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={20}
+                      itemsTitle="items"
+                      lastIndex={10}
+                    >
+                      <strong>
+                        1
+                         - 
+                        10
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        20
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -3864,6 +5380,7 @@ exports[`component render should render correctly top 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3908,6 +5425,7 @@ exports[`component render should render correctly top 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -3973,6 +5491,7 @@ exports[`component render should render correctly top 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4017,6 +5536,7 @@ exports[`component render should render correctly top 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4172,6 +5692,7 @@ exports[`component render titles 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -4241,95 +5762,237 @@ exports[`component render titles 1`] = `
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown"
+          <DropdownWithContext
+            className=""
+            direction="down"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={40}
+                itemsTitle="values"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-7"
-              isOpen={false}
-              isPlain={true}
-              itemCount={40}
-              itemsTitle="values"
-              key=".0"
-              lastIndex={10}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-8"
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="values"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={1}
-                    itemCount={40}
-                    itemsTitle="values"
-                    lastIndex={10}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      1
-                       - 
-                      10
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      40
-                    </strong>
-                     
-                    values
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={40}
+                      itemsTitle="values"
+                      lastIndex={10}
+                    >
+                      <strong>
+                        1
+                         - 
+                        10
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        40
+                      </strong>
+                       
+                      values
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -4374,6 +6037,7 @@ exports[`component render titles 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4418,6 +6082,7 @@ exports[`component render titles 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4483,6 +6148,7 @@ exports[`component render titles 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4527,6 +6193,7 @@ exports[`component render titles 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4691,6 +6358,7 @@ exports[`component render up drop direction 1`] = `
                 >
                   <CheckIcon
                     color="currentColor"
+                    noVerticalAlign={false}
                     size="sm"
                     title={null}
                   />
@@ -4760,95 +6428,237 @@ exports[`component render up drop direction 1`] = `
               lastIndex={10}
               onToggle={[Function]}
               optionsToggle="Select"
+              parentRef={null}
+              showToggle={true}
               toggleTemplate={[Function]}
               widgetId="pagination-options-menu"
             />
           }
         >
-          <div
-            className="pf-c-dropdown pf-m-top"
+          <DropdownWithContext
+            className=""
+            direction="up"
+            dropdownItems={
+              Array [
+                <Item
+                  className="pf-c-options-menu__menu-item pf-m-selected"
+                  component="button"
+                  data-action="per-page-10"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  10
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                  <i
+                    className="pf-c-options-menu__menu-item-icon"
+                  >
+                    <CheckIcon
+                      color="currentColor"
+                      noVerticalAlign={false}
+                      size="sm"
+                      title={null}
+                    />
+                  </i>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-20"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  20
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-50"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  50
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+                <Item
+                  className="pf-c-options-menu__menu-item"
+                  component="button"
+                  data-action="per-page-100"
+                  href="#"
+                  isDisabled={false}
+                  isHovered={false}
+                  onClick={[Function]}
+                >
+                  100
+                  <span
+                    className="pf-c-pagination__menu-text"
+                  >
+                     per page
+                  </span>
+                </Item>,
+              ]
+            }
+            isGrouped={false}
+            isOpen={false}
+            isPlain={true}
+            onSelect={[Function]}
+            position="left"
+            toggle={
+              <OptionsToggle
+                firstIndex={1}
+                isOpen={false}
+                itemCount={40}
+                itemsTitle="items"
+                lastIndex={10}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
+              />
+            }
           >
-            <OptionsToggle
-              ariaHasPopup={true}
-              firstIndex={1}
-              id="pf-toggle-id-9"
-              isOpen={false}
-              isPlain={true}
-              itemCount={40}
-              itemsTitle="items"
-              key=".0"
-              lastIndex={10}
-              onEnter={[Function]}
-              onToggle={[Function]}
-              optionsToggle="Select"
-              toggleTemplate={[Function]}
-              widgetId="pagination-options-menu"
+            <div
+              className="pf-c-dropdown pf-m-top"
             >
-              <div
-                className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
+              <OptionsToggle
+                ariaHasPopup={true}
+                firstIndex={1}
+                id="pf-toggle-id-10"
+                isOpen={false}
+                isPlain={true}
+                itemCount={40}
+                itemsTitle="items"
+                key=".0"
+                lastIndex={10}
+                onEnter={[Function]}
+                onToggle={[Function]}
+                optionsToggle="Select"
+                parentRef={null}
+                showToggle={true}
+                toggleTemplate={[Function]}
+                widgetId="pagination-options-menu"
               >
-                <span
-                  className="pf-c-options-menu__toggle-text"
+                <div
+                  className="pf-c-options-menu__toggle pf-m-plain pf-m-text"
                 >
-                  <ToggleTemplate
-                    firstIndex={1}
-                    itemCount={40}
-                    itemsTitle="items"
-                    lastIndex={10}
+                  <span
+                    className="pf-c-options-menu__toggle-text"
                   >
-                    <strong>
-                      1
-                       - 
-                      10
-                    </strong>
-                     
-                    of 
-                    <strong>
-                      40
-                    </strong>
-                     
-                    items
-                  </ToggleTemplate>
-                </span>
-                <button
-                  aria-expanded={false}
-                  aria-haspopup="listbox"
-                  aria-label="Select"
-                  aria-labelledby="pagination-options-menu-toggle pagination-options-menu-label"
-                  className="pf-c-options-menu__toggle-button"
-                  id="pagination-options-menu-toggle"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <CaretDownIcon
-                    color="currentColor"
-                    size="sm"
-                    title={null}
+                    <ToggleTemplate
+                      firstIndex={1}
+                      itemCount={40}
+                      itemsTitle="items"
+                      lastIndex={10}
+                    >
+                      <strong>
+                        1
+                         - 
+                        10
+                      </strong>
+                       
+                      of 
+                      <strong>
+                        40
+                      </strong>
+                       
+                      items
+                    </ToggleTemplate>
+                  </span>
+                  <DropdownToggle
+                    aria-label="Select"
+                    className="pf-c-options-menu__toggle-button"
+                    iconComponent={[Function]}
+                    id="pagination-options-menu-toggle"
+                    isActive={false}
+                    isFocused={false}
+                    isHovered={false}
+                    isOpen={false}
+                    isPlain={false}
+                    isSplitButton={true}
+                    onToggle={[Function]}
+                    parentRef={null}
                   >
-                    <svg
-                      aria-hidden={true}
-                      aria-labelledby={null}
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style={
-                        Object {
-                          "verticalAlign": "-0.125em",
-                        }
-                      }
-                      viewBox="0 0 320 512"
-                      width="1em"
+                    <Toggle
+                      aria-label="Select"
+                      className="pf-c-options-menu__toggle-button"
+                      id="pagination-options-menu-toggle"
+                      isActive={false}
+                      isDisabled={false}
+                      isFocused={false}
+                      isHovered={false}
+                      isOpen={false}
+                      isPlain={false}
+                      isSplitButton={true}
+                      onEnter={[Function]}
+                      onToggle={[Function]}
+                      parentRef={null}
+                      type={null}
                     >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </CaretDownIcon>
-                </button>
-              </div>
-            </OptionsToggle>
-          </div>
+                      <button
+                        aria-expanded={false}
+                        aria-label="Select"
+                        className="pf-c-dropdown__toggle-button pf-c-options-menu__toggle-button"
+                        disabled={false}
+                        id="pagination-options-menu-toggle"
+                        onClick={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <CaretDownIcon
+                          className=""
+                          color="currentColor"
+                          noVerticalAlign={false}
+                          size="sm"
+                          title={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-labelledby={null}
+                            className=""
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style={
+                              Object {
+                                "verticalAlign": "-0.125em",
+                              }
+                            }
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              transform=""
+                            />
+                          </svg>
+                        </CaretDownIcon>
+                      </button>
+                    </Toggle>
+                  </DropdownToggle>
+                </div>
+              </OptionsToggle>
+            </div>
+          </DropdownWithContext>
         </Dropdown>
       </div>
     </PaginationOptionsMenu>
@@ -4893,6 +6703,7 @@ exports[`component render up drop direction 1`] = `
           >
             <AngleDoubleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -4937,6 +6748,7 @@ exports[`component render up drop direction 1`] = `
           >
             <AngleLeftIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -5002,6 +6814,7 @@ exports[`component render up drop direction 1`] = `
           >
             <AngleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
@@ -5046,6 +6859,7 @@ exports[`component render up drop direction 1`] = `
           >
             <AngleDoubleRightIcon
               color="currentColor"
+              noVerticalAlign={false}
               size="sm"
               title={null}
             >
diff --git a/packages/patternfly-4/react-core/src/components/Popover/Popover.md b/packages/patternfly-4/react-core/src/components/Popover/Popover.md
index 6c74a996e3c..8c6d7a904cf 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/Popover.md
+++ b/packages/patternfly-4/react-core/src/components/Popover/Popover.md
@@ -116,7 +116,7 @@ class AdvancedPopover extends React.Component {
 ## Popover (headless)
 ```js
 import React from 'react';
-import { Popover, PopoverPosition, Checkbox, Button } from '@patternfly/react-core';
+import { Popover, PopoverPosition, Button } from '@patternfly/react-core';
 
 HeadlessPopover = () => (
   <Popover
@@ -132,3 +132,23 @@ HeadlessPopover = () => (
   </Popover>
 );
 ```
+
+## Popover with Link
+```js
+import React from 'react';
+import { Popover, PopoverPosition, Button } from '@patternfly/react-core';
+
+HeadlessPopover = () => (
+  <Popover
+    position={PopoverPosition.right}
+    bodyContent={
+      <div><a href="https://www.patternfly.org/" target="_blank">PatternFly</a> is a community project that promotes design commonality and improved user experience. Its offerings include open source code, patterns, style guides, and an active community that helps support it all.</div>
+    }
+    aria-label="Popover with Link"
+    closeBtnAriaLabel="Close Popover with Link"
+    footerContent="Popover Footer"
+  >
+    <Button>Toggle Popover</Button>
+  </Popover>
+);
+```
diff --git a/packages/patternfly-4/react-core/src/components/Popover/Popover.tsx b/packages/patternfly-4/react-core/src/components/Popover/Popover.tsx
index 94855ca5316..a10adef89a0 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/Popover.tsx
+++ b/packages/patternfly-4/react-core/src/components/Popover/Popover.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Tippy from '@tippy.js/react';
-import { Instance as TippyInstance, BasicPlacement } from 'tippy.js';
+import { Instance as TippyInstance } from 'tippy.js';
 import { KEY_CODES } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { css, getModifier } from '@patternfly/react-styles';
diff --git a/packages/patternfly-4/react-core/src/components/Popover/PopoverCloseButton.tsx b/packages/patternfly-4/react-core/src/components/Popover/PopoverCloseButton.tsx
index 981f0b37165..33b02df2a5a 100644
--- a/packages/patternfly-4/react-core/src/components/Popover/PopoverCloseButton.tsx
+++ b/packages/patternfly-4/react-core/src/components/Popover/PopoverCloseButton.tsx
@@ -2,18 +2,18 @@ import * as React from 'react';
 import { Button } from '../Button';
 import { TimesIcon } from '@patternfly/react-icons';
 
-export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps> = ({ 
-  onClose = () => undefined, 
-  ...props 
+export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps> = ({
+  onClose = () => undefined as void,
+  ...props
   }) => (
-  <Button onClick={onClose} variant="plain" aria-label {...props}>
+  <Button onClick={onClose} variant="plain" aria-label {...props} style={{pointerEvents: 'auto'}}>
     <TimesIcon />
   </Button>
 );
 
 export interface PopoverCloseButtonProps {
   /** PopoverCloseButton onClose function */
-  onClose?(): void;
+  onClose?: () => void;
   /** Aria label for the Close button */
   'aria-label': string;
 }
diff --git a/packages/patternfly-4/react-core/src/components/Progress/__snapshots__/Progress.test.js.snap b/packages/patternfly-4/react-core/src/components/Progress/__snapshots__/Progress.test.js.snap
index 5a443664318..90812a1bca3 100644
--- a/packages/patternfly-4/react-core/src/components/Progress/__snapshots__/Progress.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Progress/__snapshots__/Progress.test.js.snap
@@ -735,6 +735,7 @@ exports[`Progress variant danger 1`] = `
         >
           <TimesCircleIcon
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -938,6 +939,7 @@ exports[`Progress variant success 1`] = `
         >
           <CheckCircleIcon
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
diff --git a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap
index 268709ac2f2..c2871d830b6 100644
--- a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.js.snap
@@ -65,6 +65,7 @@ exports[`checkbox select renders checkbox select groups successfully 1`] = `
         <CaretDownIcon
           className="pf-c-select__toggle-arrow"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -482,6 +483,7 @@ exports[`checkbox select renders closed successfully 1`] = `
         <CaretDownIcon
           className="pf-c-select__toggle-arrow"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -577,6 +579,7 @@ exports[`checkbox select renders expanded successfully 1`] = `
         <CaretDownIcon
           className="pf-c-select__toggle-arrow"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -836,6 +839,7 @@ exports[`select single select renders closed successfully 1`] = `
         <CaretDownIcon
           className="pf-c-select__toggle-arrow"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -933,6 +937,7 @@ exports[`select single select renders expanded successfully 1`] = `
         <CaretDownIcon
           className="pf-c-select__toggle-arrow"
           color="currentColor"
+          noVerticalAlign={false}
           size="sm"
           title={null}
         >
@@ -1178,6 +1183,7 @@ exports[`typeahead multi select renders closed successfully 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -1287,6 +1293,7 @@ exports[`typeahead multi select renders expanded successfully 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -1581,6 +1588,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                             <TimesCircleIcon
                               aria-hidden="true"
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -1677,6 +1685,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
           <TimesCircleIcon
             aria-hidden={true}
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -1713,6 +1722,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -2074,6 +2084,7 @@ exports[`typeahead multi select test onChange 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -2230,6 +2241,7 @@ exports[`typeahead select renders closed successfully 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -2339,6 +2351,7 @@ exports[`typeahead select renders expanded successfully 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -2581,6 +2594,7 @@ exports[`typeahead select renders selected successfully 1`] = `
           <TimesCircleIcon
             aria-hidden={true}
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -2617,6 +2631,7 @@ exports[`typeahead select renders selected successfully 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -2948,6 +2963,7 @@ exports[`typeahead select test onChange 1`] = `
           <CaretDownIcon
             className="pf-c-select__toggle-arrow"
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
diff --git a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap
index 2cc430e71e2..f0ff77514b0 100644
--- a/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Select/__snapshots__/SelectToggle.test.js.snap
@@ -33,6 +33,7 @@ exports[`state active 1`] = `
     <CaretDownIcon
       className="pf-c-select__toggle-arrow"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
@@ -94,6 +95,7 @@ exports[`state focus 1`] = `
     <CaretDownIcon
       className="pf-c-select__toggle-arrow"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
@@ -155,6 +157,7 @@ exports[`state hover 1`] = `
     <CaretDownIcon
       className="pf-c-select__toggle-arrow"
       color="currentColor"
+      noVerticalAlign={false}
       size="sm"
       title={null}
     >
diff --git a/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.js.snap b/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.js.snap
index f08ae0270c4..8e384327bba 100644
--- a/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.js.snap
@@ -26,6 +26,7 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -198,6 +199,7 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -387,6 +389,7 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -559,6 +562,7 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -748,6 +752,7 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -920,6 +925,7 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       >
@@ -1098,6 +1104,7 @@ exports[`should render accessible tabs 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1163,6 +1170,7 @@ exports[`should render accessible tabs 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1231,6 +1239,7 @@ exports[`should render filled tabs 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1293,6 +1302,7 @@ exports[`should render filled tabs 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1358,6 +1368,7 @@ exports[`should render secondary tabs 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1420,6 +1431,7 @@ exports[`should render secondary tabs 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1517,6 +1529,7 @@ exports[`should render simple tabs 1`] = `
     >
       <AngleLeftIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
@@ -1579,6 +1592,7 @@ exports[`should render simple tabs 1`] = `
     >
       <AngleRightIcon
         color="currentColor"
+        noVerticalAlign={false}
         size="sm"
         title={null}
       />
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts
deleted file mode 100644
index 7ae80fe116c..00000000000
--- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FormEvent, FunctionComponent, HTMLProps } from 'react';
-import { Omit } from '../../helpers/typeUtils';
-
-export interface TextAreaProps extends Omit<HTMLProps<HTMLInputElement>, 'onChange'> {
-  isRequired?: boolean;
-  isValid?: boolean;
-  onChange?(value: string, event: FormEvent<HTMLInputElement>): void;
-}
-
-declare const TextArea: FunctionComponent<TextAreaProps>;
-
-export default TextArea;
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js
deleted file mode 100644
index af778cde576..00000000000
--- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  /** Additional classes added to the TextArea. */
-  className: PropTypes.string,
-  /** Flag to show if the TextArea is required. */
-  isRequired: PropTypes.bool,
-  /** Flag to show if the TextArea is valid or invalid. */
-  isValid: PropTypes.bool,
-  /** Value of the TextArea. */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** A callback for when the TextArea value changes. */
-  onChange: PropTypes.func,
-  /** Custom flag to show that the TextArea requires an associated id or aria-label. */
-  'aria-label': props => {
-    if (!props.id && !props['aria-label']) {
-      return new Error('TextArea requires either an id or aria-label to be specified');
-    }
-    return null;
-  },
-  /** Additional props are spread to the container <textarea> */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-const defaultProps = {
-  className: '',
-  isRequired: false,
-  isValid: true,
-  value: null,
-  onChange: () => undefined,
-  'aria-label': null
-};
-
-class TextArea extends React.Component {
-  handleChange = event => {
-    this.props.onChange(event.currentTarget.value, event);
-  };
-
-  render() {
-    const { className, value, onChange, isValid, isRequired, ...props } = this.props;
-    return (
-      <textarea
-        {...props}
-        className={css(styles.formControl, className)}
-        onChange={this.handleChange}
-        value={value}
-        aria-invalid={!isValid}
-        required={isRequired}
-      />
-    );
-  }
-}
-
-TextArea.propTypes = propTypes;
-TextArea.defaultProps = defaultProps;
-
-export default TextArea;
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.md b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.md
index 0935bb180b7..efc46126677 100644
--- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.md
+++ b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.md
@@ -2,8 +2,10 @@
 title: 'Text area'
 cssPrefix: 'pf-c-form-control'
 propComponents: ['TextArea']
+typescript: true
 ---
 
+
 import { TextArea } from '@patternfly/react-core';
 
 ## Simple text area
@@ -18,7 +20,7 @@ class SimpleTextArea extends React.Component {
       value: ''
     };
 
-    this.handleInvalidTextAreaChange = value => {
+    this.handleTextAreaChange = value => {
       this.setState({ value });
     };
   }
@@ -42,7 +44,8 @@ class InvalidTextArea extends React.Component {
     this.state = {
       value: ''
     };
-    this.handleTextAreaChange = value => {
+    
+    this.handleInvalidTextAreaChange = value => {
       this.setState({ value });
     };
   }
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.test.js b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.test.js
index 40a42cf77fb..a3692613239 100644
--- a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.test.js
+++ b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import TextArea from './TextArea';
+import { TextArea } from './TextArea';
 
 const props = {
   onChange: jest.fn(),
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/TextArea.tsx b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.tsx
new file mode 100644
index 00000000000..d9f773f1df2
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextArea/TextArea.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
+import { css } from '@patternfly/react-styles';
+import { Omit } from '../../helpers/typeUtils';
+
+export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onChange'> {
+  /** Additional classes added to the TextArea. */
+  className?: string;
+  /** Flag to show if the TextArea is required. */
+  isRequired?: boolean;
+  /** Flag to show if the TextArea is valid or invalid. */
+  isValid?: boolean;
+  /** Value of the TextArea. */
+  value?: string | number;
+  /** A callback for when the TextArea value changes. */
+  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  /** Custom flag to show that the TextArea requires an associated id or aria-label. */
+  'aria-label'?: string;
+}
+
+
+export class TextArea extends React.Component<TextAreaProps> {
+
+  static defaultProps = {
+    className: '',
+    isRequired: false,
+    isValid: true,
+    'aria-label': null as string
+  }
+  
+
+  constructor(props: TextAreaProps) {
+    super(props);
+    if (!props.id && !props['aria-label']) {
+      // tslint:disable-next-line:no-console
+      console.error('TextArea: TextArea requires either an id or aria-label to be specified');
+    }
+  }
+
+  private handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (this.props.onChange ) {
+      this.props.onChange(event.currentTarget.value, event);
+    }
+  }
+
+  render() {
+    const { className, value, onChange, isValid, isRequired, ...props } = this.props;
+    return (
+      <textarea
+        className={css(styles.formControl, className)}
+        onChange={this.handleChange}
+        value={value}
+        aria-invalid={!isValid}
+        required={isRequired}
+        {...props}
+      />
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap b/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap
index ade1b190455..b718c933ee2 100644
--- a/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/TextArea/__snapshots__/TextArea.test.js.snap
@@ -6,7 +6,7 @@ exports[`invalid text input 1`] = `
   aria-label="invalid textarea"
   className="pf-c-form-control"
   onChange={[Function]}
-  required={false}
+  required={true}
   value="test textarea"
 />
 `;
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/index.d.ts b/packages/patternfly-4/react-core/src/components/TextArea/index.d.ts
deleted file mode 100644
index a295bac41ca..00000000000
--- a/packages/patternfly-4/react-core/src/components/TextArea/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TextArea, TextAreaProps } from './TextArea';
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/index.js b/packages/patternfly-4/react-core/src/components/TextArea/index.js
deleted file mode 100644
index a8b97019ab6..00000000000
--- a/packages/patternfly-4/react-core/src/components/TextArea/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TextArea } from './TextArea';
diff --git a/packages/patternfly-4/react-core/src/components/TextArea/index.ts b/packages/patternfly-4/react-core/src/components/TextArea/index.ts
new file mode 100644
index 00000000000..4853311ce1d
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextArea/index.ts
@@ -0,0 +1 @@
+export * from './TextArea';
diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/styles.tsx b/packages/patternfly-4/react-core/src/components/Tooltip/styles.tsx
index a57301db96f..b48bc5278f2 100644
--- a/packages/patternfly-4/react-core/src/components/Tooltip/styles.tsx
+++ b/packages/patternfly-4/react-core/src/components/Tooltip/styles.tsx
@@ -10,7 +10,7 @@ export const tippyStyles = () => {
   // export const overrides = StyleSheet.parse(
   injectGlobal(`
   .pf-tippy-theme {
-    &.tippy-tooltip { 
+    &.tippy-tooltip {
       background-color: unset;
       font-size: unset;
       color: unset;
@@ -19,9 +19,6 @@ export const tippyStyles = () => {
       text-align: unset;
       padding: unset;
       cursor: text;
-      .tippy-content {
-        pointer-events: none;
-      }
     }
     .pf-c-tooltip, .pf-c-popover {
       max-width: unset;
@@ -33,42 +30,42 @@ export const tippyStyles = () => {
   .tippy-popper[x-placement^=top] .pf-c-tooltip__arrow {
     bottom: 0;
     left: 50%;
-    transform: var(--pf-c-tooltip__arrow--m-top--Transform); 
+    transform: var(--pf-c-tooltip__arrow--m-top--Transform);
   }
   .tippy-popper[x-placement^=bottom] .pf-c-tooltip__arrow {
     top: 0;
     left: 50%;
-    transform: var(--pf-c-tooltip__arrow--m-bottom--Transform); 
+    transform: var(--pf-c-tooltip__arrow--m-bottom--Transform);
   }
   .tippy-popper[x-placement^=left] .pf-c-tooltip__arrow {
     top: 50%;
     right: 0;
-    transform: var(--pf-c-tooltip__arrow--m-left--Transform); 
+    transform: var(--pf-c-tooltip__arrow--m-left--Transform);
   }
   .tippy-popper[x-placement^=right] .pf-c-tooltip__arrow {
     top: 50%;
     left: 0;
-    transform: var(--pf-c-tooltip__arrow--m-right--Transform); 
+    transform: var(--pf-c-tooltip__arrow--m-right--Transform);
   }
   .tippy-popper[x-placement^=top] .pf-c-popover__arrow {
     bottom: 0;
     left: 50%;
-    transform: var(--pf-c-popover__arrow--m-top--Transform); 
+    transform: var(--pf-c-popover__arrow--m-top--Transform);
   }
   .tippy-popper[x-placement^=bottom] .pf-c-popover__arrow {
     top: 0;
     left: 50%;
-    transform: var(--pf-c-popover__arrow--m-bottom--Transform); 
+    transform: var(--pf-c-popover__arrow--m-bottom--Transform);
   }
   .tippy-popper[x-placement^=left] .pf-c-popover__arrow {
     top: 50%;
     right: 0;
-    transform: var(--pf-c-popover__arrow--m-left--Transform); 
+    transform: var(--pf-c-popover__arrow--m-left--Transform);
   }
   .tippy-popper[x-placement^=right] .pf-c-popover__arrow {
     top: 50%;
     left: 0;
-    transform: var(--pf-c-popover__arrow--m-right--Transform); 
-  }  
+    transform: var(--pf-c-popover__arrow--m-right--Transform);
+  }
 `);
 };
diff --git a/packages/patternfly-4/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/patternfly-4/react-core/src/components/Wizard/WizardNavItem.tsx
index c01d296b092..afbda7a6f01 100644
--- a/packages/patternfly-4/react-core/src/components/Wizard/WizardNavItem.tsx
+++ b/packages/patternfly-4/react-core/src/components/Wizard/WizardNavItem.tsx
@@ -11,10 +11,12 @@ export interface WizardNavItemProps {
   isCurrent?: boolean;
   /** Whether the nav item is disabled */
   isDisabled?: boolean;
-  /** Callback for when the nav item is clicked */
-  onNavItemClick?(step: number): any;
   /** The step passed into the onNavItemClick callback */
   step: number;
+  /** Callback for when the nav item is clicked */
+  onNavItemClick?: (step: number) => any;
+  /** Component used to render WizardNavItem */
+  navItemComponent?: React.ReactNode;
 }
 
 export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
@@ -23,17 +25,22 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   isCurrent = false,
   isDisabled = false,
   step,
-  onNavItemClick = () => undefined
-}: WizardNavItemProps) => (
+  onNavItemClick = () => undefined,
+  navItemComponent = 'a'
+}: WizardNavItemProps) => {
+  const NavItemComponent = navItemComponent as any;
+
+  return (
     <li className={css(styles.wizardNavItem)}>
-      <a
+      <NavItemComponent
         aria-current={isCurrent && !children ? 'page' : false}
         onClick={() => onNavItemClick(step)}
         className={css(styles.wizardNavLink, isCurrent && 'pf-m-current', isDisabled && 'pf-m-disabled')}
         aria-disabled={isDisabled ? true : false}
         tabIndex={isDisabled ? -1 : undefined}>
         {text}
-      </a>
+      </NavItemComponent>
       {children}
     </li>
   );
+}
diff --git a/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap
index 6f2e477daec..1100830e93f 100644
--- a/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Wizard/__snapshots__/Wizard.test.tsx.snap
@@ -15,9 +15,7 @@ exports[`Wizard should match snapshot 1`] = `
       paused={false}
       tag="div"
     >
-      <Backdrop
-        className=""
-      >
+      <Unknown>
         <Bullseye
           className=""
           component="div"
@@ -138,7 +136,7 @@ exports[`Wizard should match snapshot 1`] = `
             </div>
           </Context.Provider>
         </Bullseye>
-      </Backdrop>
+      </Unknown>
     </FocusTrap>,
     "containerInfo": <div>
       <div>
diff --git a/packages/patternfly-4/react-core/src/declarations.d.ts b/packages/patternfly-4/react-core/src/declarations.d.ts
index e61b3629dfa..3d6c5b31f17 100644
--- a/packages/patternfly-4/react-core/src/declarations.d.ts
+++ b/packages/patternfly-4/react-core/src/declarations.d.ts
@@ -3,4 +3,5 @@ declare module 'victory-core' {
   export const Data: any;
   export const Helpers: any;
   export const Path: any;
+  export const TextSize: any;
 }
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/examples/Grid.md b/packages/patternfly-4/react-core/src/layouts/Grid/examples/Grid.md
index 5d8c1b4e4c1..db410f46f5a 100644
--- a/packages/patternfly-4/react-core/src/layouts/Grid/examples/Grid.md
+++ b/packages/patternfly-4/react-core/src/layouts/Grid/examples/Grid.md
@@ -8,13 +8,11 @@ propComponents: ['Grid', 'GridItem']
 ## Simple grid
 
 import { Grid, GridItem, Button } from '@patternfly/react-core';
-import ItemControl from './ItemControl';
 import './grid.scss';
 
 ```js
 import React from 'react';
 import { Grid, GridItem, Button } from '@patternfly/react-core';
-import ItemControl from './ItemControl';
 
 <Grid>
   <GridItem span={8}>span = 8</GridItem>
@@ -40,7 +38,6 @@ import ItemControl from './ItemControl';
 ```js
 import React from 'react';
 import { Grid, GridItem, Button } from '@patternfly/react-core';
-import ItemControl from './ItemControl';
 
 <Grid gutter="md">
   <GridItem span={8}>span = 8</GridItem>
@@ -86,8 +83,3 @@ import ItemControl from './ItemControl';
 </Grid>
 ```
 
-## Grid playground
-
-import GridPlayground from './GridPlayground';
-
-<GridPlayground />
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js b/packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js
deleted file mode 100644
index b7800901c25..00000000000
--- a/packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Grid, GridItem, Button } from '@patternfly/react-core';
-import ItemControl from './ItemControl';
-
-export default class GridPlayground extends React.Component {
-  constructor(props) {
-    super(props);
-    this.currentId = 1;
-    this.state = {
-      gridItems: [this.createGridItem(), this.createGridItem(), this.createGridItem(), this.createGridItem()]
-    };
-    this.handleAddGridItem = () => {
-      this.setState(({ gridItems }) => ({
-        gridItems: [...gridItems, this.createGridItem()]
-      }));
-    };
-    this.handleGridItemUpdate = (id, updates) => {
-      const index = this.state.gridItems.findIndex(i => i.id === id);
-      const updatedItem = {
-        ...this.state.gridItems[index],
-        ...updates
-      };
-      this.setState({
-        gridItems: [...this.state.gridItems.slice(0, index), updatedItem, ...this.state.gridItems.slice(index + 1)]
-      });
-    };
-  }
-
-  createGridItem() {
-    return {
-      id: this.currentId++,
-      span: 3,
-      rowSpan: 1,
-      offset: 1
-    };
-  }
-
-  render() {
-    return (
-      <Grid gutter="md">
-        <GridItem span={9}>
-          <Grid gutter="sm">
-            {this.state.gridItems.map(({ id, span, rowSpan, offset }) => (
-              <GridItem key={id} span={+span} rowSpan={+rowSpan} offset={+offset}>
-                {id}
-              </GridItem>
-            ))}
-          </Grid>
-        </GridItem>
-        <GridItem span={3}>
-          <Button isBlock onClick={this.handleAddGridItem}>
-            Add Item
-          </Button>
-          <div>
-            {this.state.gridItems.map(item => (
-              <ItemControl
-                key={item.id}
-                id={item.id}
-                span={+item.span}
-                rowSpan={+item.rowSpan}
-                offset={+item.offset}
-                onUpdateItem={this.handleGridItemUpdate}
-              />
-            ))}
-          </div>
-        </GridItem>
-      </Grid>
-    );
-  }
-}
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/examples/ItemControl.js b/packages/patternfly-4/react-core/src/layouts/Grid/examples/ItemControl.js
deleted file mode 100644
index e827e2bbfd0..00000000000
--- a/packages/patternfly-4/react-core/src/layouts/Grid/examples/ItemControl.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import SpanSlider from './SpanSlider';
-
-const StringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-const propTypes = {
-  id: PropTypes.number.isRequired,
-  span: StringOrNumber.isRequired,
-  offset: StringOrNumber.isRequired,
-  rowSpan: StringOrNumber.isRequired,
-  onUpdateItem: PropTypes.func.isRequired
-};
-
-class ItemControl extends React.Component {
-  static propTypes = propTypes;
-
-  handleSpanChange = event => {
-    const { id, onUpdateItem } = this.props;
-    onUpdateItem(id, { span: event.currentTarget.value });
-  };
-
-  handleOffsetChange = event => {
-    const { id, onUpdateItem } = this.props;
-    onUpdateItem(id, { offset: event.currentTarget.value });
-  };
-
-  handleRowSpanChange = event => {
-    const { id, onUpdateItem } = this.props;
-    onUpdateItem(id, { rowSpan: event.currentTarget.value });
-  };
-
-  render() {
-    const { id, span, offset, rowSpan } = this.props;
-
-    return (
-      <div>
-        <div>{id}</div>
-        <SpanSlider id={`grid-item-${id}-span`} label="Span" value={span} onChange={this.handleSpanChange} />
-        <SpanSlider
-          id={`grid-item-${id}-row-span`}
-          label="Row Span"
-          min={1}
-          value={rowSpan}
-          onChange={this.handleRowSpanChange}
-        />
-        <SpanSlider
-          id={`grid-item-${id}-offset`}
-          label="Offset"
-          min={0}
-          value={offset}
-          onChange={this.handleOffsetChange}
-        />
-      </div>
-    );
-  }
-}
-
-export default ItemControl;
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/examples/SpanSlider.js b/packages/patternfly-4/react-core/src/layouts/Grid/examples/SpanSlider.js
deleted file mode 100644
index 94c92c61f37..00000000000
--- a/packages/patternfly-4/react-core/src/layouts/Grid/examples/SpanSlider.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Grid, GridItem } from '@patternfly/react-core';
-
-const propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  onChange: PropTypes.func.isRequired,
-  min: PropTypes.number
-};
-
-const defaultProps = {
-  min: 3
-};
-
-const SpanSlider = ({ label, id, onChange, min, value }) => (
-  <Grid>
-    <GridItem span={4}>
-      <label htmlFor={id}>{label}</label>
-    </GridItem>
-    <GridItem span={7}>
-      <input id={id} type="range" min={min} max={12} value={value} onChange={onChange} />
-    </GridItem>
-    <GridItem span={1}>{value}</GridItem>
-  </Grid>
-);
-
-SpanSlider.propTypes = propTypes;
-SpanSlider.defaultProps = defaultProps;
-
-export default SpanSlider;
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/examples/grid.scss b/packages/patternfly-4/react-core/src/layouts/Grid/examples/grid.scss
index d0f32f722a3..433721ed849 100644
--- a/packages/patternfly-4/react-core/src/layouts/Grid/examples/grid.scss
+++ b/packages/patternfly-4/react-core/src/layouts/Grid/examples/grid.scss
@@ -1,12 +1,12 @@
 .ws-preview {
-  & .pf-l-grid {
+  & > .pf-l-grid {
     min-height: 75px;
     padding: 1rem;
     border-width: 2px;
     border-style: dashed;
   }
 
-  & .pf-l-grid > .pf-l-grid__item {
+  & > .pf-l-grid > .pf-l-grid__item {
     min-height: 75px;
     padding: 1rem;
     border-width: 2px;
diff --git a/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss b/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss
index 4a08fa4a7d8..8057d502281 100644
--- a/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss
+++ b/packages/patternfly-4/react-core/src/layouts/Stack/examples/stack.scss
@@ -1,11 +1,11 @@
 .ws-preview {
-  & .pf-l-stack {
+  &.pf-l-stack {
     padding: 1rem;
     border-width: 2px;
     border-style: dashed;
   }
 
-  & .pf-l-stack > .pf-l-stack__item {
+  &.pf-l-stack > .pf-l-stack__item {
     padding: 1rem;
     border-width: 2px;
     border-style: dashed;
diff --git a/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss b/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss
index 2b87038b590..60e4e6aa862 100644
--- a/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss
+++ b/packages/patternfly-4/react-core/src/layouts/Toolbar/examples/toolbar.scss
@@ -1,11 +1,11 @@
 .ws-preview {
-  & .pf-l-toolbar {
+  &.pf-l-toolbar {
     padding: 1rem;
     border-width: 2px;
     border-style: dashed;
   }
 
-  & .pf-l-toolbar > div {
+  &.pf-l-toolbar > div {
     padding: 1rem;
     border-width: 2px;
     border-style: dashed;
diff --git a/packages/patternfly-4/react-docs/.eslintrc.js b/packages/patternfly-4/react-docs/.eslintrc.js
index df4531c0c5d..757807959ff 100644
--- a/packages/patternfly-4/react-docs/.eslintrc.js
+++ b/packages/patternfly-4/react-docs/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
               '@patternfly-safe/react-core',
               '@patternfly-safe/react-icons',
               '@patternfly-safe/react-tokens',
+              '@patternfly/react-topology',
               '@patternfly-safe/patternfly/patternfly.css'
             ]
           }
diff --git a/packages/patternfly-4/react-docs/CHANGELOG.md b/packages/patternfly-4/react-docs/CHANGELOG.md
index c3743c38623..b0d0613c8ec 100644
--- a/packages/patternfly-4/react-docs/CHANGELOG.md
+++ b/packages/patternfly-4/react-docs/CHANGELOG.md
@@ -3,6 +3,199 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.8.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.14...@patternfly/react-docs@4.8.15) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.13...@patternfly/react-docs@4.8.14) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.12...@patternfly/react-docs@4.8.13) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.11...@patternfly/react-docs@4.8.12) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.10...@patternfly/react-docs@4.8.11) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.8...@patternfly/react-docs@4.8.10) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.8...@patternfly/react-docs@4.8.9) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.7...@patternfly/react-docs@4.8.8) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.6...@patternfly/react-docs@4.8.7) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.5...@patternfly/react-docs@4.8.6) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.4...@patternfly/react-docs@4.8.5) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.3...@patternfly/react-docs@4.8.4) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.2...@patternfly/react-docs@4.8.3) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.1...@patternfly/react-docs@4.8.2) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.8.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.8.0...@patternfly/react-docs@4.8.1) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+# [4.8.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.7.0...@patternfly/react-docs@4.8.0) (2019-06-11)
+
+
+### Features
+
+* **Card:** Add support for images and actions ([#2122](https://github.com/patternfly/patternfly-react/issues/2122)) ([7832518](https://github.com/patternfly/patternfly-react/commit/7832518))
+
+
+
+
+
+# [4.7.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.11...@patternfly/react-docs@4.7.0) (2019-06-11)
+
+
+### Features
+
+* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc))
+
+
+
+
+
+## [4.6.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.10...@patternfly/react-docs@4.6.11) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.6.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.9...@patternfly/react-docs@4.6.10) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.6.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.8...@patternfly/react-docs@4.6.9) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.6.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.7...@patternfly/react-docs@4.6.8) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
+## [4.6.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.6...@patternfly/react-docs@4.6.7) (2019-06-07)
+
+
+### Bug Fixes
+
+* **react-docs:** react-virtualized live edit ([#2187](https://github.com/patternfly/patternfly-react/issues/2187)) ([41d76dc](https://github.com/patternfly/patternfly-react/commit/41d76dc))
+
+
+
+
+
+## [4.6.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.5...@patternfly/react-docs@4.6.6) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+
+
+
+
 ## [4.6.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@4.6.4...@patternfly/react-docs@4.6.5) (2019-06-06)
 
 **Note:** Version bump only for package @patternfly/react-docs
diff --git a/packages/patternfly-4/react-docs/gatsby-node.js b/packages/patternfly-4/react-docs/gatsby-node.js
index 68c746a33d7..44916e5d3de 100644
--- a/packages/patternfly-4/react-docs/gatsby-node.js
+++ b/packages/patternfly-4/react-docs/gatsby-node.js
@@ -96,6 +96,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
         '@patternfly/react-styles': path.resolve(__dirname, '../react-styles'),
         '@patternfly/react-table': path.resolve(__dirname, '../react-table'),
         '@patternfly/react-tokens': path.resolve(__dirname, '../react-tokens'),
+        '@patternfly/react-topology': path.resolve(__dirname, '../react-topology'),
         // Hack to work downstream in https://github.com/patternfly/patternfly-org
         '@content': path.resolve(__dirname, 'src/components/componentDocs')
       }
diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json
index c4de0798f82..dd0c3903096 100644
--- a/packages/patternfly-4/react-docs/package.json
+++ b/packages/patternfly-4/react-docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "4.6.5",
+  "version": "4.8.15",
   "author": "Red Hat",
   "license": "MIT",
   "private": true,
@@ -10,15 +10,16 @@
     "build:static": "shx cp -r ../react-core/dist/styles/* static",
     "clean": "rimraf .cache public static/assets static/base.css",
     "clean:mdx": "rimraf .cache/caches/gatsby-mdx",
-    "develop": "yarn build:static && yarn clean:mdx && gatsby develop",
+    "develop": "yarn build:static && gatsby develop",
     "serve": "gatsby serve --prefix-paths"
   },
   "dependencies": {
     "@mdx-js/mdx": "1.0.2",
     "@mdx-js/react": "1.0.2",
-    "@patternfly/patternfly": "2.8.2",
-    "@patternfly/react-core": "^3.36.1",
-    "@patternfly/react-icons": "^3.9.3",
+    "@patternfly/patternfly": "2.13.0",
+    "@patternfly/react-core": "^3.48.5",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-virtualized-extension": "^1.1.11",
     "gatsby": "2.3.14",
     "gatsby-mdx": "0.6.3",
     "gatsby-plugin-react-helmet": "^3.0.11",
diff --git a/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js b/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js
index 3ba7f83305a..f85d739029d 100644
--- a/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js
+++ b/packages/patternfly-4/react-docs/src/components/componentDocs/liveEdit.js
@@ -12,7 +12,9 @@ import * as ReactInlineEdit from '@patternfly/react-inline-edit-extension';
 import * as ReactStyledSystem from '@patternfly/react-styled-system';
 import * as ReactStyles from '@patternfly/react-styles';
 import * as ReactTable from '@patternfly/react-table';
+import * as ReactVirtualizedExtension from '@patternfly/react-virtualized-extension';
 import * as ReactTokens from '@patternfly/react-tokens';
+import * as ReactTopology from '@patternfly/react-topology';
 
 import './live-edit.scss';
 
@@ -46,7 +48,9 @@ export class LiveEdit extends React.Component {
             ...ReactStyledSystem,
             ...ReactStyles,
             ...ReactTable,
-            ...ReactTokens
+            ...ReactVirtualizedExtension,
+            ...ReactTokens,
+            ...ReactTopology
           }
         : {};
     this.scope = {
diff --git a/packages/patternfly-4/react-inline-edit-extension/.babelrc b/packages/patternfly-4/react-inline-edit-extension/.babelrc
index 36d1937e56b..25c4221a16d 100644
--- a/packages/patternfly-4/react-inline-edit-extension/.babelrc
+++ b/packages/patternfly-4/react-inline-edit-extension/.babelrc
@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "../.babelrc.js"
-  ]
-}
+  "extends": "../.babelrc"
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-inline-edit-extension/.npmignore b/packages/patternfly-4/react-inline-edit-extension/.npmignore
index 378eac25d31..5344519a423 100644
--- a/packages/patternfly-4/react-inline-edit-extension/.npmignore
+++ b/packages/patternfly-4/react-inline-edit-extension/.npmignore
@@ -1 +1,6 @@
 build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md
index 3361d4fe556..70e96bc4254 100644
--- a/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md
+++ b/packages/patternfly-4/react-inline-edit-extension/CHANGELOG.md
@@ -3,6 +3,220 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.8.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.11...@patternfly/react-inline-edit-extension@2.8.12) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.10...@patternfly/react-inline-edit-extension@2.8.11) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.9...@patternfly/react-inline-edit-extension@2.8.10) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.8...@patternfly/react-inline-edit-extension@2.8.9) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.7...@patternfly/react-inline-edit-extension@2.8.8) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.5...@patternfly/react-inline-edit-extension@2.8.7) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.5...@patternfly/react-inline-edit-extension@2.8.6) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.4...@patternfly/react-inline-edit-extension@2.8.5) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.3...@patternfly/react-inline-edit-extension@2.8.4) (2019-06-14)
+
+
+### Bug Fixes
+
+* **react-icons:** add noVerticalAlign prop to d.ts file ([#2238](https://github.com/patternfly/patternfly-react/issues/2238)) ([c50143c](https://github.com/patternfly/patternfly-react/commit/c50143c)), closes [#2237](https://github.com/patternfly/patternfly-react/issues/2237)
+
+
+
+
+
+## [2.8.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.2...@patternfly/react-inline-edit-extension@2.8.3) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.1...@patternfly/react-inline-edit-extension@2.8.2) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.8.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.8.0...@patternfly/react-inline-edit-extension@2.8.1) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+# [2.8.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.14...@patternfly/react-inline-edit-extension@2.8.0) (2019-06-13)
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [2.7.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.13...@patternfly/react-inline-edit-extension@2.7.14) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.12...@patternfly/react-inline-edit-extension@2.7.13) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.11...@patternfly/react-inline-edit-extension@2.7.12) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.10...@patternfly/react-inline-edit-extension@2.7.11) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.9...@patternfly/react-inline-edit-extension@2.7.10) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.8...@patternfly/react-inline-edit-extension@2.7.9) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.7...@patternfly/react-inline-edit-extension@2.7.8) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.6...@patternfly/react-inline-edit-extension@2.7.7) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.5...@patternfly/react-inline-edit-extension@2.7.6) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.4...@patternfly/react-inline-edit-extension@2.7.5) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.3...@patternfly/react-inline-edit-extension@2.7.4) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.2...@patternfly/react-inline-edit-extension@2.7.3) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
+## [2.7.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.1...@patternfly/react-inline-edit-extension@2.7.2) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-inline-edit-extension
+
+
+
+
+
 ## [2.7.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-inline-edit-extension@2.7.0...@patternfly/react-inline-edit-extension@2.7.1) (2019-06-06)
 
 **Note:** Version bump only for package @patternfly/react-inline-edit-extension
diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json
index 898127a04b5..80f54c7aecb 100644
--- a/packages/patternfly-4/react-inline-edit-extension/package.json
+++ b/packages/patternfly-4/react-inline-edit-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-inline-edit-extension",
-  "version": "2.7.1",
+  "version": "2.8.12",
   "description": "This library provides inline editing support for PatternFly 4 React table",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -27,11 +27,11 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/",
   "dependencies": {
-    "@patternfly/patternfly": "2.8.2",
-    "@patternfly/react-core": "^3.36.1",
-    "@patternfly/react-icons": "^3.9.3",
-    "@patternfly/react-styles": "^3.3.0",
-    "@patternfly/react-table": "^2.10.1",
+    "@patternfly/patternfly": "2.13.0",
+    "@patternfly/react-core": "^3.48.5",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-styles": "^3.4.2",
+    "@patternfly/react-table": "^2.13.10",
     "classnames": "^2.2.5",
     "exenv": "^1.2.2",
     "reactabular-table": "^8.14.0"
@@ -42,18 +42,28 @@
     "react-dom": "^15.6.2 || ^16.4.0"
   },
   "scripts": {
-    "build": "yarn build:babel && yarn build:ts",
-    "build:babel": "concurrently \"yarn build:babel:cjs\" \"yarn build:babel:esm\"",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q",
-    "build:ts": "node ./scripts/copyTS.js",
+    "build": "yarn build:babel && node ./scripts/copyTS.js",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
     "postbuild": "node ./build/copyStyles.js"
   },
   "optionalDependencies": {
-    "@patternfly/react-tokens": "^2.5.3"
+    "@patternfly/react-tokens": "^2.6.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",
     "enzyme": "3.9.0",
     "fs-extra": "^6.0.1",
diff --git a/packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap b/packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap
index b968eccb4fc..16dcdfdd18b 100644
--- a/packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap
+++ b/packages/patternfly-4/react-inline-edit-extension/src/components/CancelButton/__snapshots__/CancelButton.test.js.snap
@@ -6,6 +6,7 @@ exports[`it renders properly 1`] = `
 >
   <CloseIcon
     color="currentColor"
+    noVerticalAlign={false}
     size="sm"
     title={null}
   />
diff --git a/packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap b/packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap
index 42c77a2406c..497e3ba92d7 100644
--- a/packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap
+++ b/packages/patternfly-4/react-inline-edit-extension/src/components/ConfirmButton/__snapshots__/ConfirmButton.test.js.snap
@@ -6,6 +6,7 @@ exports[`it renders properly 1`] = `
 >
   <CheckIcon
     color="currentColor"
+    noVerticalAlign={false}
     size="sm"
     title={null}
   />
diff --git a/packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap b/packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap
index 52de8a21ca2..483476e8ced 100644
--- a/packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap
+++ b/packages/patternfly-4/react-inline-edit-extension/src/components/InlineEdit/__snapshots__/ConfirmButtons.test.js.snap
@@ -71,6 +71,7 @@ exports[`ConfirmButtons renders correctly 1`] = `
         >
           <CheckIcon
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
@@ -119,6 +120,7 @@ exports[`ConfirmButtons renders correctly 1`] = `
         >
           <CloseIcon
             color="currentColor"
+            noVerticalAlign={false}
             size="sm"
             title={null}
           >
diff --git a/packages/patternfly-4/react-integration/CHANGELOG.md b/packages/patternfly-4/react-integration/CHANGELOG.md
index 20d638ec4d5..c71b5ff74a2 100644
--- a/packages/patternfly-4/react-integration/CHANGELOG.md
+++ b/packages/patternfly-4/react-integration/CHANGELOG.md
@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.23.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@1.21.0...@patternfly/react-integration@1.23.0) (2019-06-18)
+
+
+### Features
+
+* **ContextSelector:** Convert context selector to typescript ([#2147](https://github.com/patternfly/patternfly-react/issues/2147)) ([9a4f484](https://github.com/patternfly/patternfly-react/commit/9a4f484))
+
+
+
+
+
+# [1.22.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@1.21.0...@patternfly/react-integration@1.22.0) (2019-06-18)
+
+
+### Features
+
+* **ContextSelector:** Convert context selector to typescript ([#2147](https://github.com/patternfly/patternfly-react/issues/2147)) ([9a4f484](https://github.com/patternfly/patternfly-react/commit/9a4f484))
+
+
+
+
+
+# 1.21.0 (2019-06-14)
+
+
+### Features
+
+* **Accordion:** Accordion Component TypeScript Conversion ([#2121](https://github.com/patternfly/patternfly-react/issues/2121)) ([e2e981d](https://github.com/patternfly/patternfly-react/commit/e2e981d))
+
+
+
+
+
+# [1.20.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@1.19.1...@patternfly/react-integration@1.20.0) (2019-06-12)
+
+
+### Features
+
+* **react-core:** allow dynamic rendering of anchor components ([#2117](https://github.com/patternfly/patternfly-react/issues/2117)) ([c1c3be9](https://github.com/patternfly/patternfly-react/commit/c1c3be9))
+
+
+
+
+
+## [1.19.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@1.19.0...@patternfly/react-integration@1.19.1) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-integration
+
+
+
+
+
+# 1.19.0 (2019-06-11)
+
+
+### Features
+
+* **ApplicationLauncher:** Convert application launcher to typescript ([#2166](https://github.com/patternfly/patternfly-react/issues/2166)) ([9b90f94](https://github.com/patternfly/patternfly-react/commit/9b90f94))
+* **Table:** Add support for .pf-m-grid-2xl breakpoint ([#2206](https://github.com/patternfly/patternfly-react/issues/2206)) ([0f9ebf9](https://github.com/patternfly/patternfly-react/commit/0f9ebf9))
+
+
+
+
+
+# 1.18.0 (2019-06-10)
+
+
+### Features
+
+* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771))
+* **PF4: Pagination:** When empty array sent to pagination no per page should be visible ([#2175](https://github.com/patternfly/patternfly-react/issues/2175)) ([cb97dfd](https://github.com/patternfly/patternfly-react/commit/cb97dfd))
+
+
+
+
+
 # [1.17.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-integration@1.16.0...@patternfly/react-integration@1.17.0) (2019-06-05)
 
 
diff --git a/packages/patternfly-4/react-integration/README.md b/packages/patternfly-4/react-integration/README.md
index 0da28039af4..79899ab06cd 100644
--- a/packages/patternfly-4/react-integration/README.md
+++ b/packages/patternfly-4/react-integration/README.md
@@ -3,7 +3,7 @@
 ## Overview
 PatternFly 4 React provides an integration testing demo app as an environment to verify and test PatternFly 4 code changes and contributions.
 
-The demo app is written in TypeScript and includes Cypress. We use Cypress for integration testing. If you’re new to Cypress and want to learn more, you can start with their documentation. 
+The demo app is written in TypeScript and includes Cypress. We use Cypress for integration testing. If you’re new to Cypress and want to learn more, you can start with their documentation.
 
 * [Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell)
 * [Cypress API](https://docs.cypress.io/api/api/table-of-contents.html)
@@ -26,7 +26,6 @@ Once you’ve completed development of a new component, you need to perform a bu
 
 ## Running the demo app
 
-Running the demo app
 Run the following command from the root directory to launch the demo app:
 
 `yarn start:demo-app`
@@ -38,7 +37,7 @@ Once the demo app is launched, all saved changes you make to the code should be
 Before you can start writing a Cypress test, you need to build a demo page to test against.
 
 1. Go to the [component demo section](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos) and create a new folder to add your demo page.
-2. To see your demo in app navigation, add your demo to the [Demo.ts](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/emo-app-ts/src/Demos.ts) file.
+2. To see your demo in app navigation, add your demo to the [Demo.ts](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts) file.
 
 
 ## Building Cypress tests
diff --git a/packages/patternfly-4/react-integration/cypress/integration/accordion.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/accordion.spec.ts
new file mode 100644
index 00000000000..710cd9eb649
--- /dev/null
+++ b/packages/patternfly-4/react-integration/cypress/integration/accordion.spec.ts
@@ -0,0 +1,43 @@
+describe('Accordion Demo Test', () => {
+  it('Navigate to Accordion section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#accordion-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/accordion-demo-nav-link');
+  });
+
+  it('Verify initial state', () => {
+    const toggles = cy.get('#accordion-example .pf-c-accordion__toggle');
+    toggles.should('have.length', 3);
+    toggles.should('have.attr', 'aria-expanded', 'false');
+    cy.get('#accordion-example .pf-m-expanded').should('not.exist');
+  });
+
+  it('Verify toggle open behavior', () => {
+    cy.get('#item-1').click();
+    cy.get('#item-1').should('have.attr', 'aria-expanded', 'true');
+    cy.get('#item-2').should('have.attr', 'aria-expanded', 'false');
+    cy.get('#item-3').should('have.attr', 'aria-expanded', 'false');
+    const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
+    expandedContent.should('have.length', 1);
+    expandedContent.should('have.attr', 'id', 'item-1-content');
+  });
+
+  it('Verify toggle switch behavior', () => {
+    cy.get('#item-2').click();
+    cy.get('#item-1').should('have.attr', 'aria-expanded', 'false');
+    cy.get('#item-2').should('have.attr', 'aria-expanded', 'true');
+    cy.get('#item-3').should('have.attr', 'aria-expanded', 'false');
+    const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
+    expandedContent.should('have.length', 1);
+    expandedContent.should('have.attr', 'id', 'item-2-content');
+  });
+
+  it('Verify toggle close behavior', () => {
+    cy.get('#item-2').click();
+    cy.get('#item-1').should('have.attr', 'aria-expanded', 'false');
+    cy.get('#item-2').should('have.attr', 'aria-expanded', 'false');
+    cy.get('#item-3').should('have.attr', 'aria-expanded', 'false');
+    const expandedContent = cy.get('#accordion-example .pf-c-accordion__expanded-content.pf-m-expanded');
+    expandedContent.should('not.exist');
+  });
+});
diff --git a/packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts
new file mode 100644
index 00000000000..f8cc5a3f20f
--- /dev/null
+++ b/packages/patternfly-4/react-integration/cypress/integration/applicationlauncher.spec.ts
@@ -0,0 +1,24 @@
+describe('Application Launcher Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#application-launcher-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/application-launcher-demo-nav-link');
+  });
+ 
+  it('Verify application launcher button', () => {
+    cy.get('button').should('have.class', 'pf-c-button pf-m-plain');
+  });
+
+  it('Verify app launcher menu toggle', () => {
+    cy.get('#pf-random-id-0').click();
+    cy.get('ul').should('have.class', 'pf-c-app-launcher__menu');
+    cy.get('#pf-random-id-0').click(); 
+    cy.get('.pf-c-app-launcher__menu').should('not.exist'); 
+  });
+
+  it('Verify application click works', () => {
+    cy.get('#pf-random-id-0').click(); 
+    cy.get('.pf-c-app-launcher__menu-item').first().click();
+    cy.url().should('eq', 'http://patternfly-react.surge.sh/');
+  })
+});
diff --git a/packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts
new file mode 100644
index 00000000000..19c4ef4f860
--- /dev/null
+++ b/packages/patternfly-4/react-integration/cypress/integration/backdrop.spec.ts
@@ -0,0 +1,11 @@
+describe('Backdrop Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#backdrop-demo-nav-item-link').click(); 
+    cy.url().should('eq', 'http://localhost:3000/backdrop-demo-nav-link');
+  }); 
+
+  it('Verify has correct className', () => {
+    cy.get('.backdrop').should('have.class', 'pf-c-backdrop');
+  });
+})
\ No newline at end of file
diff --git a/packages/patternfly-4/react-integration/cypress/integration/contextselector.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/contextselector.spec.ts
new file mode 100644
index 00000000000..5f9ac18234a
--- /dev/null
+++ b/packages/patternfly-4/react-integration/cypress/integration/contextselector.spec.ts
@@ -0,0 +1,21 @@
+describe('Context Selector Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#context-selector-demo-nav-item-link').click(); 
+    cy.url().should('eq', 'http://localhost:3000/context-selector-demo-nav-link');
+  });
+  
+  it('Verify toggle class', () => {
+    cy.get('#pf-context-selector-toggle-id-0').should('have.class', 'pf-c-context-selector__toggle')
+  });
+
+  it('Verify toggle button works', () => {
+    cy.get('.pf-c-context-selector__toggle').click(); 
+    cy.get('.pf-c-context-selector__menu').should('exist'); 
+  }); 
+
+  it('Verify toggle text changes with selection', () => {
+    cy.get('.pf-c-context-selector__menu-list-item').last().click() 
+    cy.get('.pf-c-context-selector__toggle-text').contains('Azure 2'); 
+  });
+});
\ No newline at end of file
diff --git a/packages/patternfly-4/react-integration/cypress/integration/textarea.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/textarea.spec.ts
new file mode 100644
index 00000000000..48a7addc5d1
--- /dev/null
+++ b/packages/patternfly-4/react-integration/cypress/integration/textarea.spec.ts
@@ -0,0 +1,37 @@
+describe('Text Area Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#text-area-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/text-area-nav-link')
+  });
+
+  it('Verify Text area exist', () => {
+    cy.get('#textarea1').should('exist')
+  });
+
+  it('Verify Required Text area exist', () => {
+    cy.get('#textarea2').should('exist')
+  });
+
+  it('Verify Text Area can be updated and that invalid is applied', () => {
+    cy.get('#textarea1').should('have.value', '')
+    cy.get('#textarea1').type('testing')
+    cy.get('#textarea1').should('have.value', 'testing')
+    // Clear text area and verify it is invalid
+    cy.get('#textarea1').clear().then(textarea => {
+      expect(textarea.attr('aria-invalid')).to.be.equal('true');
+    });
+  });
+
+  it('Verify Required Text Area can be updated and that invalid is applied', () => {
+    // Verify it is required
+    cy.get('#textarea2').should('have.attr', 'required')
+    cy.get('#textarea2').should('have.value', '')
+    cy.get('#textarea2').type('testing')
+    cy.get('#textarea2').should('have.value', 'testing')
+    // Clear text area and verify it is invalid
+    cy.get('#textarea2').clear().then(textarea => {
+      expect(textarea.attr('aria-invalid')).to.be.equal('true');
+    });
+  });
+});
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md
index 9405343ef9b..0c42c8db14a 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md
+++ b/packages/patternfly-4/react-integration/demo-app-ts/CHANGELOG.md
@@ -3,6 +3,192 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.24.5](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.24.4...demo-app-ts@1.24.5) (2019-06-18)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.24.4](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.24.3...demo-app-ts@1.24.4) (2019-06-18)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.24.3](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.24.2...demo-app-ts@1.24.3) (2019-06-18)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.24.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.24.1...demo-app-ts@1.24.2) (2019-06-18)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.24.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.24.0...demo-app-ts@1.24.1) (2019-06-18)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+# [1.24.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.22.1...demo-app-ts@1.24.0) (2019-06-18)
+
+
+### Features
+
+* **ContextSelector:** Convert context selector to typescript ([#2147](https://github.com/patternfly/patternfly-react/issues/2147)) ([9a4f484](https://github.com/patternfly/patternfly-react/commit/9a4f484))
+
+
+
+
+
+# [1.23.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.22.1...demo-app-ts@1.23.0) (2019-06-18)
+
+
+### Features
+
+* **ContextSelector:** Convert context selector to typescript ([#2147](https://github.com/patternfly/patternfly-react/issues/2147)) ([9a4f484](https://github.com/patternfly/patternfly-react/commit/9a4f484))
+
+
+
+
+
+## [1.22.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.22.0...demo-app-ts@1.22.1) (2019-06-14)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+# [1.22.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.21.5...demo-app-ts@1.22.0) (2019-06-14)
+
+
+### Features
+
+* **Accordion:** Accordion Component TypeScript Conversion ([#2121](https://github.com/patternfly/patternfly-react/issues/2121)) ([e2e981d](https://github.com/patternfly/patternfly-react/commit/e2e981d))
+
+
+
+
+
+## [1.21.5](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.21.4...demo-app-ts@1.21.5) (2019-06-14)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.21.4](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.21.3...demo-app-ts@1.21.4) (2019-06-14)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.21.3](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.21.2...demo-app-ts@1.21.3) (2019-06-13)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.21.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.21.1...demo-app-ts@1.21.2) (2019-06-13)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.21.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.21.0...demo-app-ts@1.21.1) (2019-06-12)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+# [1.21.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.20.0...demo-app-ts@1.21.0) (2019-06-12)
+
+
+### Features
+
+* **react-core:** allow dynamic rendering of anchor components ([#2117](https://github.com/patternfly/patternfly-react/issues/2117)) ([c1c3be9](https://github.com/patternfly/patternfly-react/commit/c1c3be9))
+
+
+
+
+
+# [1.20.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.19.2...demo-app-ts@1.20.0) (2019-06-11)
+
+
+### Features
+
+* **ApplicationLauncher:** Convert application launcher to typescript ([#2166](https://github.com/patternfly/patternfly-react/issues/2166)) ([9b90f94](https://github.com/patternfly/patternfly-react/commit/9b90f94))
+
+
+
+
+
+## [1.19.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.19.1...demo-app-ts@1.19.2) (2019-06-11)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.19.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.19.0...demo-app-ts@1.19.1) (2019-06-11)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+# [1.19.0](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.3...demo-app-ts@1.19.0) (2019-06-10)
+
+
+### Features
+
+* **backdrop:** Convert backdrop to typescript ([#2105](https://github.com/patternfly/patternfly-react/issues/2105)) ([fd3d771](https://github.com/patternfly/patternfly-react/commit/fd3d771))
+
+
+
+
+
+## [1.18.3](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.2...demo-app-ts@1.18.3) (2019-06-10)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
+## [1.18.2](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.1...demo-app-ts@1.18.2) (2019-06-07)
+
+**Note:** Version bump only for package demo-app-ts
+
+
+
+
+
 ## [1.18.1](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@1.18.0...demo-app-ts@1.18.1) (2019-06-06)
 
 **Note:** Version bump only for package demo-app-ts
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/package.json b/packages/patternfly-4/react-integration/demo-app-ts/package.json
index d4893c6f75d..055e704b891 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/package.json
+++ b/packages/patternfly-4/react-integration/demo-app-ts/package.json
@@ -1,13 +1,13 @@
 {
   "name": "demo-app-ts",
   "private": true,
-  "version": "1.18.1",
+  "version": "1.24.5",
   "scripts": {
     "build:demo-app": "react-scripts build",
     "start:demo-app": "react-scripts start"
   },
   "dependencies": {
-    "@patternfly/react-core": "^3.36.1",
+    "@patternfly/react-core": "^3.48.5",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-router": "^4.3.1",
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
index 7491b597704..34dc9be68de 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
@@ -15,16 +15,31 @@ export const Demos: DemoInterface[] = [
     name: 'About Modal Demo',
     componentType: Examples.AboutModalDemo
   },
+  {
+    id: 'accordion-demo',
+    name: 'Accordion Demo',
+    componentType: Examples.AccordionDemo
+  },
   {
     id: 'alert-demo',
     name: 'Alert Demo',
     componentType: Examples.AlertDemo
   },
+  {
+    id: 'application-launcher-demo',
+    name: 'Application Launcher Demo', 
+    componentType: Examples.ApplicationLauncherDemo
+  },
   {
     id: 'avatar-demo',
     name: 'Avatar Demo',
     componentType: Examples.AvatarDemo
   },
+  {
+    id: 'backdrop-demo', 
+    name: 'Backdrop Demo', 
+    componentType: Examples.BackdropDemo
+  }, 
   {
     id: 'backgroundimage-demo',
     name: 'Background Image Demo', 
@@ -65,6 +80,11 @@ export const Demos: DemoInterface[] = [
     name: 'ChipGroup Demo',
     componentType: Examples.BadgeChip 
   },
+  {
+    id: 'context-selector-demo', 
+    name: 'ContextSelector Demo', 
+    componentType: Examples.ContextSelectorDemo
+  },
   {
     id: 'empty-state-demo',
     name: 'Empty State Demo',
@@ -105,6 +125,11 @@ export const Demos: DemoInterface[] = [
     name: 'Options Menu Demo',
     componentType: Examples.OptionsMenuDemo
   },
+  {
+    id: 'page-demo',
+    name: 'Page Demo',
+    componentType: Examples.PageDemo
+  },
   {
     id: 'popover-demo',
     name: 'Popover Demo',
@@ -120,6 +145,11 @@ export const Demos: DemoInterface[] = [
     name: 'Tab Demo',
     componentType: Examples.TabDemo
   },
+  {
+    id: 'text-area',
+    name: 'Text Area Demo',
+    componentType: Examples.TextAreaDemo
+  },
   {
     id: 'text-demo',
     name: 'Text Demo',
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
new file mode 100644
index 00000000000..f19b04456c4
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
+
+interface AccordionDemoState {
+  expanded: string;
+}
+
+export class AccordionDemo extends React.Component<null, AccordionDemoState> {
+  state = {
+    expanded: null
+  };
+
+  onToggle = (id: string) => {
+    const { expanded } = this.state;
+    this.setState({ expanded: id !== expanded ? id : null });
+  };
+
+  render() {
+    const { expanded } = this.state;
+    return (
+      <Accordion id="accordion-example">
+        <AccordionItem>
+          <AccordionToggle onClick={() => this.onToggle('item-1')} isExpanded={expanded === 'item-1'} id="item-1">
+            Item One
+          </AccordionToggle>
+          <AccordionContent isHidden={expanded !== 'item-1'} id="item-1-content">
+            <p>
+              Item One Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionToggle onClick={() => this.onToggle('item-2')} isExpanded={expanded === 'item-2'} id="item-2">
+            Item Two
+          </AccordionToggle>
+          <AccordionContent isHidden={expanded !== 'item-2'} id="item-2-content">
+            <p>
+              Item Two Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionToggle onClick={() => this.onToggle('item-3')} isExpanded={expanded === 'item-3'} id="item-3">
+            Item Three
+          </AccordionToggle>
+          <AccordionContent isHidden={expanded !== 'item-3'} id="item-3-content">
+            <p>
+              Item Three Content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua.
+            </p>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx
new file mode 100644
index 00000000000..d1367efd742
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { ApplicationLauncher, DropdownItem, Tooltip } from '@patternfly/react-core';
+
+interface ApplicationLauncherState {
+  isOpen: boolean; 
+}
+
+
+export class ApplicationLauncherDemo extends React.Component<null, ApplicationLauncherState> {
+  onToggle: (isOpen: boolean) => void; 
+  onSelect: (event: any) => void; 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      console.log("This works")
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    };
+  }
+
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <Tooltip content={<div>Launch Application 1</div>}>
+        <DropdownItem key="application_1" component="a" href="http://patternfly-react.surge.sh/">
+          Application 1
+        </DropdownItem>
+      </Tooltip>
+      ,
+      <Tooltip content={<div>Launch Application 2</div>} position="right">
+        <DropdownItem key="application_2" component="a">
+          Application 2
+        </DropdownItem>
+      </Tooltip>
+      ,
+      <Tooltip content={<div>Launch Application 3</div>} position="right">
+        <DropdownItem key="application_3" component="a">
+          Application 3
+        </DropdownItem>
+      </Tooltip>
+      ,
+      <Tooltip content={<div>Application Unavailable At This Time</div>} position="bottom">
+        <DropdownItem key="disabled_application_4" isDisabled component="a">
+          Unavailable Application
+        </DropdownItem>
+      </Tooltip>
+    ];
+    return (
+      <ApplicationLauncher
+        onSelect={this.onSelect}
+        onToggle={this.onToggle}
+        isOpen={isOpen}
+        dropdownItems={dropdownItems}
+      />
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx
new file mode 100644
index 00000000000..caaa67989ef
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/BackdropDemo/BackdropDemo.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Backdrop } from '@patternfly/react-core';
+
+export class BackdropDemo extends React.Component {
+  render() {
+    return (
+      <Backdrop className="backdrop" />
+    );
+  }
+}
+
+  
\ No newline at end of file
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx
new file mode 100644
index 00000000000..efdebb17192
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
+
+interface ContextSelectorState {
+  isOpen: boolean; 
+  selected: string;
+  searchValue: string; 
+  filteredItems: Array<string>; 
+}
+
+export class ContextSelectorDemo extends React.Component<{}, ContextSelectorState> {
+  items: Array<string>; 
+  onToggle: (event: any, isOpen: any) => void;
+  onSelect: (event: any, value: string) => void; 
+  onSearchInputChange: (value: string) => void; 
+  onSearchButtonClick: (event: any) => void; 
+  constructor(props) {
+    super(props);
+    this.items = [
+      'My Project',
+      'OpenShift Cluster',
+      'Production Ansible',
+      'AWS',
+      'Azure',
+      'My Project 2',
+      'OpenShift Cluster ',
+      'Production Ansible 2 ',
+      'AWS 2',
+      'Azure 2'
+    ];
+
+    this.state = {
+      isOpen: false,
+      selected: this.items[0],
+      searchValue: '',
+      filteredItems: this.items
+    };
+
+    this.onToggle = (event, isOpen) => {
+      this.setState({
+        isOpen
+      });
+    };
+
+    this.onSelect = (event, value) => {
+      this.setState({
+        selected: value,
+        isOpen: !this.state.isOpen
+      });
+    };
+
+    this.onSearchInputChange = value => {
+      this.setState({ searchValue: value });
+    };
+
+    this.onSearchButtonClick = event => {
+      const filtered =
+        this.state.searchValue === ''
+          ? this.items
+          : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
+
+      this.setState({ filteredItems: filtered || [] });
+    };
+  }
+
+  render() {
+    const { isOpen, selected, searchValue, filteredItems } = this.state;
+    return (
+      <ContextSelector
+        toggleText={selected}
+        onSearchInputChange={this.onSearchInputChange}
+        isOpen={isOpen}
+        searchInputValue={searchValue}
+        onToggle={(event: any) => this.onToggle(event, !isOpen)}
+        onSelect={this.onSelect}
+        onSearchButtonClick={this.onSearchButtonClick}
+        screenReaderLabel="Selected Project:"
+      >
+        {filteredItems.map((item, index) => (
+          <ContextSelectorItem key={index}>{item}</ContextSelectorItem>
+        ))}
+      </ContextSelector>
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
new file mode 100644
index 00000000000..98117b8c97e
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Page, PageHeader, PageSidebar, PageSection, PageSectionVariants } from '@patternfly/react-core';
+
+export class PageDemo extends React.Component {
+  state = {
+    isNavOpen: true
+  };
+  onNavToggle = () => {
+    this.setState({
+    	isNavOpen: !this.state.isNavOpen
+    });
+  };
+
+  render() {
+    const { isNavOpen } = this.state;
+
+    const logoProps = {
+      href: 'https://patternfly.org',
+      onClick: () => console.log('clicked logo'),
+      target: '_blank'
+    };
+    const Header = (
+      <PageHeader
+        logo="Logo that's a <div>"
+        logoProps={logoProps}
+        toolbar="Toolbar"
+        avatar=" | Avatar"
+        showNavToggle
+        isNavOpen={isNavOpen}
+        onNavToggle={this.onNavToggle}
+		    logoComponent={'div'}
+      />
+    );
+    const Sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} />;
+
+    return (
+      <Page header={Header} sidebar={Sidebar}>
+        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
+        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
+        <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      </Page>
+    );
+  }
+}
+
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx
new file mode 100644
index 00000000000..10574f243c3
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TextAreaDemo/TextAreaDemo.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { TextArea, Text } from '@patternfly/react-core';
+
+interface TextAreaState {
+  textAreaValue: string,
+  requiredTextAreaValue: string,
+  isValid: boolean, 
+  requiredIsValid: boolean
+}
+
+export class TextAreaDemo extends React.Component<{}, TextAreaState> {
+  state = {
+    textAreaValue: '',
+    requiredTextAreaValue: '',
+    isValid: true, 
+    requiredIsValid: true
+  };
+
+  handleChange = (value:string) => {
+    // If the text area contains less than 1 character, set isValid to false
+    const valid = !(value.length < 1);
+    this.setState({ textAreaValue: value, isValid: valid });
+  
+  };
+  
+  handleChangeRequired = (value:string) => {
+    // If the text area contains less than 1 character, set isValid to false
+    const isValid = !(value.length < 1);
+    this.setState({ requiredTextAreaValue: value, requiredIsValid: isValid });
+  };
+
+ render() {
+  const { textAreaValue, requiredTextAreaValue, isValid, requiredIsValid  } = this.state
+    return (
+      <React.Fragment>
+        <Text>Text area</Text> 
+        <TextArea id="textarea1" value={textAreaValue} onChange={this.handleChange} isValid={isValid} aria-label="text area example 1" />
+        <Text>Required text area</Text> 
+        <TextArea id="textarea2" value={requiredTextAreaValue} onChange={this.handleChangeRequired} isRequired isValid={requiredIsValid} aria-label="text area example 2" />
+      </React.Fragment>
+    )}
+}
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
index e90b8830c72..965617b0218 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -1,6 +1,9 @@
 export * from './AboutModal/AboutModalDemo';
+export * from './AccordionDemo/AccordionDemo';
+export * from './ApplicationLauncherDemo/ApplicationLauncherDemo'; 
 export * from './AlertDemo/AlertDemo';
 export * from './AvatarDemo/AvatarDemo';
+export * from './BackdropDemo/BackdropDemo'; 
 export * from './BackgroundImageDemo/BackgroundImageDemo'; 
 export * from './BadgeDemo/BadgeDemo'; 
 export * from './BrandDemo/BrandDemo'; 
@@ -9,6 +12,7 @@ export * from './ButtonDemo/ButtonDemo';
 export * from './CardDemo/CardDemo'; 
 export * from './CheckboxDemo/CheckboxDemo'; 
 export * from './ChipGroupDemo/ChipGroupDemo';
+export * from './ContextSelectorDemo/ContextSelectorDemo'; 
 export * from './EmptyStateDemo/EmptyStateDemo';
 export * from './FormDemo/FormDemo'; 
 export * from './LabelDemo/LabelDemo';
@@ -18,8 +22,10 @@ export * from './ModalDemo/ModalDemo';
 export * from './NavDemo/NavDemo';
 export * from './OptionsMenuDemo/OptionsMenuDemo';
 export * from './PopoverDemo/PopoverDemo';
+export * from './PageDemo/PageDemo';
 export * from './RadioDemo/RadioDemo';
 export * from './TabsDemo/TabsDemo';
+export * from './TextAreaDemo/TextAreaDemo';
 export * from './TextDemo/TextDemo';
 export * from './TextInputDemo/TextInputDemo';
 export * from './TitleDemo/TitleDemo';
diff --git a/packages/patternfly-4/react-integration/package.json b/packages/patternfly-4/react-integration/package.json
index a6186f242fd..fbf3dfacfb6 100644
--- a/packages/patternfly-4/react-integration/package.json
+++ b/packages/patternfly-4/react-integration/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-integration",
   "private": true,
-  "version": "1.17.0",
+  "version": "1.23.0",
   "description": "Integration testing for PF4 using demo applications",
   "main": "lib/index.js",
   "sideEffects": false,
diff --git a/packages/patternfly-4/react-styled-system/.babelrc b/packages/patternfly-4/react-styled-system/.babelrc
index 4aa312ac898..25c4221a16d 100644
--- a/packages/patternfly-4/react-styled-system/.babelrc
+++ b/packages/patternfly-4/react-styled-system/.babelrc
@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "../.babelrc.js"
-  ]
+  "extends": "../.babelrc"
 }
\ No newline at end of file
diff --git a/packages/patternfly-4/react-styled-system/.npmignore b/packages/patternfly-4/react-styled-system/.npmignore
index 24d7d24d3f5..5344519a423 100644
--- a/packages/patternfly-4/react-styled-system/.npmignore
+++ b/packages/patternfly-4/react-styled-system/.npmignore
@@ -1,2 +1,6 @@
-src
-build
\ No newline at end of file
+build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-styled-system/CHANGELOG.md b/packages/patternfly-4/react-styled-system/CHANGELOG.md
index f446bb4098d..32abe0ba821 100644
--- a/packages/patternfly-4/react-styled-system/CHANGELOG.md
+++ b/packages/patternfly-4/react-styled-system/CHANGELOG.md
@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.6.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.6.1...@patternfly/react-styled-system@3.6.2) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-styled-system
+
+
+
+
+
+## [3.6.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.6.0...@patternfly/react-styled-system@3.6.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-styled-system
+
+
+
+
+
+# 3.6.0 (2019-06-13)
+
+
+### Bug Fixes
+
+* **topology:** Fixes JS dist for react-topology ([#2230](https://github.com/patternfly/patternfly-react/issues/2230)) ([337510a](https://github.com/patternfly/patternfly-react/commit/337510a))
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [3.5.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.5.2...@patternfly/react-styled-system@3.5.3) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-styled-system
+
+
+
+
+
+## [3.5.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.5.1...@patternfly/react-styled-system@3.5.2) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-styled-system
+
+
+
+
+
+## 3.5.1 (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-styled-system
+
+
+
+
+
 # [3.5.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styled-system@3.4.6...@patternfly/react-styled-system@3.5.0) (2019-06-05)
 
 
diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json
index ca1e0b901c9..7876904d048 100644
--- a/packages/patternfly-4/react-styled-system/package.json
+++ b/packages/patternfly-4/react-styled-system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styled-system",
-  "version": "3.5.0",
+  "version": "3.6.2",
   "description": "Experimental: Styled System package with PatternFly 4 theming",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -27,15 +27,16 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build": "yarn build:babel && node ./scripts/copyTS.js",
-    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm'",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose"
   },
   "dependencies": {
-    "@patternfly/react-styles": "^3.3.0",
-    "@patternfly/react-tokens": "^2.5.3",
+    "@patternfly/react-styles": "^3.4.2",
+    "@patternfly/react-tokens": "^2.6.1",
     "emotion-theming": "^9.2.9",
     "react-emotion": "^9.2.9",
     "styled-system": "^3.1.11"
@@ -45,8 +46,17 @@
     "react": "^16.4.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "2.8.2",
-    "babel-core": "^6.26.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@patternfly/patternfly": "2.13.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",
     "enzyme": "3.9.0",
     "fs-extra": "^6.0.1",
diff --git a/packages/patternfly-4/react-styles/.babelrc b/packages/patternfly-4/react-styles/.babelrc
index 8ade66d8e14..25c4221a16d 100644
--- a/packages/patternfly-4/react-styles/.babelrc
+++ b/packages/patternfly-4/react-styles/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["../.babelrc.js"]
-}
+  "extends": "../.babelrc"
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-styles/.npmignore b/packages/patternfly-4/react-styles/.npmignore
index c8d6eb5deab..5344519a423 100644
--- a/packages/patternfly-4/react-styles/.npmignore
+++ b/packages/patternfly-4/react-styles/.npmignore
@@ -1,2 +1,6 @@
-src
-scripts
\ No newline at end of file
+build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-styles/CHANGELOG.md b/packages/patternfly-4/react-styles/CHANGELOG.md
index 0b512a80cc4..b0dd78f22cd 100644
--- a/packages/patternfly-4/react-styles/CHANGELOG.md
+++ b/packages/patternfly-4/react-styles/CHANGELOG.md
@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.4.1...@patternfly/react-styles@3.4.2) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [3.4.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.4.0...@patternfly/react-styles@3.4.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+# 3.4.0 (2019-06-13)
+
+
+### Bug Fixes
+
+* **topology:** Fixes JS dist for react-topology ([#2230](https://github.com/patternfly/patternfly-react/issues/2230)) ([337510a](https://github.com/patternfly/patternfly-react/commit/337510a))
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [3.3.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.3.2...@patternfly/react-styles@3.3.3) (2019-06-11)
+
+
+### Bug Fixes
+
+* **styles:** add sideeffects to react-styles ([#2207](https://github.com/patternfly/patternfly-react/issues/2207)) ([6365c33](https://github.com/patternfly/patternfly-react/commit/6365c33))
+
+
+
+
+
+## [3.3.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.3.1...@patternfly/react-styles@3.3.2) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 3.3.1 (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 # [3.3.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@3.2.4...@patternfly/react-styles@3.3.0) (2019-06-05)
 
 
diff --git a/packages/patternfly-4/react-styles/package.json b/packages/patternfly-4/react-styles/package.json
index d1b38536b59..125643bcf9f 100644
--- a/packages/patternfly-4/react-styles/package.json
+++ b/packages/patternfly-4/react-styles/package.json
@@ -1,10 +1,13 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "3.3.0",
+  "version": "3.4.2",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/js/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "description": "",
   "author": "Red Hat",
   "publishConfig": {
@@ -12,13 +15,12 @@
     "tag": "prerelease"
   },
   "scripts": {
-    "build": "yarn build:babel && node ./scripts/copyTS.js && yarn build:css && yarn build:types && node ./scripts/copyStyles.js",
-    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm && yarn build:babel:umd'",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q",
-    "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q",
-    "build:css": "node src/generateClasses.js",
-    "build:types": "tsc",
+    "build": "yarn build:babel && node ./scripts/copyTS.js && yarn build:css && node ./scripts/copyStyles.js",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/preset-env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
+    "build:css": "node src/generateClasses.js && tsc && node src/removeTS.js",
     "clean": "rimraf dist css",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose"
   },
@@ -38,8 +40,18 @@
     "typescript": "3.4.5"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "2.8.2",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@patternfly/patternfly": "2.13.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2"
   },
diff --git a/packages/patternfly-4/react-styles/src/generateClasses.js b/packages/patternfly-4/react-styles/src/generateClasses.js
index 980d3e5a6b8..b91ad5b6984 100644
--- a/packages/patternfly-4/react-styles/src/generateClasses.js
+++ b/packages/patternfly-4/react-styles/src/generateClasses.js
@@ -11,7 +11,7 @@ const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.c
 
 const cssFiles = glob.sync('**/*.css', {
   cwd: pfStylesDir,
-  ignore: ['assets/**']
+  ignore: ['assets/**', '*ie11*.css']
 });
 
 cssFiles.forEach(filePath => {
diff --git a/packages/patternfly-4/react-styles/src/removeTS.js b/packages/patternfly-4/react-styles/src/removeTS.js
new file mode 100644
index 00000000000..46ed245c357
--- /dev/null
+++ b/packages/patternfly-4/react-styles/src/removeTS.js
@@ -0,0 +1,5 @@
+/* eslint-disable global-require,import/no-dynamic-require */
+const glob = require('glob');
+const fs = require('fs');
+
+glob.sync('css/**/*.ts', { ignore: ['**/*.d.ts'] }).forEach(file => fs.unlinkSync(file));
diff --git a/packages/patternfly-4/react-table/.babelrc b/packages/patternfly-4/react-table/.babelrc
index 36d1937e56b..25c4221a16d 100644
--- a/packages/patternfly-4/react-table/.babelrc
+++ b/packages/patternfly-4/react-table/.babelrc
@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "../.babelrc.js"
-  ]
-}
+  "extends": "../.babelrc"
+}
\ No newline at end of file
diff --git a/packages/patternfly-4/react-table/.npmignore b/packages/patternfly-4/react-table/.npmignore
index 378eac25d31..5344519a423 100644
--- a/packages/patternfly-4/react-table/.npmignore
+++ b/packages/patternfly-4/react-table/.npmignore
@@ -1 +1,6 @@
 build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-table/CHANGELOG.md b/packages/patternfly-4/react-table/CHANGELOG.md
index 758970787a3..f433b043958 100644
--- a/packages/patternfly-4/react-table/CHANGELOG.md
+++ b/packages/patternfly-4/react-table/CHANGELOG.md
@@ -3,6 +3,236 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.13.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.9...@patternfly/react-table@2.13.10) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.8...@patternfly/react-table@2.13.9) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.7...@patternfly/react-table@2.13.8) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.6...@patternfly/react-table@2.13.7) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.5...@patternfly/react-table@2.13.6) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.3...@patternfly/react-table@2.13.5) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.3...@patternfly/react-table@2.13.4) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.2...@patternfly/react-table@2.13.3) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.13.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.1...@patternfly/react-table@2.13.2) (2019-06-14)
+
+
+### Bug Fixes
+
+* **react-icons:** add noVerticalAlign prop to d.ts file ([#2238](https://github.com/patternfly/patternfly-react/issues/2238)) ([c50143c](https://github.com/patternfly/patternfly-react/commit/c50143c)), closes [#2237](https://github.com/patternfly/patternfly-react/issues/2237)
+
+
+
+
+
+## [2.13.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.13.0...@patternfly/react-table@2.13.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+# [2.13.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.12.1...@patternfly/react-table@2.13.0) (2019-06-14)
+
+
+### Features
+
+* **PF4 Dropdown:** Wrap dropdown with context ([#2227](https://github.com/patternfly/patternfly-react/issues/2227)) ([5bb8051](https://github.com/patternfly/patternfly-react/commit/5bb8051))
+
+
+
+
+
+## [2.12.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.12.0...@patternfly/react-table@2.12.1) (2019-06-13)
+
+
+### Bug Fixes
+
+* **react-table:** collapse column icon behavior ([#2267](https://github.com/patternfly/patternfly-react/issues/2267)) ([eb0d436](https://github.com/patternfly/patternfly-react/commit/eb0d436))
+
+
+
+
+
+# [2.12.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.8...@patternfly/react-table@2.12.0) (2019-06-13)
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [2.11.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.7...@patternfly/react-table@2.11.8) (2019-06-13)
+
+
+### Bug Fixes
+
+* **types:** use ts type instead of js type ([#2248](https://github.com/patternfly/patternfly-react/issues/2248)) ([7b6468c](https://github.com/patternfly/patternfly-react/commit/7b6468c))
+
+
+
+
+
+## [2.11.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.6...@patternfly/react-table@2.11.7) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.11.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.5...@patternfly/react-table@2.11.6) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.11.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.4...@patternfly/react-table@2.11.5) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.11.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.3...@patternfly/react-table@2.11.4) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.11.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.2...@patternfly/react-table@2.11.3) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.11.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.1...@patternfly/react-table@2.11.2) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.11.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.11.0...@patternfly/react-table@2.11.1) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+# [2.11.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.5...@patternfly/react-table@2.11.0) (2019-06-10)
+
+
+### Features
+
+* **Table:** Add support for .pf-m-grid-2xl breakpoint ([#2206](https://github.com/patternfly/patternfly-react/issues/2206)) ([0f9ebf9](https://github.com/patternfly/patternfly-react/commit/0f9ebf9))
+
+
+
+
+
+## [2.10.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.4...@patternfly/react-table@2.10.5) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.10.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.3...@patternfly/react-table@2.10.4) (2019-06-10)
+
+
+### Bug Fixes
+
+* **react-table:** Fix error Unknown event handler property `onCollapse`. It will be ignored. ([#2195](https://github.com/patternfly/patternfly-react/issues/2195)) ([2cbdfb8](https://github.com/patternfly/patternfly-react/commit/2cbdfb8))
+* **react-table:** Some props of IRow should not required ([#2196](https://github.com/patternfly/patternfly-react/issues/2196)) ([343f928](https://github.com/patternfly/patternfly-react/commit/343f928))
+
+
+
+
+
+## [2.10.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.2...@patternfly/react-table@2.10.3) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## [2.10.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.1...@patternfly/react-table@2.10.2) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
 ## [2.10.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@2.10.0...@patternfly/react-table@2.10.1) (2019-06-06)
 
 **Note:** Version bump only for package @patternfly/react-table
diff --git a/packages/patternfly-4/react-table/README.md b/packages/patternfly-4/react-table/README.md
index b8baf4d33dc..f42f151a4eb 100644
--- a/packages/patternfly-4/react-table/README.md
+++ b/packages/patternfly-4/react-table/README.md
@@ -48,7 +48,7 @@ class SimpleTable extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      columns: [{ title: 'Repositories' }, 'Branches', { title: 'Pull requests' }, 'Workspaces', 'Last Commit'],
+      columns: [{ title: 'Repositories', props: null }, 'Branches', { title: 'Pull requests', props: null }, 'Workspaces', 'Last Commit'],
       rows: [['one', 'two', 'three', 'four', 'five']]
     };
   }
diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json
index e85e091ab33..b814c13fc99 100644
--- a/packages/patternfly-4/react-table/package.json
+++ b/packages/patternfly-4/react-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "2.10.1",
+  "version": "2.13.10",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -27,30 +27,40 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme",
   "dependencies": {
-    "@patternfly/patternfly": "2.8.2",
-    "@patternfly/react-core": "^3.36.1",
-    "@patternfly/react-icons": "^3.9.3",
-    "@patternfly/react-styles": "^3.3.0",
+    "@patternfly/patternfly": "2.13.0",
+    "@patternfly/react-core": "^3.48.5",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-styles": "^3.4.2",
+    "@patternfly/react-tokens": "^2.6.1",
     "classnames": "^2.2.5",
-    "exenv": "^1.2.2"
+    "exenv": "^1.2.2",
+    "lodash-es": "^4.2.1"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
-    "react-dom": "^15.6.2 || ^16.4.0",
-    "lodash-es": "4.x"
+    "react-dom": "^15.6.2 || ^16.4.0"
   },
   "scripts": {
     "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js",
     "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
-    "build:babel:cjs": "babel src --out-dir dist/js -q",
-    "build:babel:esm": "babel src --out-dir dist/esm -q",
-    "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd  --extensions '.js,.ts,.tsx' -q",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose"
   },
   "devDependencies": {
-    "@patternfly/react-tokens": "^2.5.3",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",
     "enzyme": "3.9.0",
     "fs-extra": "^6.0.1",
diff --git a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
index 9b3c17cc0db..6ffdc21ec7e 100644
--- a/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
+++ b/packages/patternfly-4/react-table/src/components/Table/BodyWrapper.js
@@ -7,7 +7,7 @@ import { mapOpenedRows } from './utils/headerUtils';
 // eslint-disable-next-line react/prefer-stateless-function
 class BodyWrapper extends React.Component {
   render() {
-    const { mappedRows, tbodyRef, ...props } = this.props;
+    const { mappedRows, tbodyRef, rows, onCollapse, ...props } = this.props;
     if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) {
       return (
         <React.Fragment>
diff --git a/packages/patternfly-4/react-table/src/components/Table/CollapseColumn.js b/packages/patternfly-4/react-table/src/components/Table/CollapseColumn.js
index 4c3c7e26359..ef7ffdcce11 100644
--- a/packages/patternfly-4/react-table/src/components/Table/CollapseColumn.js
+++ b/packages/patternfly-4/react-table/src/components/Table/CollapseColumn.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AngleDownIcon, AngleRightIcon } from '@patternfly/react-icons';
+import { AngleDownIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core';
 import styles from '@patternfly/react-styles/css/components/Table/table';
@@ -29,7 +29,7 @@ const CollapseColumn = ({ children, onToggle, isOpen, className, ...props }) =>
         onClick={onToggle}
         aria-expanded={isOpen}
       >
-        {isOpen ? <AngleDownIcon /> : <AngleRightIcon />}
+        <AngleDownIcon />
       </Button>
     )}
     {children}
diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts
index 4db02c5dee8..54008174738 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Table.d.ts
+++ b/packages/patternfly-4/react-table/src/components/Table/Table.d.ts
@@ -11,7 +11,8 @@ export const TableGridBreakpoint: {
   grid: 'grid',
   gridMd: 'grid-md',
   gridLg: 'grid-lg',
-  gridXl: 'grid-xl'
+  gridXl: 'grid-xl',
+  grid2xl: 'grid-2xl'
 };
 
 export const TableVariant: {
@@ -47,12 +48,12 @@ export interface IExtra extends IExtraData {
 }
 
 export interface ISortBy {
-  index?: Number;
+  index?: number;
   direction?: OneOf<typeof SortByDirection, keyof typeof SortByDirection>;
 }
 
 export interface IAction {
-  title: String;
+  title: string;
   onClick: (event: MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
 }
 
@@ -60,13 +61,18 @@ export interface ISeparator {
   isSeparator: Boolean
 }
 
+export interface IDecorator extends HTMLProps<HTMLElement> {
+  isVisible: boolean;
+  children?: React.ReactNode;
+}
+
 export interface ICell {
-  title: String;
-  transforms?: Array<Function>;
-  cellTransforms?: Array<Function>;
-  columnTransforms?: Array<Function>;
-  formatters?: Array<Function>;
-  cellFormatters?: Array<Function>;
+  title: string;
+  transforms?: ((value: any) => IDecorator)[];
+  cellTransforms?: ((value: any) => IDecorator)[];
+  columnTransforms?: ((value: any) => IDecorator)[];
+  formatters?: ((value: any) => IDecorator)[];
+  cellFormatters?: ((value: any) => IDecorator)[];
   props: any;
 }
 
@@ -77,9 +83,9 @@ export interface IRowCell {
 
 export interface IRow {
   cells: Array<ReactNode | IRowCell>;
-  isOpen: Boolean;
-  parent: Number;
-  props: any;
+  isOpen?: Boolean;
+  parent?: number;
+  props?: any;
   fullWidth?: Boolean;
   noPadding?: Boolean;
 }
@@ -100,13 +106,13 @@ export interface TableProps extends Omit<Omit<HTMLProps<HTMLTableElement>, 'onSe
   areActionsDisabled?: (rowData: IRowData, extraData: IExtraData) => boolean;
   header?: ReactNode;
   caption?: ReactNode;
-  rowLabeledBy?: String;
-  expandId?: String;
-  contentId?: String;
+  rowLabeledBy?: string;
+  expandId?: string;
+  contentId?: string;
   dropdownPosition?: OneOf<typeof DropdownPosition, keyof typeof DropdownPosition>;
   dropdownDirection?: OneOf<typeof DropdownDirection, keyof typeof DropdownDirection>;
-  rows: Array<IRow | Array<String>>;
-  cells: Array<ICell | String>;
+  rows: Array<IRow | Array<string>>;
+  cells: Array<ICell | string>;
   bodyWrapper?: Function;
   rowWrapper?: Function;
 }
diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.js b/packages/patternfly-4/react-table/src/components/Table/Table.js
index 302bd677e9f..9e5643b3298 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Table.js
+++ b/packages/patternfly-4/react-table/src/components/Table/Table.js
@@ -17,7 +17,8 @@ export const TableGridBreakpoint = {
   grid: 'grid',
   gridMd: 'grid-md',
   gridLg: 'grid-lg',
-  gridXl: 'grid-xl'
+  gridXl: 'grid-xl',
+  grid2xl: 'grid-2xl'
 };
 
 export const TableVariant = {
diff --git a/packages/patternfly-4/react-table/src/components/Table/Table.md b/packages/patternfly-4/react-table/src/components/Table/Table.md
index b16b3a5554f..c0ac8bf5fd8 100644
--- a/packages/patternfly-4/react-table/src/components/Table/Table.md
+++ b/packages/patternfly-4/react-table/src/components/Table/Table.md
@@ -763,8 +763,7 @@ class CollapsibleTable extends React.Component {
       columns: [
         {
           title: 'Header cell',
-          cellFormatters: [expandable],
-          cellTransforms: [headerCol()]
+          cellFormatters: [expandable]
         },
         'Branches',
         { title: 'Pull requests' },
diff --git a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap
index 847654317e7..6a94199e33a 100644
--- a/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap
+++ b/packages/patternfly-4/react-table/src/components/Table/__snapshots__/Table.test.js.snap
@@ -706,6 +706,7 @@ exports[`Actions table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -2406,8 +2407,6 @@ exports[`Actions table 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -3078,27 +3077,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-10"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -3109,52 +3164,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-10"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-10"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -3831,27 +3904,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-11"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -3862,52 +3991,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-11"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-11"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -4584,27 +4731,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-12"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -4615,52 +4818,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-12"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-12"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -5337,27 +5558,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-13"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -5368,52 +5645,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-13"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-13"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -6090,27 +6385,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-14"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -6121,52 +6472,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-14"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-14"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -6843,27 +7212,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-15"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -6874,52 +7299,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-15"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-15"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -7596,27 +8039,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-16"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -7627,52 +8126,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-16"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-16"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -8349,27 +8866,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-17"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -8380,52 +8953,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-17"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-17"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -9102,27 +9693,83 @@ exports[`Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-18"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -9133,52 +9780,70 @@ exports[`Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-18"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-18"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -9819,6 +10484,7 @@ exports[`Cell header table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -11464,8 +12130,6 @@ exports[`Cell header table 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -16011,6 +16675,7 @@ exports[`Collapsible nested table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -17731,8 +18396,6 @@ exports[`Collapsible nested table 1`] = `
               <tbody
                 className=""
                 key="tbody-0"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -18161,8 +18824,9 @@ exports[`Collapsible nested table 1`] = `
                                 tabIndex={null}
                                 type="button"
                               >
-                                <AngleRightIcon
+                                <AngleDownIcon
                                   color="currentColor"
+                                  noVerticalAlign={false}
                                   size="sm"
                                   title={null}
                                 >
@@ -18177,15 +18841,15 @@ exports[`Collapsible nested table 1`] = `
                                         "verticalAlign": "-0.125em",
                                       }
                                     }
-                                    viewBox="0 0 256 512"
+                                    viewBox="0 0 320 512"
                                     width="1em"
                                   >
                                     <path
-                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
                                       transform=""
                                     />
                                   </svg>
-                                </AngleRightIcon>
+                                </AngleDownIcon>
                               </button>
                             </Button>
                           </CollapseColumn>
@@ -18710,6 +19374,7 @@ exports[`Collapsible nested table 1`] = `
                               >
                                 <AngleDownIcon
                                   color="currentColor"
+                                  noVerticalAlign={false}
                                   size="sm"
                                   title={null}
                                 >
@@ -19293,8 +19958,6 @@ exports[`Collapsible nested table 1`] = `
               <tbody
                 className=""
                 key="tbody-1"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -19723,8 +20386,9 @@ exports[`Collapsible nested table 1`] = `
                                 tabIndex={null}
                                 type="button"
                               >
-                                <AngleRightIcon
+                                <AngleDownIcon
                                   color="currentColor"
+                                  noVerticalAlign={false}
                                   size="sm"
                                   title={null}
                                 >
@@ -19739,15 +20403,15 @@ exports[`Collapsible nested table 1`] = `
                                         "verticalAlign": "-0.125em",
                                       }
                                     }
-                                    viewBox="0 0 256 512"
+                                    viewBox="0 0 320 512"
                                     width="1em"
                                   >
                                     <path
-                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
                                       transform=""
                                     />
                                   </svg>
-                                </AngleRightIcon>
+                                </AngleDownIcon>
                               </button>
                             </Button>
                           </CollapseColumn>
@@ -20324,8 +20988,6 @@ exports[`Collapsible nested table 1`] = `
               <tbody
                 className=""
                 key="tbody-2"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -20824,8 +21486,6 @@ exports[`Collapsible nested table 1`] = `
               <tbody
                 className=""
                 key="tbody-3"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -21324,8 +21984,6 @@ exports[`Collapsible nested table 1`] = `
               <tbody
                 className=""
                 key="tbody-4"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -21824,8 +22482,6 @@ exports[`Collapsible nested table 1`] = `
               <tbody
                 className=""
                 key="tbody-5"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -23073,6 +23729,7 @@ exports[`Collapsible table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -24785,8 +25442,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className="pf-m-expanded"
                 key="tbody-0"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -25217,6 +25872,7 @@ exports[`Collapsible table 1`] = `
                               >
                                 <AngleDownIcon
                                   color="currentColor"
+                                  noVerticalAlign={false}
                                   size="sm"
                                   title={null}
                                 >
@@ -25816,8 +26472,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className=""
                 key="tbody-1"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -26316,8 +26970,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className=""
                 key="tbody-2"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -26746,8 +27398,9 @@ exports[`Collapsible table 1`] = `
                                 tabIndex={null}
                                 type="button"
                               >
-                                <AngleRightIcon
+                                <AngleDownIcon
                                   color="currentColor"
+                                  noVerticalAlign={false}
                                   size="sm"
                                   title={null}
                                 >
@@ -26762,15 +27415,15 @@ exports[`Collapsible table 1`] = `
                                         "verticalAlign": "-0.125em",
                                       }
                                     }
-                                    viewBox="0 0 256 512"
+                                    viewBox="0 0 320 512"
                                     width="1em"
                                   >
                                     <path
-                                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
                                       transform=""
                                     />
                                   </svg>
-                                </AngleRightIcon>
+                                </AngleDownIcon>
                               </button>
                             </Button>
                           </CollapseColumn>
@@ -27347,8 +28000,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className=""
                 key="tbody-3"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -27847,8 +28498,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className=""
                 key="tbody-4"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -28347,8 +28996,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className=""
                 key="tbody-5"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -28847,8 +29494,6 @@ exports[`Collapsible table 1`] = `
               <tbody
                 className=""
                 key="tbody-6"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -30271,8 +30916,6 @@ exports[`Compound Expandable table 1`] = `
               <tbody
                 className="pf-m-expanded"
                 key="tbody-0"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -30748,8 +31391,6 @@ exports[`Compound Expandable table 1`] = `
               <tbody
                 className=""
                 key="tbody-1"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -33507,8 +34148,6 @@ exports[`Header width table 1`] = `
               <tbody
                 className=""
                 key="tbody-0"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -34806,8 +35445,6 @@ exports[`Header width table 1`] = `
               <tbody
                 className=""
                 key="tbody-1"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -35671,8 +36308,6 @@ exports[`Header width table 1`] = `
               <tbody
                 className=""
                 key="tbody-2"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -36102,8 +36737,6 @@ exports[`Header width table 1`] = `
               <tbody
                 className=""
                 key="tbody-3"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -36533,8 +37166,6 @@ exports[`Header width table 1`] = `
               <tbody
                 className=""
                 key="tbody-4"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -36964,8 +37595,6 @@ exports[`Header width table 1`] = `
               <tbody
                 className=""
                 key="tbody-5"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -38153,6 +38782,7 @@ exports[`Selectable table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -39867,8 +40497,6 @@ exports[`Selectable table 1`] = `
               <tbody
                 className=""
                 key="tbody-0"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -41354,8 +41982,6 @@ exports[`Selectable table 1`] = `
               <tbody
                 className=""
                 key="tbody-1"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -42350,8 +42976,6 @@ exports[`Selectable table 1`] = `
               <tbody
                 className=""
                 key="tbody-2"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -42855,8 +43479,6 @@ exports[`Selectable table 1`] = `
               <tbody
                 className=""
                 key="tbody-3"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -43360,8 +43982,6 @@ exports[`Selectable table 1`] = `
               <tbody
                 className=""
                 key="tbody-4"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -43865,8 +44485,6 @@ exports[`Selectable table 1`] = `
               <tbody
                 className=""
                 key="tbody-5"
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -45327,6 +45945,7 @@ exports[`Simple Actions table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -47283,8 +47902,6 @@ exports[`Simple Actions table 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -48081,27 +48698,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-0"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -48112,52 +48785,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-0"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-0"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -48960,27 +49651,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-1"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -48991,52 +49738,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-1"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-1"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -49839,27 +50604,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-2"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -49870,52 +50691,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-2"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-2"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -50718,27 +51557,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-3"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -50749,52 +51644,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-3"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-3"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -51597,27 +52510,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-4"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -51628,52 +52597,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-4"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-4"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -52476,27 +53463,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-5"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -52507,52 +53550,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-5"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-5"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -53355,27 +54416,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-6"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -53386,52 +54503,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-6"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-6"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -54234,27 +55369,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-7"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -54265,52 +55456,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-7"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-7"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -55113,27 +56322,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={false}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-8"
-                                  isActive={false}
-                                  isDisabled={false}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -55144,52 +56409,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain"
-                                      disabled={false}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-8"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={false}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain"
+                                        disabled={false}
+                                        id="pf-toggle-id-8"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -55995,27 +57278,83 @@ exports[`Simple Actions table 1`] = `
                                 />
                               }
                             >
-                              <div
-                                className="pf-c-dropdown"
+                              <DropdownWithContext
+                                className=""
+                                direction="down"
+                                dropdownItems={
+                                  Array [
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={0}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Some action
+                                    </Item>,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={1}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      <div>
+                                        Another action
+                                      </div>
+                                    </Item>,
+                                    <Separator
+                                      className=""
+                                      component="a"
+                                      data-key={2}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                    />,
+                                    <Item
+                                      className=""
+                                      component="a"
+                                      data-key={3}
+                                      href="#"
+                                      isDisabled={false}
+                                      isHovered={false}
+                                      onClick={[Function]}
+                                    >
+                                      Third action
+                                    </Item>,
+                                  ]
+                                }
+                                isGrouped={false}
+                                isOpen={false}
+                                isPlain={true}
+                                onSelect={[Function]}
                                 onToggle={[Function]}
+                                position="right"
+                                toggle={
+                                  <Kebab
+                                    aria-label="Actions"
+                                    className=""
+                                    id=""
+                                    isActive={false}
+                                    isDisabled={true}
+                                    isFocused={false}
+                                    isHovered={false}
+                                    isOpen={false}
+                                    isPlain={false}
+                                    onToggle={[Function]}
+                                    parentRef={null}
+                                  />
+                                }
                               >
-                                <Kebab
-                                  aria-label="Actions"
-                                  ariaHasPopup={true}
-                                  className=""
-                                  id="pf-toggle-id-9"
-                                  isActive={false}
-                                  isDisabled={true}
-                                  isFocused={false}
-                                  isHovered={false}
-                                  isOpen={false}
-                                  isPlain={true}
-                                  key=".0"
-                                  onEnter={[Function]}
+                                <div
+                                  className="pf-c-dropdown"
                                   onToggle={[Function]}
-                                  parentRef={null}
                                 >
-                                  <Toggle
+                                  <Kebab
                                     aria-label="Actions"
                                     ariaHasPopup={true}
                                     className=""
@@ -56026,52 +57365,70 @@ exports[`Simple Actions table 1`] = `
                                     isHovered={false}
                                     isOpen={false}
                                     isPlain={true}
-                                    isSplitButton={false}
+                                    key=".0"
                                     onEnter={[Function]}
                                     onToggle={[Function]}
                                     parentRef={null}
-                                    type={null}
                                   >
-                                    <button
-                                      aria-expanded={false}
-                                      aria-haspopup={true}
+                                    <Toggle
                                       aria-label="Actions"
-                                      className="pf-c-dropdown__toggle pf-m-plain pf-m-disabled"
-                                      disabled={true}
+                                      ariaHasPopup={true}
+                                      className=""
                                       id="pf-toggle-id-9"
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      type="button"
+                                      isActive={false}
+                                      isDisabled={true}
+                                      isFocused={false}
+                                      isHovered={false}
+                                      isOpen={false}
+                                      isPlain={true}
+                                      isSplitButton={false}
+                                      onEnter={[Function]}
+                                      onToggle={[Function]}
+                                      parentRef={null}
+                                      type={null}
                                     >
-                                      <EllipsisVIcon
-                                        color="currentColor"
-                                        size="sm"
-                                        title={null}
+                                      <button
+                                        aria-expanded={false}
+                                        aria-haspopup={true}
+                                        aria-label="Actions"
+                                        className="pf-c-dropdown__toggle pf-m-plain pf-m-disabled"
+                                        disabled={true}
+                                        id="pf-toggle-id-9"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        type="button"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          aria-labelledby={null}
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          style={
-                                            Object {
-                                              "verticalAlign": "-0.125em",
-                                            }
-                                          }
-                                          viewBox="0 0 192 512"
-                                          width="1em"
+                                        <EllipsisVIcon
+                                          color="currentColor"
+                                          noVerticalAlign={false}
+                                          size="sm"
+                                          title={null}
                                         >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                            transform=""
-                                          />
-                                        </svg>
-                                      </EllipsisVIcon>
-                                    </button>
-                                  </Toggle>
-                                </Kebab>
-                              </div>
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-labelledby={null}
+                                            fill="currentColor"
+                                            height="1em"
+                                            role="img"
+                                            style={
+                                              Object {
+                                                "verticalAlign": "-0.125em",
+                                              }
+                                            }
+                                            viewBox="0 0 192 512"
+                                            width="1em"
+                                          >
+                                            <path
+                                              d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                              transform=""
+                                            />
+                                          </svg>
+                                        </EllipsisVIcon>
+                                      </button>
+                                    </Toggle>
+                                  </Kebab>
+                                </div>
+                              </DropdownWithContext>
                             </Dropdown>
                           </ActionsColumn>
                         </td>
@@ -58301,8 +59658,6 @@ exports[`Simple table aria-label 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -64298,8 +65653,6 @@ exports[`Simple table caption 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -68645,9 +69998,6010 @@ exports[`Simple table header 1`] = `
                         "onCollapse": null,
                         "onExpand": null,
                         "onSelect": undefined,
-                        "onSort": undefined,
+                        "onSort": undefined,
+                        "rowLabeledBy": "simple-node",
+                        "sortBy": undefined,
+                      },
+                      "header": Object {
+                        "formatters": Array [],
+                        "label": "Last Commit",
+                        "transforms": Array [
+                          [Function],
+                          [Function],
+                        ],
+                      },
+                      "property": "last-commit",
+                      "props": Object {
+                        "data-key": 4,
+                        "data-label": "Last Commit",
+                      },
+                    },
+                  ]
+                }
+                rowIndex={0}
+              >
+                <tr>
+                  <HeaderCell
+                    component="th"
+                    data-key={0}
+                    data-label="Header cell"
+                    key="0-header"
+                    scope="col"
+                    textCenter={false}
+                  >
+                    <th
+                      className=""
+                      data-key={0}
+                      scope="col"
+                    >
+                      Header cell
+                    </th>
+                  </HeaderCell>
+                  <HeaderCell
+                    component="th"
+                    data-key={1}
+                    data-label="Branches"
+                    key="1-header"
+                    scope="col"
+                    textCenter={false}
+                  >
+                    <th
+                      className=""
+                      data-key={1}
+                      scope="col"
+                    >
+                      Branches
+                    </th>
+                  </HeaderCell>
+                  <HeaderCell
+                    component="th"
+                    data-key={2}
+                    data-label="Pull requests"
+                    key="2-header"
+                    scope="col"
+                    textCenter={false}
+                  >
+                    <th
+                      className=""
+                      data-key={2}
+                      scope="col"
+                    >
+                      Pull requests
+                    </th>
+                  </HeaderCell>
+                  <HeaderCell
+                    component="th"
+                    data-key={3}
+                    data-label="Workspaces"
+                    key="3-header"
+                    scope="col"
+                    textCenter={false}
+                  >
+                    <th
+                      className=""
+                      data-key={3}
+                      scope="col"
+                    >
+                      Workspaces
+                    </th>
+                  </HeaderCell>
+                  <HeaderCell
+                    component="th"
+                    data-key={4}
+                    data-label="Last Commit"
+                    key="4-header"
+                    scope="col"
+                    textCenter={false}
+                  >
+                    <th
+                      className=""
+                      data-key={4}
+                      scope="col"
+                    >
+                      Last Commit
+                    </th>
+                  </HeaderCell>
+                </tr>
+              </HeaderRow>
+            </thead>
+          </Header>
+        </ContextHeader>
+      </TableHeader>
+      <TableBody
+        className=""
+        onRowClick={[Function]}
+        rowKey="id"
+      >
+        <ContextBody
+          className=""
+          headerData={
+            Array [
+              Object {
+                "cell": Object {
+                  "formatters": Array [
+                    [Function],
+                  ],
+                  "transforms": Array [
+                    [Function],
+                  ],
+                },
+                "data": undefined,
+                "extraParams": Object {
+                  "actionResolver": undefined,
+                  "actions": undefined,
+                  "allRowsSelected": false,
+                  "areActionsDisabled": undefined,
+                  "contentId": "expanded-content",
+                  "dropdownDirection": "down",
+                  "dropdownPosition": "right",
+                  "expandId": "expandable-toggle",
+                  "firstUserColumnIndex": 0,
+                  "onCollapse": null,
+                  "onExpand": null,
+                  "onSelect": undefined,
+                  "onSort": undefined,
+                  "rowLabeledBy": "simple-node",
+                  "sortBy": undefined,
+                },
+                "header": Object {
+                  "formatters": Array [],
+                  "label": "Header cell",
+                  "transforms": Array [
+                    [Function],
+                    [Function],
+                  ],
+                },
+                "property": "header-cell",
+                "props": Object {
+                  "data-key": 0,
+                  "data-label": "Header cell",
+                },
+              },
+              Object {
+                "cell": Object {
+                  "formatters": Array [
+                    [Function],
+                  ],
+                  "transforms": Array [
+                    [Function],
+                  ],
+                },
+                "data": undefined,
+                "extraParams": Object {
+                  "actionResolver": undefined,
+                  "actions": undefined,
+                  "allRowsSelected": false,
+                  "areActionsDisabled": undefined,
+                  "contentId": "expanded-content",
+                  "dropdownDirection": "down",
+                  "dropdownPosition": "right",
+                  "expandId": "expandable-toggle",
+                  "firstUserColumnIndex": 0,
+                  "onCollapse": null,
+                  "onExpand": null,
+                  "onSelect": undefined,
+                  "onSort": undefined,
+                  "rowLabeledBy": "simple-node",
+                  "sortBy": undefined,
+                },
+                "header": Object {
+                  "formatters": Array [],
+                  "label": "Branches",
+                  "transforms": Array [
+                    [Function],
+                    [Function],
+                  ],
+                },
+                "property": "branches",
+                "props": Object {
+                  "data-key": 1,
+                  "data-label": "Branches",
+                },
+              },
+              Object {
+                "cell": Object {
+                  "formatters": Array [
+                    [Function],
+                  ],
+                  "transforms": Array [
+                    [Function],
+                  ],
+                },
+                "data": undefined,
+                "extraParams": Object {
+                  "actionResolver": undefined,
+                  "actions": undefined,
+                  "allRowsSelected": false,
+                  "areActionsDisabled": undefined,
+                  "contentId": "expanded-content",
+                  "dropdownDirection": "down",
+                  "dropdownPosition": "right",
+                  "expandId": "expandable-toggle",
+                  "firstUserColumnIndex": 0,
+                  "onCollapse": null,
+                  "onExpand": null,
+                  "onSelect": undefined,
+                  "onSort": undefined,
+                  "rowLabeledBy": "simple-node",
+                  "sortBy": undefined,
+                },
+                "header": Object {
+                  "formatters": Array [],
+                  "label": "Pull requests",
+                  "transforms": Array [
+                    [Function],
+                    [Function],
+                  ],
+                },
+                "property": "pull-requests",
+                "props": Object {
+                  "data-key": 2,
+                  "data-label": "Pull requests",
+                },
+              },
+              Object {
+                "cell": Object {
+                  "formatters": Array [
+                    [Function],
+                  ],
+                  "transforms": Array [
+                    [Function],
+                  ],
+                },
+                "data": undefined,
+                "extraParams": Object {
+                  "actionResolver": undefined,
+                  "actions": undefined,
+                  "allRowsSelected": false,
+                  "areActionsDisabled": undefined,
+                  "contentId": "expanded-content",
+                  "dropdownDirection": "down",
+                  "dropdownPosition": "right",
+                  "expandId": "expandable-toggle",
+                  "firstUserColumnIndex": 0,
+                  "onCollapse": null,
+                  "onExpand": null,
+                  "onSelect": undefined,
+                  "onSort": undefined,
+                  "rowLabeledBy": "simple-node",
+                  "sortBy": undefined,
+                },
+                "header": Object {
+                  "formatters": Array [],
+                  "label": "Workspaces",
+                  "transforms": Array [
+                    [Function],
+                    [Function],
+                  ],
+                },
+                "property": "workspaces",
+                "props": Object {
+                  "data-key": 3,
+                  "data-label": "Workspaces",
+                },
+              },
+              Object {
+                "cell": Object {
+                  "formatters": Array [
+                    [Function],
+                  ],
+                  "transforms": Array [
+                    [Function],
+                  ],
+                },
+                "data": undefined,
+                "extraParams": Object {
+                  "actionResolver": undefined,
+                  "actions": undefined,
+                  "allRowsSelected": false,
+                  "areActionsDisabled": undefined,
+                  "contentId": "expanded-content",
+                  "dropdownDirection": "down",
+                  "dropdownPosition": "right",
+                  "expandId": "expandable-toggle",
+                  "firstUserColumnIndex": 0,
+                  "onCollapse": null,
+                  "onExpand": null,
+                  "onSelect": undefined,
+                  "onSort": undefined,
+                  "rowLabeledBy": "simple-node",
+                  "sortBy": undefined,
+                },
+                "header": Object {
+                  "formatters": Array [],
+                  "label": "Last Commit",
+                  "transforms": Array [
+                    [Function],
+                    [Function],
+                  ],
+                },
+                "property": "last-commit",
+                "props": Object {
+                  "data-key": 4,
+                  "data-label": "Last Commit",
+                },
+              },
+            ]
+          }
+          onRow={[Function]}
+          onRowClick={[Function]}
+          rowKey="id"
+          rows={
+            Array [
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+              Object {
+                "cells": Array [
+                  "one",
+                  "two",
+                  "three",
+                  "four",
+                  "five",
+                ],
+              },
+            ]
+          }
+        >
+          <Body
+            className=""
+            mappedRows={
+              Array [
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 0,
+                  "isExpanded": undefined,
+                  "isFirst": true,
+                  "isFirstVisible": true,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 1,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 2,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 3,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 4,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 5,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 6,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 7,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 8,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": true,
+                  "isLastVisible": true,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+              ]
+            }
+            onRow={[Function]}
+            rowKey="id"
+            rows={
+              Array [
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 0,
+                  "isExpanded": undefined,
+                  "isFirst": true,
+                  "isFirstVisible": true,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 1,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 2,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 3,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 4,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 5,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 6,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 7,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": false,
+                  "isLastVisible": false,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+                Object {
+                  "branches": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "two",
+                  },
+                  "cells": Array [
+                    "one",
+                    "two",
+                    "three",
+                    "four",
+                    "five",
+                  ],
+                  "header-cell": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "one",
+                  },
+                  "id": 8,
+                  "isExpanded": undefined,
+                  "isFirst": false,
+                  "isFirstVisible": false,
+                  "isLast": true,
+                  "isLastVisible": true,
+                  "last-commit": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "five",
+                  },
+                  "pull-requests": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "three",
+                  },
+                  "workspaces": Object {
+                    "props": Object {
+                      "isVisible": true,
+                    },
+                    "title": "four",
+                  },
+                },
+              ]
+            }
+          >
+            <BodyWrapper
+              className=""
+              mappedRows={
+                Array [
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 0,
+                    "isExpanded": undefined,
+                    "isFirst": true,
+                    "isFirstVisible": true,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 1,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 2,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 3,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 4,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 5,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 6,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 7,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": false,
+                    "isLastVisible": false,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                  Object {
+                    "branches": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "two",
+                    },
+                    "cells": Array [
+                      "one",
+                      "two",
+                      "three",
+                      "four",
+                      "five",
+                    ],
+                    "header-cell": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "one",
+                    },
+                    "id": 8,
+                    "isExpanded": undefined,
+                    "isFirst": false,
+                    "isFirstVisible": false,
+                    "isLast": true,
+                    "isLastVisible": true,
+                    "last-commit": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "five",
+                    },
+                    "pull-requests": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "three",
+                    },
+                    "workspaces": Object {
+                      "props": Object {
+                        "isVisible": true,
+                      },
+                      "title": "four",
+                    },
+                  },
+                ]
+              }
+              onCollapse={null}
+              rows={Array []}
+              tbodyRef={null}
+            >
+              <tbody
+                className=""
+              >
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="0-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 0,
+                      "isExpanded": undefined,
+                      "isFirst": true,
+                      "isFirstVisible": true,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={0}
+                  rowKey="0-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 0,
+                        "isExpanded": undefined,
+                        "isFirst": true,
+                        "isFirstVisible": true,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 0,
+                        "rowKey": "0-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="1-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 1,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={1}
+                  rowKey="1-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 1,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 1,
+                        "rowKey": "1-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="2-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 2,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={2}
+                  rowKey="2-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 2,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 2,
+                        "rowKey": "2-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="3-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 3,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={3}
+                  rowKey="3-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 3,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 3,
+                        "rowKey": "3-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="4-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 4,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={4}
+                  rowKey="4-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 4,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 4,
+                        "rowKey": "4-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="5-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 5,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={5}
+                  rowKey="5-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 5,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 5,
+                        "rowKey": "5-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="6-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 6,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={6}
+                  rowKey="6-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 6,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 6,
+                        "rowKey": "6-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="7-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 7,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": false,
+                      "isLastVisible": false,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={7}
+                  rowKey="7-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 7,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": false,
+                        "isLastVisible": false,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 7,
+                        "rowKey": "7-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+                <BodyRow
+                  columns={
+                    Array [
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Header cell",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "header-cell",
+                        "props": Object {
+                          "data-key": 0,
+                          "data-label": "Header cell",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Branches",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "branches",
+                        "props": Object {
+                          "data-key": 1,
+                          "data-label": "Branches",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Pull requests",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "pull-requests",
+                        "props": Object {
+                          "data-key": 2,
+                          "data-label": "Pull requests",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Workspaces",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "workspaces",
+                        "props": Object {
+                          "data-key": 3,
+                          "data-label": "Workspaces",
+                        },
+                      },
+                      Object {
+                        "cell": Object {
+                          "formatters": Array [
+                            [Function],
+                          ],
+                          "transforms": Array [
+                            [Function],
+                          ],
+                        },
+                        "data": undefined,
+                        "extraParams": Object {
+                          "actionResolver": undefined,
+                          "actions": undefined,
+                          "allRowsSelected": false,
+                          "areActionsDisabled": undefined,
+                          "contentId": "expanded-content",
+                          "dropdownDirection": "down",
+                          "dropdownPosition": "right",
+                          "expandId": "expandable-toggle",
+                          "firstUserColumnIndex": 0,
+                          "onCollapse": null,
+                          "onExpand": null,
+                          "onSelect": undefined,
+                          "onSort": undefined,
+                          "rowLabeledBy": "simple-node",
+                          "sortBy": undefined,
+                        },
+                        "header": Object {
+                          "formatters": Array [],
+                          "label": "Last Commit",
+                          "transforms": Array [
+                            [Function],
+                            [Function],
+                          ],
+                        },
+                        "property": "last-commit",
+                        "props": Object {
+                          "data-key": 4,
+                          "data-label": "Last Commit",
+                        },
+                      },
+                    ]
+                  }
+                  key="8-row"
+                  onRow={[Function]}
+                  renderers={
+                    Object {
+                      "cell": [Function],
+                      "row": [Function],
+                      "wrapper": [Function],
+                    }
+                  }
+                  rowData={
+                    Object {
+                      "branches": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "two",
+                      },
+                      "cells": Array [
+                        "one",
+                        "two",
+                        "three",
+                        "four",
+                        "five",
+                      ],
+                      "header-cell": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "one",
+                      },
+                      "id": 8,
+                      "isExpanded": undefined,
+                      "isFirst": false,
+                      "isFirstVisible": false,
+                      "isLast": true,
+                      "isLastVisible": true,
+                      "last-commit": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "five",
+                      },
+                      "pull-requests": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "three",
+                      },
+                      "workspaces": Object {
+                        "props": Object {
+                          "isVisible": true,
+                        },
+                        "title": "four",
+                      },
+                    }
+                  }
+                  rowIndex={8}
+                  rowKey="8-row"
+                >
+                  <RowWrapper
+                    className=""
+                    onMouseDown={[Function]}
+                    row={
+                      Object {
+                        "branches": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "two",
+                        },
+                        "cells": Array [
+                          "one",
+                          "two",
+                          "three",
+                          "four",
+                          "five",
+                        ],
+                        "header-cell": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "one",
+                        },
+                        "id": 8,
+                        "isExpanded": undefined,
+                        "isFirst": false,
+                        "isFirstVisible": false,
+                        "isLast": true,
+                        "isLastVisible": true,
+                        "last-commit": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "five",
+                        },
+                        "pull-requests": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "three",
+                        },
+                        "workspaces": Object {
+                          "props": Object {
+                            "isVisible": true,
+                          },
+                          "title": "four",
+                        },
+                      }
+                    }
+                    rowProps={
+                      Object {
+                        "rowIndex": 8,
+                        "rowKey": "8-row",
+                      }
+                    }
+                  >
+                    <tr
+                      className=""
+                      hidden={false}
+                      onMouseDown={[Function]}
+                    >
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={0}
+                        data-label="Header cell"
+                        isVisible={true}
+                        key="0-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={0}
+                          data-label="Header cell"
+                        >
+                          one
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={1}
+                        data-label="Branches"
+                        isVisible={true}
+                        key="1-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={1}
+                          data-label="Branches"
+                        >
+                          two
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={2}
+                        data-label="Pull requests"
+                        isVisible={true}
+                        key="2-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={2}
+                          data-label="Pull requests"
+                        >
+                          three
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={3}
+                        data-label="Workspaces"
+                        isVisible={true}
+                        key="3-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={3}
+                          data-label="Workspaces"
+                        >
+                          four
+                        </td>
+                      </BodyCell>
+                      <BodyCell
+                        ariaControls=""
+                        component="td"
+                        data-key={4}
+                        data-label="Last Commit"
+                        isVisible={true}
+                        key="4-cell"
+                        textCenter={false}
+                      >
+                        <td
+                          className=""
+                          data-key={4}
+                          data-label="Last Commit"
+                        >
+                          five
+                        </td>
+                      </BodyCell>
+                    </tr>
+                  </RowWrapper>
+                </BodyRow>
+              </tbody>
+            </BodyWrapper>
+          </Body>
+        </ContextBody>
+      </TableBody>
+    </table>
+  </Provider>
+</Table>
+`;
+
+exports[`Sortable table 1`] = `
+<Table
+  aria-label="Aria labeled"
+  borders={true}
+  cells={
+    Array [
+      Object {
+        "title": "Header cell",
+        "transforms": Array [
+          [Function],
+        ],
+      },
+      "Branches",
+      Object {
+        "title": "Pull requests",
+      },
+      "Workspaces",
+      Object {
+        "title": "Last Commit",
+      },
+    ]
+  }
+  className=""
+  contentId="expanded-content"
+  dropdownDirection="down"
+  dropdownPosition="right"
+  expandId="expandable-toggle"
+  gridBreakPoint="grid-md"
+  onCollapse={null}
+  onExpand={null}
+  onSort={[Function]}
+  role="grid"
+  rowLabeledBy="simple-node"
+  rows={
+    Array [
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+      Object {
+        "cells": Array [
+          "one",
+          "two",
+          "three",
+          "four",
+          "five",
+        ],
+      },
+    ]
+  }
+  sortBy={Object {}}
+  variant={null}
+>
+  <Provider
+    aria-label="Aria labeled"
+    className="pf-c-table pf-m-grid-md"
+    columns={
+      Array [
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "transforms": Array [
+              [Function],
+            ],
+          },
+          "data": undefined,
+          "extraParams": Object {
+            "actionResolver": undefined,
+            "actions": undefined,
+            "allRowsSelected": false,
+            "areActionsDisabled": undefined,
+            "contentId": "expanded-content",
+            "dropdownDirection": "down",
+            "dropdownPosition": "right",
+            "expandId": "expandable-toggle",
+            "firstUserColumnIndex": 0,
+            "onCollapse": null,
+            "onExpand": null,
+            "onSelect": undefined,
+            "onSort": [Function],
+            "rowLabeledBy": "simple-node",
+            "sortBy": Object {},
+          },
+          "header": Object {
+            "formatters": Array [],
+            "label": "Header cell",
+            "transforms": Array [
+              [Function],
+              [Function],
+              [Function],
+            ],
+          },
+          "property": "header-cell",
+          "props": Object {
+            "data-key": 0,
+            "data-label": "Header cell",
+          },
+        },
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "transforms": Array [
+              [Function],
+            ],
+          },
+          "data": undefined,
+          "extraParams": Object {
+            "actionResolver": undefined,
+            "actions": undefined,
+            "allRowsSelected": false,
+            "areActionsDisabled": undefined,
+            "contentId": "expanded-content",
+            "dropdownDirection": "down",
+            "dropdownPosition": "right",
+            "expandId": "expandable-toggle",
+            "firstUserColumnIndex": 0,
+            "onCollapse": null,
+            "onExpand": null,
+            "onSelect": undefined,
+            "onSort": [Function],
+            "rowLabeledBy": "simple-node",
+            "sortBy": Object {},
+          },
+          "header": Object {
+            "formatters": Array [],
+            "label": "Branches",
+            "transforms": Array [
+              [Function],
+              [Function],
+            ],
+          },
+          "property": "branches",
+          "props": Object {
+            "data-key": 1,
+            "data-label": "Branches",
+          },
+        },
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "transforms": Array [
+              [Function],
+            ],
+          },
+          "data": undefined,
+          "extraParams": Object {
+            "actionResolver": undefined,
+            "actions": undefined,
+            "allRowsSelected": false,
+            "areActionsDisabled": undefined,
+            "contentId": "expanded-content",
+            "dropdownDirection": "down",
+            "dropdownPosition": "right",
+            "expandId": "expandable-toggle",
+            "firstUserColumnIndex": 0,
+            "onCollapse": null,
+            "onExpand": null,
+            "onSelect": undefined,
+            "onSort": [Function],
+            "rowLabeledBy": "simple-node",
+            "sortBy": Object {},
+          },
+          "header": Object {
+            "formatters": Array [],
+            "label": "Pull requests",
+            "transforms": Array [
+              [Function],
+              [Function],
+            ],
+          },
+          "property": "pull-requests",
+          "props": Object {
+            "data-key": 2,
+            "data-label": "Pull requests",
+          },
+        },
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "transforms": Array [
+              [Function],
+            ],
+          },
+          "data": undefined,
+          "extraParams": Object {
+            "actionResolver": undefined,
+            "actions": undefined,
+            "allRowsSelected": false,
+            "areActionsDisabled": undefined,
+            "contentId": "expanded-content",
+            "dropdownDirection": "down",
+            "dropdownPosition": "right",
+            "expandId": "expandable-toggle",
+            "firstUserColumnIndex": 0,
+            "onCollapse": null,
+            "onExpand": null,
+            "onSelect": undefined,
+            "onSort": [Function],
+            "rowLabeledBy": "simple-node",
+            "sortBy": Object {},
+          },
+          "header": Object {
+            "formatters": Array [],
+            "label": "Workspaces",
+            "transforms": Array [
+              [Function],
+              [Function],
+            ],
+          },
+          "property": "workspaces",
+          "props": Object {
+            "data-key": 3,
+            "data-label": "Workspaces",
+          },
+        },
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "transforms": Array [
+              [Function],
+            ],
+          },
+          "data": undefined,
+          "extraParams": Object {
+            "actionResolver": undefined,
+            "actions": undefined,
+            "allRowsSelected": false,
+            "areActionsDisabled": undefined,
+            "contentId": "expanded-content",
+            "dropdownDirection": "down",
+            "dropdownPosition": "right",
+            "expandId": "expandable-toggle",
+            "firstUserColumnIndex": 0,
+            "onCollapse": null,
+            "onExpand": null,
+            "onSelect": undefined,
+            "onSort": [Function],
+            "rowLabeledBy": "simple-node",
+            "sortBy": Object {},
+          },
+          "header": Object {
+            "formatters": Array [],
+            "label": "Last Commit",
+            "transforms": Array [
+              [Function],
+              [Function],
+            ],
+          },
+          "property": "last-commit",
+          "props": Object {
+            "data-key": 4,
+            "data-label": "Last Commit",
+          },
+        },
+      ]
+    }
+    renderers={
+      Object {
+        "body": Object {
+          "cell": [Function],
+          "row": [Function],
+          "wrapper": [Function],
+        },
+        "header": Object {
+          "cell": [Function],
+        },
+      }
+    }
+    role="grid"
+  >
+    <table
+      aria-label="Aria labeled"
+      className="pf-c-table pf-m-grid-md"
+      role="grid"
+    >
+      <TableHeader
+        className=""
+      >
+        <ContextHeader
+          className=""
+        >
+          <Header
+            className=""
+          >
+            <thead
+              className=""
+            >
+              <HeaderRow
+                key="0-header-row"
+                onRow={[Function]}
+                renderers={
+                  Object {
+                    "cell": [Function],
+                    "row": "tr",
+                    "wrapper": "thead",
+                  }
+                }
+                rowData={
+                  Array [
+                    Object {
+                      "cell": Object {
+                        "formatters": Array [
+                          [Function],
+                        ],
+                        "transforms": Array [
+                          [Function],
+                        ],
+                      },
+                      "data": undefined,
+                      "extraParams": Object {
+                        "actionResolver": undefined,
+                        "actions": undefined,
+                        "allRowsSelected": false,
+                        "areActionsDisabled": undefined,
+                        "contentId": "expanded-content",
+                        "dropdownDirection": "down",
+                        "dropdownPosition": "right",
+                        "expandId": "expandable-toggle",
+                        "firstUserColumnIndex": 0,
+                        "onCollapse": null,
+                        "onExpand": null,
+                        "onSelect": undefined,
+                        "onSort": [Function],
+                        "rowLabeledBy": "simple-node",
+                        "sortBy": Object {},
+                      },
+                      "header": Object {
+                        "formatters": Array [],
+                        "label": "Header cell",
+                        "transforms": Array [
+                          [Function],
+                          [Function],
+                          [Function],
+                        ],
+                      },
+                      "property": "header-cell",
+                      "props": Object {
+                        "data-key": 0,
+                        "data-label": "Header cell",
+                      },
+                    },
+                    Object {
+                      "cell": Object {
+                        "formatters": Array [
+                          [Function],
+                        ],
+                        "transforms": Array [
+                          [Function],
+                        ],
+                      },
+                      "data": undefined,
+                      "extraParams": Object {
+                        "actionResolver": undefined,
+                        "actions": undefined,
+                        "allRowsSelected": false,
+                        "areActionsDisabled": undefined,
+                        "contentId": "expanded-content",
+                        "dropdownDirection": "down",
+                        "dropdownPosition": "right",
+                        "expandId": "expandable-toggle",
+                        "firstUserColumnIndex": 0,
+                        "onCollapse": null,
+                        "onExpand": null,
+                        "onSelect": undefined,
+                        "onSort": [Function],
+                        "rowLabeledBy": "simple-node",
+                        "sortBy": Object {},
+                      },
+                      "header": Object {
+                        "formatters": Array [],
+                        "label": "Branches",
+                        "transforms": Array [
+                          [Function],
+                          [Function],
+                        ],
+                      },
+                      "property": "branches",
+                      "props": Object {
+                        "data-key": 1,
+                        "data-label": "Branches",
+                      },
+                    },
+                    Object {
+                      "cell": Object {
+                        "formatters": Array [
+                          [Function],
+                        ],
+                        "transforms": Array [
+                          [Function],
+                        ],
+                      },
+                      "data": undefined,
+                      "extraParams": Object {
+                        "actionResolver": undefined,
+                        "actions": undefined,
+                        "allRowsSelected": false,
+                        "areActionsDisabled": undefined,
+                        "contentId": "expanded-content",
+                        "dropdownDirection": "down",
+                        "dropdownPosition": "right",
+                        "expandId": "expandable-toggle",
+                        "firstUserColumnIndex": 0,
+                        "onCollapse": null,
+                        "onExpand": null,
+                        "onSelect": undefined,
+                        "onSort": [Function],
+                        "rowLabeledBy": "simple-node",
+                        "sortBy": Object {},
+                      },
+                      "header": Object {
+                        "formatters": Array [],
+                        "label": "Pull requests",
+                        "transforms": Array [
+                          [Function],
+                          [Function],
+                        ],
+                      },
+                      "property": "pull-requests",
+                      "props": Object {
+                        "data-key": 2,
+                        "data-label": "Pull requests",
+                      },
+                    },
+                    Object {
+                      "cell": Object {
+                        "formatters": Array [
+                          [Function],
+                        ],
+                        "transforms": Array [
+                          [Function],
+                        ],
+                      },
+                      "data": undefined,
+                      "extraParams": Object {
+                        "actionResolver": undefined,
+                        "actions": undefined,
+                        "allRowsSelected": false,
+                        "areActionsDisabled": undefined,
+                        "contentId": "expanded-content",
+                        "dropdownDirection": "down",
+                        "dropdownPosition": "right",
+                        "expandId": "expandable-toggle",
+                        "firstUserColumnIndex": 0,
+                        "onCollapse": null,
+                        "onExpand": null,
+                        "onSelect": undefined,
+                        "onSort": [Function],
+                        "rowLabeledBy": "simple-node",
+                        "sortBy": Object {},
+                      },
+                      "header": Object {
+                        "formatters": Array [],
+                        "label": "Workspaces",
+                        "transforms": Array [
+                          [Function],
+                          [Function],
+                        ],
+                      },
+                      "property": "workspaces",
+                      "props": Object {
+                        "data-key": 3,
+                        "data-label": "Workspaces",
+                      },
+                    },
+                    Object {
+                      "cell": Object {
+                        "formatters": Array [
+                          [Function],
+                        ],
+                        "transforms": Array [
+                          [Function],
+                        ],
+                      },
+                      "data": undefined,
+                      "extraParams": Object {
+                        "actionResolver": undefined,
+                        "actions": undefined,
+                        "allRowsSelected": false,
+                        "areActionsDisabled": undefined,
+                        "contentId": "expanded-content",
+                        "dropdownDirection": "down",
+                        "dropdownPosition": "right",
+                        "expandId": "expandable-toggle",
+                        "firstUserColumnIndex": 0,
+                        "onCollapse": null,
+                        "onExpand": null,
+                        "onSelect": undefined,
+                        "onSort": [Function],
                         "rowLabeledBy": "simple-node",
-                        "sortBy": undefined,
+                        "sortBy": Object {},
                       },
                       "header": Object {
                         "formatters": Array [],
@@ -68669,6 +76023,8 @@ exports[`Simple table header 1`] = `
               >
                 <tr>
                   <HeaderCell
+                    aria-sort="none"
+                    className="pf-c-table__sort"
                     component="th"
                     data-key={0}
                     data-label="Header cell"
@@ -68677,11 +76033,54 @@ exports[`Simple table header 1`] = `
                     textCenter={false}
                   >
                     <th
-                      className=""
+                      aria-sort="none"
+                      className="pf-c-table__sort"
                       data-key={0}
                       scope="col"
                     >
-                      Header cell
+                      <SortColumn
+                        className="pf-c-button pf-m-plain"
+                        isSortedBy={false}
+                        onSort={[Function]}
+                        sortDirection=""
+                      >
+                        <button
+                          className="pf-c-button pf-m-plain"
+                          onClick={[Function]}
+                        >
+                          Header cell
+                          <span
+                            className="pf-c-table__sort-indicator"
+                          >
+                            <ArrowsAltVIcon
+                              color="currentColor"
+                              noVerticalAlign={false}
+                              size="sm"
+                              title={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                aria-labelledby={null}
+                                fill="currentColor"
+                                height="1em"
+                                role="img"
+                                style={
+                                  Object {
+                                    "verticalAlign": "-0.125em",
+                                  }
+                                }
+                                viewBox="0 0 256 512"
+                                width="1em"
+                              >
+                                <path
+                                  d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"
+                                  transform=""
+                                />
+                              </svg>
+                            </ArrowsAltVIcon>
+                          </span>
+                        </button>
+                      </SortColumn>
                     </th>
                   </HeaderCell>
                   <HeaderCell
@@ -68786,9 +76185,9 @@ exports[`Simple table header 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": undefined,
+                  "onSort": [Function],
                   "rowLabeledBy": "simple-node",
-                  "sortBy": undefined,
+                  "sortBy": Object {},
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -68796,6 +76195,7 @@ exports[`Simple table header 1`] = `
                   "transforms": Array [
                     [Function],
                     [Function],
+                    [Function],
                   ],
                 },
                 "property": "header-cell",
@@ -68827,9 +76227,9 @@ exports[`Simple table header 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": undefined,
+                  "onSort": [Function],
                   "rowLabeledBy": "simple-node",
-                  "sortBy": undefined,
+                  "sortBy": Object {},
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -68868,9 +76268,9 @@ exports[`Simple table header 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": undefined,
+                  "onSort": [Function],
                   "rowLabeledBy": "simple-node",
-                  "sortBy": undefined,
+                  "sortBy": Object {},
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -68909,9 +76309,9 @@ exports[`Simple table header 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": undefined,
+                  "onSort": [Function],
                   "rowLabeledBy": "simple-node",
-                  "sortBy": undefined,
+                  "sortBy": Object {},
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -68950,9 +76350,9 @@ exports[`Simple table header 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": undefined,
+                  "onSort": [Function],
                   "rowLabeledBy": "simple-node",
-                  "sortBy": undefined,
+                  "sortBy": Object {},
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -70299,8 +77699,6 @@ exports[`Simple table header 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -70328,9 +77726,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70338,6 +77736,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -70369,9 +77768,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70410,9 +77809,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70451,9 +77850,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70492,9 +77891,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70747,9 +78146,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70757,6 +78156,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -70788,9 +78188,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70829,9 +78229,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70870,9 +78270,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -70911,9 +78311,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71166,9 +78566,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71176,6 +78576,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -71207,9 +78608,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71248,9 +78649,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71289,9 +78690,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71330,9 +78731,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71585,9 +78986,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71595,6 +78996,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -71626,9 +79028,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71667,9 +79069,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71708,9 +79110,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -71749,9 +79151,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72004,9 +79406,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72014,6 +79416,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -72045,9 +79448,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72086,9 +79489,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72127,9 +79530,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72168,9 +79571,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72423,9 +79826,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72433,6 +79836,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -72464,9 +79868,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72505,9 +79909,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72546,9 +79950,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72587,9 +79991,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72842,9 +80246,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72852,6 +80256,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -72883,9 +80288,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72924,9 +80329,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -72965,9 +80370,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73006,9 +80411,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73261,9 +80666,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73271,6 +80676,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -73302,9 +80708,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73343,9 +80749,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73384,9 +80790,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73425,9 +80831,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73680,9 +81086,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73690,6 +81096,7 @@ exports[`Simple table header 1`] = `
                           "transforms": Array [
                             [Function],
                             [Function],
+                            [Function],
                           ],
                         },
                         "property": "header-cell",
@@ -73721,9 +81128,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73762,9 +81169,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73803,9 +81210,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -73844,9 +81251,9 @@ exports[`Simple table header 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": undefined,
+                          "onSort": [Function],
                           "rowLabeledBy": "simple-node",
-                          "sortBy": undefined,
+                          "sortBy": Object {},
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -74083,7 +81490,7 @@ exports[`Simple table header 1`] = `
 </Table>
 `;
 
-exports[`Sortable table 1`] = `
+exports[`Table variants Breakpoint - grid 1`] = `
 <Table
   aria-label="Aria labeled"
   borders={true}
@@ -74110,10 +81517,9 @@ exports[`Sortable table 1`] = `
   dropdownDirection="down"
   dropdownPosition="right"
   expandId="expandable-toggle"
-  gridBreakPoint="grid-md"
+  gridBreakPoint="grid"
   onCollapse={null}
   onExpand={null}
-  onSort={[Function]}
   role="grid"
   rowLabeledBy="simple-node"
   rows={
@@ -74201,12 +81607,11 @@ exports[`Sortable table 1`] = `
       },
     ]
   }
-  sortBy={Object {}}
   variant={null}
 >
   <Provider
     aria-label="Aria labeled"
-    className="pf-c-table pf-m-grid-md"
+    className="pf-c-table pf-m-grid"
     columns={
       Array [
         Object {
@@ -74232,9 +81637,9 @@ exports[`Sortable table 1`] = `
             "onCollapse": null,
             "onExpand": null,
             "onSelect": undefined,
-            "onSort": [Function],
+            "onSort": undefined,
             "rowLabeledBy": "simple-node",
-            "sortBy": Object {},
+            "sortBy": undefined,
           },
           "header": Object {
             "formatters": Array [],
@@ -74274,9 +81679,9 @@ exports[`Sortable table 1`] = `
             "onCollapse": null,
             "onExpand": null,
             "onSelect": undefined,
-            "onSort": [Function],
+            "onSort": undefined,
             "rowLabeledBy": "simple-node",
-            "sortBy": Object {},
+            "sortBy": undefined,
           },
           "header": Object {
             "formatters": Array [],
@@ -74315,9 +81720,9 @@ exports[`Sortable table 1`] = `
             "onCollapse": null,
             "onExpand": null,
             "onSelect": undefined,
-            "onSort": [Function],
+            "onSort": undefined,
             "rowLabeledBy": "simple-node",
-            "sortBy": Object {},
+            "sortBy": undefined,
           },
           "header": Object {
             "formatters": Array [],
@@ -74356,9 +81761,9 @@ exports[`Sortable table 1`] = `
             "onCollapse": null,
             "onExpand": null,
             "onSelect": undefined,
-            "onSort": [Function],
+            "onSort": undefined,
             "rowLabeledBy": "simple-node",
-            "sortBy": Object {},
+            "sortBy": undefined,
           },
           "header": Object {
             "formatters": Array [],
@@ -74397,9 +81802,9 @@ exports[`Sortable table 1`] = `
             "onCollapse": null,
             "onExpand": null,
             "onSelect": undefined,
-            "onSort": [Function],
+            "onSort": undefined,
             "rowLabeledBy": "simple-node",
-            "sortBy": Object {},
+            "sortBy": undefined,
           },
           "header": Object {
             "formatters": Array [],
@@ -74433,7 +81838,7 @@ exports[`Sortable table 1`] = `
   >
     <table
       aria-label="Aria labeled"
-      className="pf-c-table pf-m-grid-md"
+      className="pf-c-table pf-m-grid"
       role="grid"
     >
       <TableHeader
@@ -74483,9 +81888,9 @@ exports[`Sortable table 1`] = `
                         "onCollapse": null,
                         "onExpand": null,
                         "onSelect": undefined,
-                        "onSort": [Function],
+                        "onSort": undefined,
                         "rowLabeledBy": "simple-node",
-                        "sortBy": Object {},
+                        "sortBy": undefined,
                       },
                       "header": Object {
                         "formatters": Array [],
@@ -74525,9 +81930,9 @@ exports[`Sortable table 1`] = `
                         "onCollapse": null,
                         "onExpand": null,
                         "onSelect": undefined,
-                        "onSort": [Function],
+                        "onSort": undefined,
                         "rowLabeledBy": "simple-node",
-                        "sortBy": Object {},
+                        "sortBy": undefined,
                       },
                       "header": Object {
                         "formatters": Array [],
@@ -74566,9 +81971,9 @@ exports[`Sortable table 1`] = `
                         "onCollapse": null,
                         "onExpand": null,
                         "onSelect": undefined,
-                        "onSort": [Function],
+                        "onSort": undefined,
                         "rowLabeledBy": "simple-node",
-                        "sortBy": Object {},
+                        "sortBy": undefined,
                       },
                       "header": Object {
                         "formatters": Array [],
@@ -74607,9 +82012,9 @@ exports[`Sortable table 1`] = `
                         "onCollapse": null,
                         "onExpand": null,
                         "onSelect": undefined,
-                        "onSort": [Function],
+                        "onSort": undefined,
                         "rowLabeledBy": "simple-node",
-                        "sortBy": Object {},
+                        "sortBy": undefined,
                       },
                       "header": Object {
                         "formatters": Array [],
@@ -74648,9 +82053,9 @@ exports[`Sortable table 1`] = `
                         "onCollapse": null,
                         "onExpand": null,
                         "onSelect": undefined,
-                        "onSort": [Function],
+                        "onSort": undefined,
                         "rowLabeledBy": "simple-node",
-                        "sortBy": Object {},
+                        "sortBy": undefined,
                       },
                       "header": Object {
                         "formatters": Array [],
@@ -74703,6 +82108,7 @@ exports[`Sortable table 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -74833,9 +82239,9 @@ exports[`Sortable table 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": [Function],
+                  "onSort": undefined,
                   "rowLabeledBy": "simple-node",
-                  "sortBy": Object {},
+                  "sortBy": undefined,
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -74875,9 +82281,9 @@ exports[`Sortable table 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": [Function],
+                  "onSort": undefined,
                   "rowLabeledBy": "simple-node",
-                  "sortBy": Object {},
+                  "sortBy": undefined,
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -74916,9 +82322,9 @@ exports[`Sortable table 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": [Function],
+                  "onSort": undefined,
                   "rowLabeledBy": "simple-node",
-                  "sortBy": Object {},
+                  "sortBy": undefined,
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -74957,9 +82363,9 @@ exports[`Sortable table 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": [Function],
+                  "onSort": undefined,
                   "rowLabeledBy": "simple-node",
-                  "sortBy": Object {},
+                  "sortBy": undefined,
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -74998,9 +82404,9 @@ exports[`Sortable table 1`] = `
                   "onCollapse": null,
                   "onExpand": null,
                   "onSelect": undefined,
-                  "onSort": [Function],
+                  "onSort": undefined,
                   "rowLabeledBy": "simple-node",
-                  "sortBy": Object {},
+                  "sortBy": undefined,
                 },
                 "header": Object {
                   "formatters": Array [],
@@ -76347,8 +83753,6 @@ exports[`Sortable table 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -76376,9 +83780,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76418,9 +83822,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76459,9 +83863,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76500,9 +83904,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76541,9 +83945,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76796,9 +84200,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76838,9 +84242,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76879,9 +84283,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76920,9 +84324,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -76961,9 +84365,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77216,9 +84620,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77258,9 +84662,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77299,9 +84703,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77340,9 +84744,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77381,9 +84785,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77636,9 +85040,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77678,9 +85082,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77719,9 +85123,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77760,9 +85164,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -77801,9 +85205,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78056,9 +85460,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78098,9 +85502,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78139,9 +85543,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78180,9 +85584,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78221,9 +85625,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78476,9 +85880,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78518,9 +85922,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78559,9 +85963,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78600,9 +86004,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78641,9 +86045,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78896,9 +86300,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78938,9 +86342,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -78979,9 +86383,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79020,9 +86424,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79061,9 +86465,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79316,9 +86720,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79358,9 +86762,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79399,9 +86803,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79440,9 +86844,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79481,9 +86885,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79736,9 +87140,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79778,9 +87182,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79819,9 +87223,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79860,9 +87264,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -79901,9 +87305,9 @@ exports[`Sortable table 1`] = `
                           "onCollapse": null,
                           "onExpand": null,
                           "onSelect": undefined,
-                          "onSort": [Function],
+                          "onSort": undefined,
                           "rowLabeledBy": "simple-node",
-                          "sortBy": Object {},
+                          "sortBy": undefined,
                         },
                         "header": Object {
                           "formatters": Array [],
@@ -80140,7 +87544,7 @@ exports[`Sortable table 1`] = `
 </Table>
 `;
 
-exports[`Table variants Breakpoint - grid 1`] = `
+exports[`Table variants Breakpoint - grid-2xl 1`] = `
 <Table
   aria-label="Aria labeled"
   borders={true}
@@ -80167,7 +87571,7 @@ exports[`Table variants Breakpoint - grid 1`] = `
   dropdownDirection="down"
   dropdownPosition="right"
   expandId="expandable-toggle"
-  gridBreakPoint="grid"
+  gridBreakPoint="grid-2xl"
   onCollapse={null}
   onExpand={null}
   role="grid"
@@ -80261,7 +87665,7 @@ exports[`Table variants Breakpoint - grid 1`] = `
 >
   <Provider
     aria-label="Aria labeled"
-    className="pf-c-table pf-m-grid"
+    className="pf-c-table pf-m-grid-2xl"
     columns={
       Array [
         Object {
@@ -80488,7 +87892,7 @@ exports[`Table variants Breakpoint - grid 1`] = `
   >
     <table
       aria-label="Aria labeled"
-      className="pf-c-table pf-m-grid"
+      className="pf-c-table pf-m-grid-2xl"
       role="grid"
     >
       <TableHeader
@@ -80758,6 +88162,7 @@ exports[`Table variants Breakpoint - grid 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -82402,8 +89807,6 @@ exports[`Table variants Breakpoint - grid 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -86813,6 +94216,7 @@ exports[`Table variants Breakpoint - grid-lg 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -88457,8 +95861,6 @@ exports[`Table variants Breakpoint - grid-lg 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -92868,6 +100270,7 @@ exports[`Table variants Breakpoint - grid-md 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -94512,8 +101915,6 @@ exports[`Table variants Breakpoint - grid-md 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -98923,6 +106324,7 @@ exports[`Table variants Breakpoint - grid-xl 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -100567,8 +107969,6 @@ exports[`Table variants Breakpoint - grid-xl 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -104978,6 +112378,7 @@ exports[`Table variants Breakpoint - null 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -106622,8 +114023,6 @@ exports[`Table variants Breakpoint - null 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
@@ -111033,6 +118432,7 @@ exports[`Table variants Size - compact 1`] = `
                           >
                             <ArrowsAltVIcon
                               color="currentColor"
+                              noVerticalAlign={false}
                               size="sm"
                               title={null}
                             >
@@ -112677,8 +120077,6 @@ exports[`Table variants Size - compact 1`] = `
             >
               <tbody
                 className=""
-                onCollapse={null}
-                rows={Array []}
               >
                 <BodyRow
                   columns={
diff --git a/packages/patternfly-4/react-table/src/components/Table/index.d.ts b/packages/patternfly-4/react-table/src/components/Table/index.d.ts
index a243715d16e..a664953a327 100644
--- a/packages/patternfly-4/react-table/src/components/Table/index.d.ts
+++ b/packages/patternfly-4/react-table/src/components/Table/index.d.ts
@@ -10,6 +10,7 @@ export {
   IRow,
   IRowData,
   IColumn,
+  IDecorator,
   IExtra,
   IExtraData,
   IExtraColumnData
diff --git a/packages/patternfly-4/react-tokens/.npmignore b/packages/patternfly-4/react-tokens/.npmignore
index c795b054e5a..5344519a423 100644
--- a/packages/patternfly-4/react-tokens/.npmignore
+++ b/packages/patternfly-4/react-tokens/.npmignore
@@ -1 +1,6 @@
-build
\ No newline at end of file
+build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-tokens/CHANGELOG.md b/packages/patternfly-4/react-tokens/CHANGELOG.md
index 80101cfba3d..e9abcc227d5 100644
--- a/packages/patternfly-4/react-tokens/CHANGELOG.md
+++ b/packages/patternfly-4/react-tokens/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-tokens@2.6.0...@patternfly/react-tokens@2.6.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-tokens
+
+
+
+
+
+# 2.6.0 (2019-06-13)
+
+
+### Bug Fixes
+
+* **topology:** Fixes JS dist for react-topology ([#2230](https://github.com/patternfly/patternfly-react/issues/2230)) ([337510a](https://github.com/patternfly/patternfly-react/commit/337510a))
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [2.5.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-tokens@2.5.4...@patternfly/react-tokens@2.5.5) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-tokens
+
+
+
+
+
+## 2.5.4 (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-tokens
+
+
+
+
+
 ## 2.5.3 (2019-05-29)
 
 **Note:** Version bump only for package @patternfly/react-tokens
diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json
index 33a49a89a34..ee3d98f3e73 100644
--- a/packages/patternfly-4/react-tokens/package.json
+++ b/packages/patternfly-4/react-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-tokens",
-  "version": "2.5.3",
+  "version": "2.6.1",
   "description": "This library provides access to the design tokens of PatternFly 4 from JavaScript",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -26,11 +26,13 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build": "node src/generateTokens.js && yarn build:babel:umd",
-    "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q",
+    "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q",
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "2.8.2",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@patternfly/patternfly": "2.13.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
diff --git a/packages/patternfly-4/react-topology/.babelrc b/packages/patternfly-4/react-topology/.babelrc
new file mode 100644
index 00000000000..3eeb33a71bc
--- /dev/null
+++ b/packages/patternfly-4/react-topology/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "../.babelrc"
+}
diff --git a/packages/patternfly-4/react-topology/.npmignore b/packages/patternfly-4/react-topology/.npmignore
new file mode 100644
index 00000000000..5344519a423
--- /dev/null
+++ b/packages/patternfly-4/react-topology/.npmignore
@@ -0,0 +1,6 @@
+build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-topology/CHANGELOG.md b/packages/patternfly-4/react-topology/CHANGELOG.md
new file mode 100644
index 00000000000..2c9b3f09f04
--- /dev/null
+++ b/packages/patternfly-4/react-topology/CHANGELOG.md
@@ -0,0 +1,173 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.2.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.10...@patternfly/react-topology@2.2.11) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.9...@patternfly/react-topology@2.2.10) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.8...@patternfly/react-topology@2.2.9) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.7...@patternfly/react-topology@2.2.8) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.6...@patternfly/react-topology@2.2.7) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.4...@patternfly/react-topology@2.2.6) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.4...@patternfly/react-topology@2.2.5) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.3...@patternfly/react-topology@2.2.4) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.2.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.2...@patternfly/react-topology@2.2.3) (2019-06-14)
+
+
+### Bug Fixes
+
+* **react-icons:** add noVerticalAlign prop to d.ts file ([#2238](https://github.com/patternfly/patternfly-react/issues/2238)) ([c50143c](https://github.com/patternfly/patternfly-react/commit/c50143c)), closes [#2237](https://github.com/patternfly/patternfly-react/issues/2237)
+
+
+
+
+
+## [2.2.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.1...@patternfly/react-topology@2.2.2) (2019-06-14)
+
+
+### Bug Fixes
+
+* **topology:** add tslint.json ([#2247](https://github.com/patternfly/patternfly-react/issues/2247)) ([991280b](https://github.com/patternfly/patternfly-react/commit/991280b))
+
+
+
+
+
+## [2.2.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.2.0...@patternfly/react-topology@2.2.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+# [2.2.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.6...@patternfly/react-topology@2.2.0) (2019-06-13)
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [2.1.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.5...@patternfly/react-topology@2.1.6) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.4...@patternfly/react-topology@2.1.5) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.3...@patternfly/react-topology@2.1.4) (2019-06-12)
+
+
+### Bug Fixes
+
+* **topology:** Fixes JS dist for react-topology ([#2230](https://github.com/patternfly/patternfly-react/issues/2230)) ([337510a](https://github.com/patternfly/patternfly-react/commit/337510a))
+
+
+
+
+
+## [2.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.2...@patternfly/react-topology@2.1.3) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-topology
+
+
+
+
+
+## [2.1.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.1...@patternfly/react-topology@2.1.2) (2019-06-12)
+
+
+### Bug Fixes
+
+* **release:** Version bump to distribute previous changes ([#2224](https://github.com/patternfly/patternfly-react/issues/2224)) ([9dcd53f](https://github.com/patternfly/patternfly-react/commit/9dcd53f))
+
+
+
+
+
+## [2.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-topology@2.1.0...@patternfly/react-topology@2.1.1) (2019-06-11)
+
+
+### Bug Fixes
+
+* **topology-view:** Do not hard code margins on view components ([#2217](https://github.com/patternfly/patternfly-react/issues/2217)) ([69e8a42](https://github.com/patternfly/patternfly-react/commit/69e8a42))
+
+
+
+
+
+# 2.1.0 (2019-06-11)
+
+
+### Features
+
+* **Topology:** Add @patternfly/react-topology package ([#2170](https://github.com/patternfly/patternfly-react/issues/2170)) ([58eb9cc](https://github.com/patternfly/patternfly-react/commit/58eb9cc))
diff --git a/packages/patternfly-4/react-topology/README.md b/packages/patternfly-4/react-topology/README.md
new file mode 100644
index 00000000000..a5d742b3464
--- /dev/null
+++ b/packages/patternfly-4/react-topology/README.md
@@ -0,0 +1,105 @@
+# @patternfly/react-topology
+
+This package provides Topology View components based on [PatternFly 4][patternfly-4]
+
+### Prerequisites
+
+#### Node Environment
+
+This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react.
+
+For example, to develop with Node 8, use the following:
+
+```
+nvm install 8
+nvm use 8
+```
+
+This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/).
+
+### Installing
+
+```
+yarn add @patternfly/react-topology
+```
+
+or
+
+```
+npm install @patternfly/react-topology --save
+```
+
+## Usage
+
+It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:
+
+```javascript
+import '@patternfly/react-core/dist/styles/base.css';
+```
+
+#### Example Component Usage
+
+```javascript
+import React from 'react';
+... TBD
+```
+
+## Contribution
+
+This library makes use of the babel plugin from [@patternfly/react-styles](../react-styles/README.md) to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference [Button.js](./src/components/Button/Button.js). For any CSS not provided by core please use the `StyleSheet.create` utility from [@patternfly/react-styles](../react-styles/README.md). This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.
+
+### Documentation
+
+This project uses Gatsby. For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).
+
+A comprehensive list of components and detailed usage of each can be found on the [PatternFly React Docs][docs] website
+You can also find how each component is meant to be used from a design perspective on the [PatternFly 4 Core][patternfly-4] website.
+
+Note: All commands below assume you are on the root directory in this repository.
+
+### Install
+
+Run to install all the dependencies
+
+```sh
+yarn && yarn bootstrap && yarn build && yarn build:docs
+```
+
+### Building
+
+```sh
+yarn bootstrap && yarn build && yarn build:docs
+```
+
+### Running
+
+To start the site locally.
+
+```sh
+yarn build && yarn start:pf4
+```
+
+### Building
+
+To build the site.
+
+```sh
+yarn build:docs
+```
+
+### Building
+
+```
+yarn build
+```
+
+### Testing
+
+Testing is done at the root of this repo. To only run the @patternfly/react-topology tests:
+
+```
+yarn test packages/patternfly-4/react-topology
+```
+
+[patternfly-4]: https://github.com/patternfly/patternfly-next
+[docs]: https://patternfly-react.surge.sh/patternfly-4
diff --git a/packages/patternfly-4/react-topology/build/copyStyles.js b/packages/patternfly-4/react-topology/build/copyStyles.js
new file mode 100644
index 00000000000..3c501ed0ad6
--- /dev/null
+++ b/packages/patternfly-4/react-topology/build/copyStyles.js
@@ -0,0 +1,42 @@
+/* eslint-disable no-case-declarations */
+const { copySync, readFileSync, writeFileSync } = require('fs-extra');
+const { resolve, dirname, join } = require('path');
+const { parse: parseCSS, stringify: stringifyCSS } = require('css');
+
+const baseCSSFilename = 'patternfly-base.css';
+const stylesDir = resolve(__dirname, '../dist/styles');
+const pfDir = dirname(require.resolve(`@patternfly/patternfly/${baseCSSFilename}`));
+
+const css = readFileSync(join(pfDir, baseCSSFilename), 'utf8');
+const ast = parseCSS(css);
+
+const unusedSelectorRegEx = /(\.fas?|\.sr-only)/;
+const unusedKeyFramesRegEx = /fa-/;
+const unusedFontFamilyRegEx = /Font Awesome 5 Free/;
+const ununsedFontFilesRegExt = /(fa-|\.html$|\.css$)/;
+
+// Core provides font awesome fonts and utlities. React does not use these
+ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => {
+  switch (rule.type) {
+    case 'rule':
+      return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel));
+    case 'keyframes':
+      return !unusedKeyFramesRegEx.test(rule.name);
+    case 'charset':
+    case 'comment':
+      return false;
+    case 'font-face':
+      const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family');
+      return !unusedFontFamilyRegEx.test(fontFamilyDecl.value);
+    default:
+      return true;
+  }
+});
+
+copySync(join(pfDir, 'assets/images'), join(stylesDir, 'assets/images'));
+copySync(join(pfDir, 'assets/fonts'), join(stylesDir, 'assets/fonts'), {
+  filter(src) {
+    return !ununsedFontFilesRegExt.test(src);
+  }
+});
+writeFileSync(join(stylesDir, 'base.css'), stringifyCSS(ast));
diff --git a/packages/patternfly-4/react-topology/package.json b/packages/patternfly-4/react-topology/package.json
new file mode 100644
index 00000000000..4e1e82152f6
--- /dev/null
+++ b/packages/patternfly-4/react-topology/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@patternfly/react-topology",
+  "version": "2.2.11",
+  "description": "This library provides a set of React topology view components for use with the PatternFly 4",
+  "main": "dist/js/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/js/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "tag": "prerelease"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patternfly/patternfly-react.git"
+  },
+  "keywords": [
+    "react",
+    "patternfly",
+    "topology"
+  ],
+  "author": "Red Hat",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-react/issues"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-topology#readme",
+  "dependencies": {
+    "@patternfly/react-core": "^3.48.5",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-styles": "^3.4.2"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
+    "react-dom": "^15.6.2 || ^16.4.0"
+  },
+  "scripts": {
+    "build": "yarn typecheck && yarn build:babel && yarn build:types && node ./build/copyStyles.js",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd",
+    "build:types": "tsc -p tsconfig.gen-dts.json",
+    "clean": "rimraf dist",
+    "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
+    "lint:ts": "tslint -p tsconfig.typecheck.json",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@patternfly/react-tokens": "^2.6.1",
+    "@types/prop-types": "^15.7.0",
+    "@types/react": "~16.8.0",
+    "@types/react-dom": "~16.8.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
+    "css": "^2.2.3",
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.2",
+    "rimraf": "^2.6.2",
+    "tslint": "^5.12.0",
+    "tslint-config-prettier": "^1.17.0",
+    "tslint-react": "^3.6.0",
+    "typescript": "3.4.5"
+  }
+}
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx
new file mode 100644
index 00000000000..c9176174473
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.test.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {mount} from 'enzyme';
+import {TopologyControlBar, createTopologyControlButtons, defaultControlButtonsOptions, ZOOM_IN} from './TopologyControlBar';
+
+describe('TopologyControlBar', () => {
+  test('should display the default controls correctly', () => {
+    const controlButtons = createTopologyControlButtons();
+    const mockfn = jest.fn();
+    const view = mount(
+      <TopologyControlBar
+        className="default-test-class"
+        id="default-test-id" controlButtons={controlButtons}
+        onButtonClick={mockfn}/>
+    );
+    expect(view).toMatchSnapshot();
+    view
+      .find(`#${ZOOM_IN}`)
+      .at(0)
+      .simulate('click');
+    expect(mockfn.mock.calls).toHaveLength(1);
+  });
+
+  test('should accept button options correctly', () => {
+    const mockfn = jest.fn();
+    const controlButtons = createTopologyControlButtons(
+      { ...defaultControlButtonsOptions,
+        zoomInCallback: mockfn,
+        zoomInAriaLabel: 'test-zoom-in-aria-label',
+        zoomInIcon: <span>test zoom in</span>,
+        zoomInTip: 'test zoom in tooltip',
+        fitToScreenHidden: true,
+        resetViewDisabled: true,
+        legend: false
+      });
+    const view = mount(
+      <TopologyControlBar className="default-test-class" id="default-test-id" controlButtons={controlButtons}/>
+    );
+    expect(view).toMatchSnapshot();
+    view
+      .find(`#${ZOOM_IN}`)
+      .at(0)
+      .simulate('click');
+    expect(mockfn.mock.calls).toHaveLength(1);
+  });
+});
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx
new file mode 100644
index 00000000000..0259773dec9
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/TopologyControlBar.tsx
@@ -0,0 +1,294 @@
+import * as React from 'react';
+import { Button, Toolbar, ToolbarGroup, ToolbarItem, Tooltip } from '@patternfly/react-core';
+import { ExpandIcon, ExpandArrowsAltIcon, SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons';
+
+import { topologyControlbarCss } from './css/topology-controlbar-css';
+
+topologyControlbarCss.inject();
+
+/* ID's for common control buttons */
+export const ZOOM_IN = 'zoom-in';
+export const ZOOM_OUT = 'zoom-out';
+export const FIT_TO_SCREEN = 'fit-to-screen';
+export const RESET_VIEW = 'reset-view';
+export const LEGEND = 'legend';
+
+/* Data needed for each control button */
+export interface TopologyControlButton {
+  id: any,
+  icon: React.ReactNode;
+  tooltip?: React.ReactNode;
+  ariaLabel?: string;
+  callback?: (id: any) => void;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+/* Options for creating the control buttons */
+export interface TopologyControlButtonsOptions {
+  zoomIn: boolean;
+  zoomInIcon: React.ReactNode;
+  zoomInTip: React.ReactNode;
+  zoomInAriaLabel: string;
+  zoomInCallback: (id: any) => void;
+  zoomInDisabled: boolean;
+  zoomInHidden: boolean;
+
+  zoomOut: boolean;
+  zoomOutIcon: React.ReactNode;
+  zoomOutTip: React.ReactNode;
+  zoomOutAriaLabel: string;
+  zoomOutCallback: (id: any) => void;
+  zoomOutDisabled: boolean;
+  zoomOutHidden: boolean;
+
+  fitToScreen: boolean;
+  fitToScreenIcon: React.ReactNode;
+  fitToScreenTip: React.ReactNode;
+  fitToScreenAriaLabel: string;
+  fitToScreenCallback: (id: any) => void;
+  fitToScreenDisabled: boolean;
+  fitToScreenHidden: boolean;
+
+  resetView: boolean;
+  resetViewIcon: React.ReactNode;
+  resetViewTip: React.ReactNode;
+  resetViewAriaLabel: string;
+  resetViewCallback: (id: any) => void;
+  resetViewDisabled: boolean;
+  resetViewHidden: boolean;
+
+  legend: boolean;
+  legendIcon: React.ReactNode;
+  legendTip: string;
+  legendAriaLabel: string;
+  legendCallback: (id: any) => void;
+  legendDisabled: boolean;
+  legendHidden: boolean;
+
+  customButtons: TopologyControlButton[];
+}
+
+/* Default options for creating control buttons */
+export const defaultControlButtonsOptions: TopologyControlButtonsOptions = {
+  zoomIn: true,
+  zoomInIcon: <SearchPlusIcon />,
+  zoomInTip: 'Zoom In',
+  zoomInAriaLabel: 'Zoom In',
+  zoomInCallback: null,
+  zoomInDisabled: false,
+  zoomInHidden: false,
+
+  zoomOut: true,
+  zoomOutIcon: <SearchMinusIcon />,
+  zoomOutTip: 'Zoom Out',
+  zoomOutAriaLabel: 'Zoom Out',
+  zoomOutCallback: null,
+  zoomOutDisabled: false,
+  zoomOutHidden: false,
+
+  fitToScreen: true,
+  fitToScreenIcon: <ExpandArrowsAltIcon />,
+  fitToScreenTip: 'Fit to Screen',
+  fitToScreenAriaLabel: 'Fit to Screen',
+  fitToScreenCallback: null,
+  fitToScreenDisabled: false,
+  fitToScreenHidden: false,
+
+  resetView: true,
+  resetViewIcon: <ExpandIcon />,
+  resetViewTip: 'Reset View',
+  resetViewAriaLabel: 'Reset View',
+  resetViewCallback: null,
+  resetViewDisabled: false,
+  resetViewHidden: false,
+
+  legend: true,
+  legendIcon: 'Legend',
+  legendTip: '',
+  legendAriaLabel: null,
+  legendCallback: null,
+  legendDisabled: false,
+  legendHidden: false,
+
+  customButtons: []
+};
+
+/* Utility function to create the common control buttons, can pass null for all defaults, or specify overrides */
+export const createTopologyControlButtons = ({
+  zoomIn = defaultControlButtonsOptions.zoomIn,
+  zoomInIcon= defaultControlButtonsOptions.zoomInIcon,
+  zoomInTip= defaultControlButtonsOptions.zoomInTip,
+  zoomInAriaLabel= defaultControlButtonsOptions.zoomInAriaLabel,
+  zoomInCallback= defaultControlButtonsOptions.zoomInCallback,
+  zoomInDisabled= defaultControlButtonsOptions.zoomInDisabled,
+  zoomInHidden= defaultControlButtonsOptions.zoomInHidden,
+
+  zoomOut = defaultControlButtonsOptions.zoomOut,
+  zoomOutIcon = defaultControlButtonsOptions.zoomOutIcon,
+  zoomOutTip = defaultControlButtonsOptions.zoomOutTip,
+  zoomOutAriaLabel = defaultControlButtonsOptions.zoomOutAriaLabel,
+  zoomOutCallback = defaultControlButtonsOptions.zoomOutCallback,
+  zoomOutDisabled = defaultControlButtonsOptions.zoomOutDisabled,
+  zoomOutHidden = defaultControlButtonsOptions.zoomOutHidden,
+
+  fitToScreen = defaultControlButtonsOptions.fitToScreen,
+  fitToScreenIcon = defaultControlButtonsOptions.fitToScreenIcon,
+  fitToScreenTip = defaultControlButtonsOptions.fitToScreenTip,
+  fitToScreenAriaLabel = defaultControlButtonsOptions.fitToScreenAriaLabel,
+  fitToScreenCallback = defaultControlButtonsOptions.fitToScreenCallback,
+  fitToScreenDisabled = defaultControlButtonsOptions.fitToScreenDisabled,
+  fitToScreenHidden = defaultControlButtonsOptions.fitToScreenHidden,
+
+  resetView = defaultControlButtonsOptions.resetView,
+  resetViewIcon = defaultControlButtonsOptions.resetViewIcon,
+  resetViewTip = defaultControlButtonsOptions.resetViewTip,
+  resetViewAriaLabel = defaultControlButtonsOptions.resetViewAriaLabel,
+  resetViewCallback = defaultControlButtonsOptions.resetViewCallback,
+  resetViewDisabled = defaultControlButtonsOptions.resetViewDisabled,
+  resetViewHidden = defaultControlButtonsOptions.resetViewHidden,
+
+  legend = defaultControlButtonsOptions.legend,
+  legendIcon = defaultControlButtonsOptions.legendIcon,
+  legendTip = defaultControlButtonsOptions.legendTip,
+  legendAriaLabel = defaultControlButtonsOptions.legendAriaLabel,
+  legendCallback = defaultControlButtonsOptions.legendCallback,
+  legendDisabled = defaultControlButtonsOptions.legendDisabled,
+  legendHidden = defaultControlButtonsOptions.legendHidden,
+
+  customButtons = defaultControlButtonsOptions.customButtons,
+} : TopologyControlButtonsOptions  = defaultControlButtonsOptions) : TopologyControlButton[] => {
+  const controlButtons: TopologyControlButton[] = [];
+
+  if (zoomIn) {
+    controlButtons.push({
+      id: ZOOM_IN,
+      icon: zoomInIcon,
+      tooltip: zoomInTip,
+      ariaLabel: zoomInAriaLabel,
+      callback: zoomInCallback,
+      disabled: zoomInDisabled,
+      hidden: zoomInHidden
+    });
+  }
+
+
+  if (zoomOut) {
+    controlButtons.push({
+      id: ZOOM_OUT,
+      icon: zoomOutIcon,
+      tooltip: zoomOutTip,
+      ariaLabel: zoomOutAriaLabel,
+      callback: zoomOutCallback,
+      disabled: zoomOutDisabled,
+      hidden: zoomOutHidden
+    });
+  }
+
+  if (fitToScreen) {
+    controlButtons.push({
+      id: FIT_TO_SCREEN,
+      icon: fitToScreenIcon,
+      tooltip: fitToScreenTip,
+      ariaLabel: fitToScreenAriaLabel,
+      callback: fitToScreenCallback,
+      disabled: fitToScreenDisabled,
+      hidden: fitToScreenHidden
+    });
+  }
+
+  if (resetView) {
+    controlButtons.push({
+      id: RESET_VIEW,
+      icon: resetViewIcon,
+      tooltip: resetViewTip,
+      ariaLabel: resetViewAriaLabel,
+      callback: resetViewCallback,
+      disabled: resetViewDisabled,
+      hidden: resetViewHidden
+    });
+  }
+
+  if (customButtons) {
+    controlButtons.push(...customButtons);
+  }
+
+  if (legend) {
+    controlButtons.push({
+      id: LEGEND,
+      icon: legendIcon,
+      tooltip: legendTip,
+      ariaLabel: legendAriaLabel,
+      callback: legendCallback,
+      disabled: legendDisabled,
+      hidden: legendHidden
+    });
+  }
+
+  return controlButtons;
+};
+
+export interface TopologyControlBarProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the control bar */
+  className?: string;
+  /** Any extra child nodes (placed after the buttons) */
+  children?: React.ReactNode;
+  /** Buttons to be added to the bar */
+  controlButtons?: TopologyControlButton[];
+  /** Callback when any button is clicked, id of the clicked button is passed */
+  onButtonClick?: (id: any) => void;
+}
+
+export const TopologyControlBar: React.FunctionComponent<TopologyControlBarProps> = ({
+  className = null,
+  children = null,
+  controlButtons = [],
+  onButtonClick = () => undefined,
+  ...props
+}: TopologyControlBarProps) => {
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, button: TopologyControlButton) => {
+    event.preventDefault();
+    onButtonClick(button.id);
+    if (button.callback) {
+      button.callback(button.id);
+    }
+  };
+
+  const renderButton = (button: TopologyControlButton): React.ReactNode => {
+    const renderedButton = (
+      <Button
+        id={button.id}
+        className={`pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs${button.disabled ? ' pf-m-disabled' : ''}`}
+        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleButtonClick(event, button)}
+        disabled={button.disabled}
+        aria-disabled={button.disabled}
+        variant="tertiary"
+      >
+        {button.icon}
+        {(button.ariaLabel || button.tooltip) && (
+          <span className="sr-only">{button.ariaLabel || button.tooltip}</span>
+        )}
+      </Button>
+    );
+
+    if (button.tooltip) {
+      return (
+        <Tooltip content={button.tooltip}>{renderedButton}</Tooltip>
+      );
+    }
+
+    return renderedButton;
+  };
+
+  return (
+    <Toolbar className={className} {...props}>
+      <ToolbarGroup>
+        {controlButtons.map((button: TopologyControlButton) => {
+          return button.hidden ? null : <ToolbarItem key={button.id}>{renderButton(button)}</ToolbarItem>;
+        })}
+        {children}
+      </ToolbarGroup>
+    </Toolbar>
+  );
+};
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap
new file mode 100644
index 00000000000..25642771550
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap
@@ -0,0 +1,1440 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TopologyControlBar should accept button options correctly 1`] = `
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs.pf-m-disabled {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-l-toolbar__group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.pf-l-toolbar.default-test-class {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+<Component
+  className="default-test-class"
+  controlButtons={
+    Array [
+      Object {
+        "ariaLabel": "test-zoom-in-aria-label",
+        "callback": [MockFunction],
+        "disabled": false,
+        "hidden": false,
+        "icon": <span>
+          test zoom in
+        </span>,
+        "id": "zoom-in",
+        "tooltip": "test zoom in tooltip",
+      },
+      Object {
+        "ariaLabel": "Zoom Out",
+        "callback": null,
+        "disabled": false,
+        "hidden": false,
+        "icon": <SearchMinusIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "zoom-out",
+        "tooltip": "Zoom Out",
+      },
+      Object {
+        "ariaLabel": "Fit to Screen",
+        "callback": null,
+        "disabled": false,
+        "hidden": true,
+        "icon": <ExpandArrowsAltIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "fit-to-screen",
+        "tooltip": "Fit to Screen",
+      },
+      Object {
+        "ariaLabel": "Reset View",
+        "callback": null,
+        "disabled": true,
+        "hidden": false,
+        "icon": <ExpandIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "reset-view",
+        "tooltip": "Reset View",
+      },
+    ]
+  }
+  id="default-test-id"
+>
+  <Toolbar
+    className="default-test-class"
+    id="default-test-id"
+  >
+    <div
+      className="pf-l-toolbar default-test-class"
+      id="default-test-id"
+    >
+      <ToolbarGroup
+        className={null}
+      >
+        <div
+          className="pf-l-toolbar__group"
+        >
+          <ToolbarItem
+            className={null}
+            key="zoom-in"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="test zoom in tooltip"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        test zoom in tooltip
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={false}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                    disabled={false}
+                    id="zoom-in"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                      disabled={false}
+                      id="zoom-in"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <span>
+                        test zoom in
+                      </span>
+                      <span
+                        className="sr-only"
+                      >
+                        test-zoom-in-aria-label
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            test zoom in tooltip
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          test zoom in tooltip
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+          <ToolbarItem
+            className={null}
+            key="zoom-out"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="Zoom Out"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        Zoom Out
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={false}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                    disabled={false}
+                    id="zoom-out"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                      disabled={false}
+                      id="zoom-out"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <SearchMinusIcon
+                        color="currentColor"
+                        noVerticalAlign={false}
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                            transform=""
+                          />
+                        </svg>
+                      </SearchMinusIcon>
+                      <span
+                        className="sr-only"
+                      >
+                        Zoom Out
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            Zoom Out
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          Zoom Out
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+          <ToolbarItem
+            className={null}
+            key="reset-view"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="Reset View"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        Reset View
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={true}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs pf-m-disabled"
+                    disabled={true}
+                    id="reset-view"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs pf-m-disabled"
+                      disabled={false}
+                      id="reset-view"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <ExpandIcon
+                        color="currentColor"
+                        noVerticalAlign={false}
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 448 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
+                            transform=""
+                          />
+                        </svg>
+                      </ExpandIcon>
+                      <span
+                        className="sr-only"
+                      >
+                        Reset View
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            Reset View
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          Reset View
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+        </div>
+      </ToolbarGroup>
+    </div>
+  </Toolbar>
+</Component>
+`;
+
+exports[`TopologyControlBar should display the default controls correctly 1`] = `
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-c-tooltip__arrow {
+  display: block;
+}
+.pf-c-tooltip {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-c-button.pf-m-tertiary.pf-topology-control-bar__button.pf-u-px-sm.pf-u-mr-xs {
+  display: block;
+}
+.pf-l-toolbar__item {
+  display: block;
+}
+.pf-l-toolbar__group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.pf-l-toolbar.default-test-class {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+<Component
+  className="default-test-class"
+  controlButtons={
+    Array [
+      Object {
+        "ariaLabel": "Zoom In",
+        "callback": null,
+        "disabled": false,
+        "hidden": false,
+        "icon": <SearchPlusIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "zoom-in",
+        "tooltip": "Zoom In",
+      },
+      Object {
+        "ariaLabel": "Zoom Out",
+        "callback": null,
+        "disabled": false,
+        "hidden": false,
+        "icon": <SearchMinusIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "zoom-out",
+        "tooltip": "Zoom Out",
+      },
+      Object {
+        "ariaLabel": "Fit to Screen",
+        "callback": null,
+        "disabled": false,
+        "hidden": false,
+        "icon": <ExpandArrowsAltIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "fit-to-screen",
+        "tooltip": "Fit to Screen",
+      },
+      Object {
+        "ariaLabel": "Reset View",
+        "callback": null,
+        "disabled": false,
+        "hidden": false,
+        "icon": <ExpandIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+          title={null}
+        />,
+        "id": "reset-view",
+        "tooltip": "Reset View",
+      },
+      Object {
+        "ariaLabel": null,
+        "callback": null,
+        "disabled": false,
+        "hidden": false,
+        "icon": "Legend",
+        "id": "legend",
+        "tooltip": "",
+      },
+    ]
+  }
+  id="default-test-id"
+  onButtonClick={[MockFunction]}
+>
+  <Toolbar
+    className="default-test-class"
+    id="default-test-id"
+  >
+    <div
+      className="pf-l-toolbar default-test-class"
+      id="default-test-id"
+    >
+      <ToolbarGroup
+        className={null}
+      >
+        <div
+          className="pf-l-toolbar__group"
+        >
+          <ToolbarItem
+            className={null}
+            key="zoom-in"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="Zoom In"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        Zoom In
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={false}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                    disabled={false}
+                    id="zoom-in"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                      disabled={false}
+                      id="zoom-in"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <SearchPlusIcon
+                        color="currentColor"
+                        noVerticalAlign={false}
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                            transform=""
+                          />
+                        </svg>
+                      </SearchPlusIcon>
+                      <span
+                        className="sr-only"
+                      >
+                        Zoom In
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            Zoom In
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          Zoom In
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+          <ToolbarItem
+            className={null}
+            key="zoom-out"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="Zoom Out"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        Zoom Out
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={false}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                    disabled={false}
+                    id="zoom-out"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                      disabled={false}
+                      id="zoom-out"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <SearchMinusIcon
+                        color="currentColor"
+                        noVerticalAlign={false}
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 512 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                            transform=""
+                          />
+                        </svg>
+                      </SearchMinusIcon>
+                      <span
+                        className="sr-only"
+                      >
+                        Zoom Out
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            Zoom Out
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          Zoom Out
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+          <ToolbarItem
+            className={null}
+            key="fit-to-screen"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="Fit to Screen"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        Fit to Screen
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={false}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                    disabled={false}
+                    id="fit-to-screen"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                      disabled={false}
+                      id="fit-to-screen"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <ExpandArrowsAltIcon
+                        color="currentColor"
+                        noVerticalAlign={false}
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 448 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"
+                            transform=""
+                          />
+                        </svg>
+                      </ExpandArrowsAltIcon>
+                      <span
+                        className="sr-only"
+                      >
+                        Fit to Screen
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            Fit to Screen
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          Fit to Screen
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+          <ToolbarItem
+            className={null}
+            key="reset-view"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Tooltip
+                appendTo={[Function]}
+                className={null}
+                content="Reset View"
+                enableFlip={true}
+                entryDelay={500}
+                exitDelay={500}
+                isAppLauncher={false}
+                maxWidth="18.75rem"
+                position="top"
+                trigger="mouseenter focus"
+                zIndex={9999}
+              >
+                <Tippy
+                  animateFill={false}
+                  appendTo={[Function]}
+                  content={
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      />
+                      <TooltipContent
+                        className={null}
+                      >
+                        Reset View
+                      </TooltipContent>
+                    </div>
+                  }
+                  delay={
+                    Array [
+                      500,
+                      500,
+                    ]
+                  }
+                  distance={15}
+                  flip={true}
+                  lazy={true}
+                  maxWidth="18.75rem"
+                  onCreate={[Function]}
+                  performance={true}
+                  placement="top"
+                  popperOptions={
+                    Object {
+                      "modifiers": Object {
+                        "hide": Object {
+                          "enabled": true,
+                        },
+                        "preventOverflow": Object {
+                          "enabled": true,
+                        },
+                      },
+                    }
+                  }
+                  theme="pf-tippy"
+                  trigger="mouseenter focus"
+                  zIndex={9999}
+                >
+                  <Button
+                    aria-disabled={false}
+                    className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                    disabled={false}
+                    id="reset-view"
+                    onClick={[Function]}
+                    variant="tertiary"
+                  >
+                    <button
+                      aria-disabled={null}
+                      aria-label={null}
+                      className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                      disabled={false}
+                      id="reset-view"
+                      onClick={[Function]}
+                      tabIndex={null}
+                      type="button"
+                    >
+                      <ExpandIcon
+                        color="currentColor"
+                        noVerticalAlign={false}
+                        size="sm"
+                        title={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          aria-labelledby={null}
+                          fill="currentColor"
+                          height="1em"
+                          role="img"
+                          style={
+                            Object {
+                              "verticalAlign": "-0.125em",
+                            }
+                          }
+                          viewBox="0 0 448 512"
+                          width="1em"
+                        >
+                          <path
+                            d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
+                            transform=""
+                          />
+                        </svg>
+                      </ExpandIcon>
+                      <span
+                        className="sr-only"
+                      >
+                        Reset View
+                      </span>
+                    </button>
+                  </Button>
+                  <Portal
+                    containerInfo={
+                      <div>
+                        <div
+                          class="pf-c-tooltip"
+                          role="tooltip"
+                        >
+                          <div
+                            class="pf-c-tooltip__arrow"
+                          />
+                          <div
+                            class="pf-c-tooltip__content"
+                          >
+                            Reset View
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div
+                      className="pf-c-tooltip"
+                      role="tooltip"
+                    >
+                      <TooltipArrow
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__arrow"
+                        />
+                      </TooltipArrow>
+                      <TooltipContent
+                        className={null}
+                      >
+                        <div
+                          className="pf-c-tooltip__content"
+                        >
+                          Reset View
+                        </div>
+                      </TooltipContent>
+                    </div>
+                  </Portal>
+                </Tippy>
+              </Tooltip>
+            </div>
+          </ToolbarItem>
+          <ToolbarItem
+            className={null}
+            key="legend"
+          >
+            <div
+              className="pf-l-toolbar__item"
+            >
+              <Button
+                aria-disabled={false}
+                className="pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                disabled={false}
+                id="legend"
+                onClick={[Function]}
+                variant="tertiary"
+              >
+                <button
+                  aria-disabled={null}
+                  aria-label={null}
+                  className="pf-c-button pf-m-tertiary pf-topology-control-bar__button pf-u-px-sm pf-u-mr-xs"
+                  disabled={false}
+                  id="legend"
+                  onClick={[Function]}
+                  tabIndex={null}
+                  type="button"
+                >
+                  Legend
+                </button>
+              </Button>
+            </div>
+          </ToolbarItem>
+        </div>
+      </ToolbarGroup>
+    </div>
+  </Toolbar>
+</Component>
+`;
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts
new file mode 100644
index 00000000000..6c550f28181
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/css/topology-controlbar-css.ts
@@ -0,0 +1,23 @@
+import { StyleSheet } from '@patternfly/react-styles';
+
+export const topologyControlbarCss = StyleSheet.parse(`
+  .pf-topology-control-bar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+    
+    .pf-c-button.pf-m-tertiary {
+      background-color: var(--pf-global--BackgroundColor--100);
+      border: none;
+      border-radius: var(--pf-global--BorderRadius--sm);
+      box-shadow: var(--pf-global--BoxShadow--sm);
+    }
+    .pf-c-button.pf-m-tertiary:after {
+      display: none;
+    }
+    .pf-c-button.pf-m-tertiary:hover {
+      border: none;
+      box-shadow: var(--pf-global--BoxShadow--md);
+    }
+  }
+`);
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts
new file mode 100644
index 00000000000..817d213a556
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyControlBar/index.ts
@@ -0,0 +1 @@
+export * from './TopologyControlBar';
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx
new file mode 100644
index 00000000000..d0724e23ca4
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.test.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { TopologyView } from './index';
+
+describe('TopologyView', () => {
+  test('should display an empty topology correctly', () => {
+    const view = mount(<TopologyView className="my-test-class" id="simple-test-id" />);
+    expect(view).toMatchSnapshot();
+  });
+
+  test('should display topology correctly', () => {
+    const view = mount(
+      <TopologyView
+        className="my-test-class"
+        id="simple-test-id"
+        contextToolbar={<div id="test-context-bar" />}
+        viewToolbar={<div id="test-view-bar" />}
+        controlBar={<div id="test-control-bar" />}
+      >
+        <div id="test-canvas" />
+      </TopologyView>
+    );
+    expect(view).toMatchSnapshot();
+  });
+});
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx
new file mode 100644
index 00000000000..05bca28ea1f
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/TopologyView.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+
+import { topologyViewCss } from './css/topology-view-css';
+
+topologyViewCss.inject();
+
+export interface TopologyViewProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes added to the view */
+  className?: string;
+  /** Topology inner container (canvas)  */
+  children?: React.ReactNode;
+  /** Context toolbar to be displayed at the top of the view, should contain components for changing context */
+  contextToolbar?: React.ReactNode;
+  /** View toolbar to be displayed below the context toolbar, should contain components for changing view contents */
+  viewToolbar?: React.ReactNode;
+  /** Topology control bar (typically a TopologyControlBar), used to manipulate the graph layout */
+  controlBar?: React.ReactNode;
+};
+
+export const TopologyView: React.FunctionComponent<TopologyViewProps> = ({
+  className = '',
+  contextToolbar = null,
+  viewToolbar = null,
+  children = null,
+  controlBar = null,
+  ...props
+}: TopologyViewProps) => {
+  return (
+    <Stack className={className} {...props}>
+      {contextToolbar && <StackItem isFilled={false}>{contextToolbar}</StackItem>}
+      {viewToolbar && <StackItem isFilled={false}>{viewToolbar}</StackItem>}
+      <StackItem isFilled>
+        <div className="pf-topology-content">
+          {children}
+          {controlBar && <span className="pf-topology-control-bar">{controlBar}</span>}
+        </div>
+      </StackItem>
+    </Stack>
+  );
+};
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap b/packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap
new file mode 100644
index 00000000000..2fc3c1d9f84
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/__snapshots__/TopologyView.test.tsx.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TopologyView should display an empty topology correctly 1`] = `
+.pf-topology-content {
+  display: flex;
+  background-color: #ededed;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+<Component
+  className="my-test-class"
+  id="simple-test-id"
+>
+  <Stack
+    className="my-test-class"
+    component="div"
+    gutter={null}
+    id="simple-test-id"
+  >
+    <div
+      className="pf-l-stack my-test-class"
+      id="simple-test-id"
+    >
+      <StackItem
+        className=""
+        isFilled={true}
+      >
+        <div
+          className="pf-l-stack__item pf-m-fill"
+        >
+          <div
+            className="pf-topology-content"
+          />
+        </div>
+      </StackItem>
+    </div>
+  </Stack>
+</Component>
+`;
+
+exports[`TopologyView should display topology correctly 1`] = `
+.pf-topology-control-bar {
+  display: block;
+  position: absolute;
+  bottom: 1rem;
+  left: 2rem;
+}
+.pf-topology-content {
+  display: flex;
+  background-color: #ededed;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+<Component
+  className="my-test-class"
+  contextToolbar={
+    <div
+      id="test-context-bar"
+    />
+  }
+  controlBar={
+    <div
+      id="test-control-bar"
+    />
+  }
+  id="simple-test-id"
+  viewToolbar={
+    <div
+      id="test-view-bar"
+    />
+  }
+>
+  <Stack
+    className="my-test-class"
+    component="div"
+    gutter={null}
+    id="simple-test-id"
+  >
+    <div
+      className="pf-l-stack my-test-class"
+      id="simple-test-id"
+    >
+      <StackItem
+        className=""
+        isFilled={false}
+      >
+        <div
+          className="pf-l-stack__item"
+        >
+          <div
+            id="test-context-bar"
+          />
+        </div>
+      </StackItem>
+      <StackItem
+        className=""
+        isFilled={false}
+      >
+        <div
+          className="pf-l-stack__item"
+        >
+          <div
+            id="test-view-bar"
+          />
+        </div>
+      </StackItem>
+      <StackItem
+        className=""
+        isFilled={true}
+      >
+        <div
+          className="pf-l-stack__item pf-m-fill"
+        >
+          <div
+            className="pf-topology-content"
+          >
+            <div
+              id="test-canvas"
+            />
+            <span
+              className="pf-topology-control-bar"
+            >
+              <div
+                id="test-control-bar"
+              />
+            </span>
+          </div>
+        </div>
+      </StackItem>
+    </div>
+  </Stack>
+</Component>
+`;
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts b/packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts
new file mode 100644
index 00000000000..a7df8682e79
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/css/topology-view-css.ts
@@ -0,0 +1,33 @@
+import { StyleSheet } from '@patternfly/react-styles';
+
+export const topologyViewCss = StyleSheet.parse(`
+  .pf-topology-content {
+    background-color: var(--pf-global--Color--light-200);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pf-topology-control-bar {
+    position: absolute;
+    bottom: var(--pf-global--spacer--md);
+    left: var(--pf-global--spacer--xl);
+    
+    .pf-c-button.pf-m-tertiary {
+      background-color: var(--pf-global--BackgroundColor--100);
+      border: none;
+      border-radius: var(--pf-global--BorderRadius--sm);
+      box-shadow: var(--pf-global--BoxShadow--sm);
+    }
+    .pf-c-button.pf-m-tertiary:after {
+      display: none;
+    }
+    .pf-c-button.pf-m-tertiary:hover {
+      border: none;
+      box-shadow: var(--pf-global--BoxShadow--md);
+    }
+  }
+`);
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js
new file mode 100644
index 00000000000..0b495858487
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ProjectToolbar.js
@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownPosition,
+  DropdownToggle,
+  DropdownItem,
+  Stack,
+  StackItem,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+const projects = [
+  { id: 1, name: 'Project 1' },
+  { id: 2, name: 'Project 2' },
+  { id: 3, name: 'Project 3' },
+  { id: 4, name: 'Project 4' },
+  { id: 'all', name: 'All' }
+];
+
+const applications = [
+  { id: 1, name: 'Application 1' },
+  { id: 2, name: 'Application 2' },
+  { id: 3, name: 'Application 3' },
+  { id: 4, name: 'Application 4' },
+  { id: 'all', name: 'All' }
+];
+
+export class ProjectToolbar extends React.Component {
+  state = {
+    selectedProject: projects[4],
+    selectedApplication: applications[4],
+    projectDropDownOpen: false,
+    applicationDropDownOpen: false
+  };
+
+  onProjectDropDownToggle = isOpen => {
+    this.setState({ projectDropDownOpen: isOpen });
+  };
+
+  onProjectSelect = (e, project) => {
+    e.preventDefault();
+    this.setState({ selectedProject: project, projectDropDownOpen: false });
+  };
+
+  onApplicationDropDownToggle = isOpen => {
+    this.setState({ applicationDropDownOpen: isOpen });
+  };
+
+  onApplicationSelect = (e, application) => {
+    e.preventDefault();
+    this.setState({ selectedApplication: application, applicationDropDownOpen: false });
+  };
+
+  renderProjectDropdown = () => {
+    const { projectDropDownOpen, selectedProject } = this.state;
+
+    return (
+      <Stack>
+        <StackItem>
+          <label>Project</label>
+        </StackItem>
+        <StackItem>
+          <Dropdown
+            onToggle={this.onProjectDropDownToggle}
+            position={DropdownPosition.right}
+            toggle={<DropdownToggle onToggle={this.onProjectDropDownToggle}>{selectedProject.name}</DropdownToggle>}
+            isOpen={projectDropDownOpen}
+            dropdownItems={projects.map(project => (
+              <DropdownItem key={project.id} onClick={e => this.onProjectSelect(e, project)}>
+                {project.name}
+              </DropdownItem>
+            ))}
+          />
+        </StackItem>
+      </Stack>
+    );
+  };
+
+  renderApplicationDropdown = () => {
+    const { applicationDropDownOpen, selectedApplication } = this.state;
+
+    return (
+      <Stack>
+        <StackItem>
+          <label>Application</label>
+        </StackItem>
+        <StackItem>
+          <Dropdown
+            onToggle={this.onApplicationDropDownToggle}
+            position={DropdownPosition.right}
+            toggle={
+              <DropdownToggle onToggle={this.onApplicationDropDownToggle}>{selectedApplication.name}</DropdownToggle>
+            }
+            isOpen={applicationDropDownOpen}
+            dropdownItems={applications.map(application => (
+              <DropdownItem key={application.id} onClick={e => this.onApplicationSelect(e, application)}>
+                {application.name}
+              </DropdownItem>
+            ))}
+          />
+        </StackItem>
+      </Stack>
+    );
+  };
+
+  render() {
+    return (
+      <Toolbar className="project-toolbar pf-u-mx-md pf-u-mt-md">
+        <ToolbarGroup>
+          <ToolbarItem className="pf-u-mr-xl">{this.renderProjectDropdown()}</ToolbarItem>
+          <ToolbarItem className="pf-u-mr-md">{this.renderApplicationDropdown()}</ToolbarItem>
+        </ToolbarGroup>
+      </Toolbar>
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md
new file mode 100644
index 00000000000..fc4f0248e69
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/Topology.md
@@ -0,0 +1,121 @@
+---
+title: 'TopologyView'
+---
+
+Note: Topology lives in its own package at [`@patternfly/react-topology`](https://www.npmjs.com/package/@patternfly/react-topology)
+
+import { ExternalLinkAltIcon, FilmIcon, GlassCheersIcon } from '@patternfly/react-icons';
+import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology';
+import { ProjectToolbar } from './ProjectToolbar';
+import { ViewToolbar } from './ViewToolbar';
+import './topology-example.scss';
+
+## TopologyView - Default Controls
+
+```js
+import React from 'react';
+import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology';
+import { ProjectToolbar } from './ProjectToolbar';
+import { ViewToolbar } from './ViewToolbar';
+
+class DefaultTopologyView extends React.Component {
+
+  render() {
+    const controlButtons = createTopologyControlButtons();
+
+    return (
+      <div className="topology-example">
+        <TopologyView
+          contextToolbar={<ProjectToolbar />}
+          viewToolbar={<ViewToolbar />}
+          controlBar={<TopologyControlBar controlButtons={controlButtons} />}
+        >
+          <div>CANVAS</div>
+        </TopologyView>
+      </div>
+    );
+  }
+}
+```
+
+## TopologyView - Selected Controls
+
+```js
+import React from 'react';
+import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology';
+import { ViewToolbar } from './ViewToolbar';
+
+class SelectedTopologyView extends React.Component {
+
+  render() {
+    const controlButtons = createTopologyControlButtons({ fitToScreen: false, legend: false });
+
+    return (
+      <div className="topology-example">
+        <TopologyView
+          viewToolbar={<ViewToolbar />}
+          controlBar={<TopologyControlBar controlButtons={controlButtons} />}
+        >
+          <div>CANVAS</div>
+        </TopologyView>
+      </div>
+    );
+  }
+}
+```
+
+## TopologyView - Custom Controls
+
+```js
+import React from 'react';
+import { ExternalLinkAltIcon, FilmIcon, GlassCheersIcon } from '@patternfly/react-icons';
+import { TopologyView, TopologyControlBar, createTopologyControlButtons } from '@patternfly/react-topology';
+import { ViewToolbar } from './ViewToolbar';
+
+class CustomTopologyView extends React.Component {
+
+  render() {
+    const customButtons = [
+      {
+        id: 'custom-1',
+        icon: <ExternalLinkAltIcon />,
+        tooltip: 'External Link',
+        ariaLabel: 'external link',
+        callback: null,
+        disabled: true,
+        hidden: false
+      },
+      {
+        id: 'custom-2',
+        icon: <FilmIcon />,
+        tooltip: 'Watch',
+        ariaLabel: 'watch',
+        callback: null,
+        disabled: false,
+        hidden: false
+      },
+      {
+        id: 'custom-3',
+        icon: <GlassCheersIcon />,
+        tooltip: 'Cheers',
+        ariaLabel: 'cheers',
+        callback: null,
+        disabled: false,
+        hidden: true
+      },
+    ]
+    const controlButtons = createTopologyControlButtons({ fitToScreen: false, customButtons});
+
+    return (
+      <div className="topology-example">
+        <TopologyView
+          viewToolbar={<ViewToolbar />}
+          controlBar={<TopologyControlBar controlButtons={controlButtons} />}
+        >
+          <div>CANVAS</div>
+        </TopologyView>
+      </div>
+    );
+  }
+}
+```
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js
new file mode 100644
index 00000000000..60cf9c8f801
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/ViewToolbar.js
@@ -0,0 +1,139 @@
+import React from 'react';
+import {
+  Button,
+  Dropdown,
+  DropdownPosition,
+  DropdownToggle,
+  DropdownItem,
+  KebabToggle,
+  TextInput,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons';
+
+export class ViewToolbar extends React.Component {
+  state = {
+    filterType: 'Name',
+    filterValue: '',
+    filterDropDownOpen: false,
+    actionKebabOpen: false
+  };
+
+  onFilterDropDownToggle = isOpen => {
+    this.setState({ filterDropDownOpen: isOpen });
+  };
+
+  onFilterTypeSelect = (e, filterType) => {
+    e.preventDefault();
+    this.setState({
+      filterType,
+      filterDropDownOpen: false,
+      filterValue: filterType === this.state.filterType ? this.state.filterValue : ''
+    });
+  };
+
+  handleFilterInputChange = value => {
+    this.setState({ filterValue: value });
+  };
+
+  onActionKebabToggle = isOpen => {
+    this.setState({ actionKebabOpen: isOpen });
+  };
+
+  onActionKebabSelect = (e, action) => {
+    e.preventDefault();
+    this.setState({ actionKebabOpen: false });
+  };
+
+  renderFilterInput = () => {
+    const { filterValue } = this.state;
+    return (
+      <TextInput
+        value={filterValue || ''}
+        type="text"
+        onChange={this.handleFilterInputChange}
+        aria-label="filter text input"
+      />
+    );
+  };
+
+  renderFilterTypeDropdown = () => {
+    const { filterDropDownOpen, filterType } = this.state;
+    return (
+      <Dropdown
+        onToggle={this.onFilterDropDownToggle}
+        position={DropdownPosition.right}
+        className="topology-view-filter-dropdown"
+        toggle={
+          <DropdownToggle onToggle={this.onFilterDropDownToggle}>
+            <FilterIcon className="pf-u-mr-sm" />
+            {filterType}
+          </DropdownToggle>
+        }
+        isOpen={filterDropDownOpen}
+        dropdownItems={[
+          <DropdownItem key="name" onClick={e => this.onFilterTypeSelect(e, 'Name')}>
+            Name
+          </DropdownItem>,
+          <DropdownItem key="type" onClick={e => this.onFilterTypeSelect(e, 'Type')}>
+            Type
+          </DropdownItem>,
+          <DropdownItem key="status" onClick={e => this.onFilterTypeSelect(e, 'Status')}>
+            Status
+          </DropdownItem>
+        ]}
+      />
+    );
+  };
+
+  renderActionsdKebab = () => {
+    const { actionKebabOpen } = this.state;
+
+    return (
+      <Dropdown
+        onToggle={this.onActionKebabToggle}
+        position={DropdownPosition.right}
+        toggle={<KebabToggle onToggle={this.onActionKebabToggle} />}
+        isOpen={actionKebabOpen}
+        isPlain
+        dropdownItems={[
+          <DropdownItem key="action-3" onClick={e => this.onActionKebabSelect(e, 'Action 3')}>
+            Action 3
+          </DropdownItem>,
+          <DropdownItem key="action-4" onClick={e => this.onActionKebabSelect(e, 'Action 4')}>
+            Action 4
+          </DropdownItem>,
+          <DropdownItem isDisabled key="disabled-action" onClick={e => this.onActionKebabSelect(e, 'Disabled Action')}>
+            Disabled Action
+          </DropdownItem>
+        ]}
+      />
+    );
+  };
+
+  render() {
+    return (
+      <Toolbar className="view-toolbar pf-u-mx-md pf-u-my-md">
+        <ToolbarGroup>
+          <ToolbarItem>{this.renderFilterTypeDropdown()}</ToolbarItem>
+          <ToolbarItem className="pf-u-mr-md">{this.renderFilterInput()}</ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Button variant="primary" aria-label="Action 1">
+              Action 1
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem className="pf-u-mx-md">
+            <Button variant="plain" aria-label="Action 2">
+              Action 2
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>{this.renderActionsdKebab()}</ToolbarItem>
+        </ToolbarGroup>
+      </Toolbar>
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss
new file mode 100644
index 00000000000..0e1a203a1b8
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/examples/topology-example.scss
@@ -0,0 +1,19 @@
+.topology-example {
+  margin: -9px;
+  width: calc(100% + 18px);
+  height: 500px;
+
+  .project-toolbar {
+    .pf-c-dropdown > button {
+      justify-content: space-between;
+      width: 150px;
+    }
+  }
+
+  .topology-view-filter-dropdown {
+    > button {
+      justify-content: space-between;
+      width: 130px;
+    }
+  }
+}
diff --git a/packages/patternfly-4/react-topology/src/components/TopologyView/index.ts b/packages/patternfly-4/react-topology/src/components/TopologyView/index.ts
new file mode 100644
index 00000000000..8124fd0742f
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/TopologyView/index.ts
@@ -0,0 +1 @@
+export * from './TopologyView';
diff --git a/packages/patternfly-4/react-topology/src/components/index.ts b/packages/patternfly-4/react-topology/src/components/index.ts
new file mode 100644
index 00000000000..71656309a7d
--- /dev/null
+++ b/packages/patternfly-4/react-topology/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './TopologyView';
+export * from './TopologyControlBar';
diff --git a/packages/patternfly-4/react-virtualized-extension/src/index.js b/packages/patternfly-4/react-topology/src/index.ts
similarity index 100%
rename from packages/patternfly-4/react-virtualized-extension/src/index.js
rename to packages/patternfly-4/react-topology/src/index.ts
diff --git a/packages/patternfly-4/react-topology/tsconfig.base.json b/packages/patternfly-4/react-topology/tsconfig.base.json
new file mode 100644
index 00000000000..44d1b907915
--- /dev/null
+++ b/packages/patternfly-4/react-topology/tsconfig.base.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": false,
+    "target": "es5"
+  },
+  "include": [
+    "./src/*",
+    "./src/**/*"
+  ],
+  "exclude": [
+    "./src/**/**.test.tsx",
+    "./src/**/**.test.ts",
+    "./src/**/examples/**"
+  ]
+}
diff --git a/packages/patternfly-4/react-topology/tsconfig.gen-dts.json b/packages/patternfly-4/react-topology/tsconfig.gen-dts.json
new file mode 100644
index 00000000000..f4158c6576c
--- /dev/null
+++ b/packages/patternfly-4/react-topology/tsconfig.gen-dts.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/js"
+  }
+}
diff --git a/packages/patternfly-4/react-topology/tsconfig.typecheck.json b/packages/patternfly-4/react-topology/tsconfig.typecheck.json
new file mode 100644
index 00000000000..87a71ad6ef0
--- /dev/null
+++ b/packages/patternfly-4/react-topology/tsconfig.typecheck.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": true
+  }
+}
diff --git a/packages/patternfly-4/react-topology/tslint.json b/packages/patternfly-4/react-topology/tslint.json
new file mode 100644
index 00000000000..58864c4611e
--- /dev/null
+++ b/packages/patternfly-4/react-topology/tslint.json
@@ -0,0 +1,40 @@
+{
+  "defaultSeverity": "error",
+  "extends": [
+    "tslint:recommended",
+    "tslint-react",
+    "tslint-config-prettier"
+  ],
+  "rules": {
+    "member-access": [true, "no-public"],
+    "member-ordering": false,
+    "array-type": [
+      true,
+      "array"
+    ],
+    "interface-name": [
+      true,
+      "never-prefix"
+    ],
+    "jsx-boolean-value": [
+      true,
+      "never"
+    ],
+    "jsx-no-lambda": false,
+    "jsx-self-close": true,
+    "jsx-wrap-multiline": true,
+    "object-literal-sort-keys": false,
+    "quotemark": [
+      true,
+      "single",
+      "jsx-double"
+    ],
+    "variable-name": false,
+    "ordered-imports": false
+  },
+  "linterOptions": {
+    "exclude": [
+      "**/*.js"
+    ]
+  }
+}
diff --git a/packages/patternfly-4/react-virtualized-extension/.babelrc b/packages/patternfly-4/react-virtualized-extension/.babelrc
index 40b9ca6c624..25c4221a16d 100644
--- a/packages/patternfly-4/react-virtualized-extension/.babelrc
+++ b/packages/patternfly-4/react-virtualized-extension/.babelrc
@@ -1,6 +1,3 @@
 {
-  "presets": [
-    "../.babelrc.js",
-    "flow"
-  ]
+  "extends": "../.babelrc"
 }
\ No newline at end of file
diff --git a/packages/patternfly-4/react-virtualized-extension/.npmignore b/packages/patternfly-4/react-virtualized-extension/.npmignore
index 378eac25d31..5344519a423 100644
--- a/packages/patternfly-4/react-virtualized-extension/.npmignore
+++ b/packages/patternfly-4/react-virtualized-extension/.npmignore
@@ -1 +1,6 @@
 build
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md
new file mode 100644
index 00000000000..938bba7b66e
--- /dev/null
+++ b/packages/patternfly-4/react-virtualized-extension/CHANGELOG.md
@@ -0,0 +1,182 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.1.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.10...@patternfly/react-virtualized-extension@1.1.11) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.9...@patternfly/react-virtualized-extension@1.1.10) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.8...@patternfly/react-virtualized-extension@1.1.9) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.7...@patternfly/react-virtualized-extension@1.1.8) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.6...@patternfly/react-virtualized-extension@1.1.7) (2019-06-18)
+
+
+### Bug Fixes
+
+* **virtual-grid:** aria-label prop consistency ([#2291](https://github.com/patternfly/patternfly-react/issues/2291)) ([4b7e797](https://github.com/patternfly/patternfly-react/commit/4b7e797))
+
+
+
+
+
+## [1.1.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.4...@patternfly/react-virtualized-extension@1.1.6) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.4...@patternfly/react-virtualized-extension@1.1.5) (2019-06-18)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.3...@patternfly/react-virtualized-extension@1.1.4) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.2...@patternfly/react-virtualized-extension@1.1.3) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.1...@patternfly/react-virtualized-extension@1.1.2) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.1.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.1.0...@patternfly/react-virtualized-extension@1.1.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+# [1.1.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.10...@patternfly/react-virtualized-extension@1.1.0) (2019-06-13)
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [1.0.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.9...@patternfly/react-virtualized-extension@1.0.10) (2019-06-13)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.8...@patternfly/react-virtualized-extension@1.0.9) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.7...@patternfly/react-virtualized-extension@1.0.8) (2019-06-12)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.6...@patternfly/react-virtualized-extension@1.0.7) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.5...@patternfly/react-virtualized-extension@1.0.6) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.4...@patternfly/react-virtualized-extension@1.0.5) (2019-06-11)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.3...@patternfly/react-virtualized-extension@1.0.4) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.2...@patternfly/react-virtualized-extension@1.0.3) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## [1.0.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-virtualized-extension@1.0.1...@patternfly/react-virtualized-extension@1.0.2) (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
+
+
+
+
+
+## 1.0.1 (2019-06-07)
+
+**Note:** Version bump only for package @patternfly/react-virtualized-extension
diff --git a/packages/patternfly-4/react-virtualized-extension/package.json b/packages/patternfly-4/react-virtualized-extension/package.json
index 30b4902329e..cdfe61b841f 100644
--- a/packages/patternfly-4/react-virtualized-extension/package.json
+++ b/packages/patternfly-4/react-virtualized-extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-virtualized-extension",
-  "version": "1.0.0",
+  "version": "1.1.11",
   "description": "This library provides efficient rendering extensions for PatternFly 4 React tables and lists.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -27,16 +27,16 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/",
   "dependencies": {
-    "@patternfly/patternfly": "2.8.2",
-    "@patternfly/react-core": "^3.36.0",
-    "@patternfly/react-icons": "^3.9.3",
-    "@patternfly/react-styles": "^3.3.0",
-    "exenv": "^1.2.2",
-    "react-virtualized": "9.21.1",
+    "@patternfly/patternfly": "2.13.0",
+    "@patternfly/react-core": "^3.48.5",
+    "@patternfly/react-icons": "^3.10.2",
+    "@patternfly/react-styles": "^3.4.2",
     "clsx": "^1.0.1",
     "dom-helpers": "^2.4.0 || ^3.0.0",
+    "exenv": "^1.2.2",
+    "linear-layout-vector": "0.0.1",
     "react-lifecycles-compat": "^3.0.4",
-    "linear-layout-vector": "0.0.1"
+    "react-virtualized": "9.21.1"
   },
   "peerDependencies": {
     "@patternfly/react-table": "^2.10.0",
@@ -48,18 +48,27 @@
   "scripts": {
     "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js",
     "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
-    "build:babel:cjs": "babel src --out-dir dist/js -q",
-    "build:babel:esm": "babel src --out-dir dist/esm -q",
-    "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd  --extensions '.js,.ts,.tsx' -q",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose"
   },
   "devDependencies": {
-    "babel-preset-flow": "^6.23.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
-    "uuid": "^3.3.2",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "uuid": "^3.3.2"
   }
 }
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css
index 12d45ab06eb..572dc381e5b 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.example.css
@@ -35,292 +35,4 @@
   .pf-c-scrollablegrid .pf-c-table .pf-c-table__action {
     width: 10% !important;
   }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-1-col-on-sm {
-    width: 8.333% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-1-col-on-md {
-    width: 8.33% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-1-col-on-lg {
-    width: 8.33% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-1-col-on-xl {
-    width: 8.33% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-2-col-on-sm {
-    width: 16.66% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-2-col-on-md {
-    width: 16.66% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-2-col-on-lg {
-    width: 16.66% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-2-col-on-xl {
-    width: 16.66% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-3-col-on-sm {
-    width: 25% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-3-col-on-md {
-    width: 25% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-3-col-on-lg {
-    width: 25% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-3-col-on-xl {
-    width: 25% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-4-col-on-xl {
-    width: 33.333% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-4-col-on-md {
-    width: 33.333% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-4-col-on-lg {
-    width: 33.333% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-4-col-on-xl {
-    width: 33.333% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-5-col-on-sm {
-    width: 41.67% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-5-col-on-md {
-    width: 41.67% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-5-col-on-lg {
-    width: 41.67% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-5-col-on-xl {
-    width: 41.67% !important;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .pf-m-6-col-on-sm {
-    width: 50% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-6-col-on-md {
-    width: 50% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-6-col-on-lg {
-    width: 50% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-6-col-on-xl {
-    width: 50% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-7-col-on-sm {
-    width: 58.333% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-7-col-on-md {
-    width: 58.333% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-7-col-on-lg {
-    width: 58.333% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-7-col-on-xl {
-    width: 58.333% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-8-col-on-sm {
-    width: 66.66% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-8-col-on-md {
-    width: 66.66% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-8-col-on-lg {
-    width: 66.66% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-8-col-on-xl {
-    width: 66.66% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-9-col-on-sm {
-    width: 75% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-9-col-on-md {
-    width: 75% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-9-col-on-lg {
-    width: 75% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-9-col-on-xl {
-    width: 75% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-10-col-on-sm {
-    width: 83.333% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-10-col-on-md {
-    width: 83.333% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-10-col-on-lg {
-    width: 83.333% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-10-col-on-xl {
-    width: 83.333% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-11-col-on-sm {
-    width: 91.67% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-11-col-on-md {
-    width: 91.67% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-11-col-on-lg {
-    width: 91.67% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-11-col-on-xl {
-    width: 91.67% !important;
-  }
-}
-
-@media screen and (min-width: 576px) and (max-width: 768px) {
-  .pf-m-12-col-on-sm {
-    width: 100% !important;
-  }
-}
-
-@media screen and (min-width: 768px) and (max-width: 992px) {
-  .pf-m-12-col-on-md {
-    width: 100% !important;
-  }
-}
-
-@media screen and (min-width: 992px) and (max-width: 1200px) {
-  .pf-m-12-col-on-lg {
-    width: 100% !important;
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-m-12-col-on-xl {
-    width: 100% !important;
-  }
 }
\ No newline at end of file
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.ts
similarity index 97%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.ts
index ccb17f4b936..4b2ea6f5774 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualGrid.ts
@@ -1,23 +1,4 @@
-/** @flow */
 /* eslint-disable */
-
-import type {
-  CellRenderer,
-  CellRangeRenderer,
-  CellPosition,
-  CellSize,
-  CellSizeGetter,
-  NoContentRenderer,
-  Scroll,
-  ScrollbarPresenceChange,
-  RenderedSection,
-  OverscanIndicesGetter,
-  Alignment,
-  CellCache,
-  StyleCache
-} from './types';
-import type { AnimationTimeoutId } from './utils/requestAnimationTimeout';
-
 import * as React from 'react';
 import clsx from 'clsx';
 import calculateSizeAndPositionDataAndUpdateScrollOffset from './utils/calculateSizeAndPositionDataAndUpdateScrollOffset';
@@ -33,6 +14,22 @@ import scrollbarSize from 'dom-helpers/util/scrollbarSize';
 import { polyfill } from 'react-lifecycles-compat';
 import { requestAnimationTimeout, cancelAnimationTimeout } from './utils/requestAnimationTimeout';
 
+import {
+  CellRenderer,
+  CellRangeRenderer,
+  CellPosition,
+  CellSize,
+  CellSizeGetter,
+  NoContentRenderer,
+  Scroll,
+  ScrollbarPresenceChange,
+  RenderedSection,
+  OverscanIndicesGetter,
+  Alignment,
+  CellCache,
+  StyleCache
+} from './types';
+import { overflow } from 'styled-system';
 /**
  * Specifies the number of milliseconds during which to disable pointer events while a scroll is in progress.
  * This improves performance and makes scrolling smoother.
@@ -56,7 +53,7 @@ type ScrollPosition = {
 };
 
 type Props = {
-  'aria-label': string,
+  'aria-label'?: string,
   'aria-readonly'?: boolean,
 
   /**
@@ -93,19 +90,19 @@ type Props = {
   columnWidth: CellSize,
 
   /** Unfiltered props for the VirtualGrid container. */
-  containerProps?: Object,
+  containerProps?: any,
 
   /** ARIA role for the cell-container.  */
   containerRole: string,
 
   /** Optional inline style applied to inner cell-container */
-  containerStyle: Object,
+  containerStyle: any,
 
   /**
    * If CellMeasurer is used to measure this VirtualGrid's children, this should be a pointer to its CellMeasurerCache.
    * A shared CellMeasurerCache reference enables VirtualGrid and CellMeasurer to share measurement data.
    */
-  deferredMeasurementCache?: Object,
+  deferredMeasurementCache?: any,
 
   /**
    * Used to estimate the total width of a VirtualGrid before all of its columns have actually been measured.
@@ -212,10 +209,10 @@ type Props = {
   scrollToRow: number,
 
   /** Optional inline style */
-  style: Object,
+  style: any,
 
   /** Tab index for focus */
-  tabIndex: ?number,
+  tabIndex?: number,
 
   /** Width of VirtualGrid; this property determines the number of visible (vs virtualized) columns.  */
   width: number,
@@ -236,8 +233,8 @@ type InstanceProps = {
   prevIsScrolling: boolean,
   prevScrollToColumn: number,
   prevScrollToRow: number,
-  prevScrollLeft: ?number,
-  prevScrollTop: ?number,
+  prevScrollLeft?: number,
+  prevScrollTop?: number,
 
   columnSizeAndPositionManager: ScalingCellSizeAndPositionManager,
   rowSizeAndPositionManager: ScalingCellSizeAndPositionManager,
@@ -247,14 +244,14 @@ type InstanceProps = {
 };
 
 type State = {
-  instanceProps: InstanceProps,
-  isScrolling: boolean,
-  scrollDirectionHorizontal: -1 | 1,
-  scrollDirectionVertical: -1 | 1,
-  scrollLeft: number,
-  scrollTop: number,
-  scrollPositionChangeReason: 'observed' | 'requested' | null,
-  needToResetStyleCache: boolean
+  instanceProps?: InstanceProps,
+  isScrolling?: boolean,
+  scrollDirectionHorizontal?: -1 | 1,
+  scrollDirectionVertical?: -1 | 1,
+  scrollLeft?: number,
+  scrollTop?: number,
+  scrollPositionChangeReason?: 'observed' | 'requested',
+  needToResetStyleCache?: boolean
 };
 
 /**
@@ -307,7 +304,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
   _scrollbarPresenceChanged = false;
   _scrollingContainer: Element;
 
-  _childrenToDisplay: React.Element<*>[];
+  _childrenToDisplay: React.ReactElement<any>[];
 
   _columnStartIndex: number;
   _columnStopIndex: number;
@@ -321,7 +318,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
   _initialScrollTop: number;
   _initialScrollLeft: number;
 
-  _disablePointerEventsTimeoutId: ?AnimationTimeoutId;
+  _disablePointerEventsTimeoutId;
 
   _styleCache: StyleCache = {};
   _cellCache: CellCache = {};
@@ -461,11 +458,11 @@ class VirtualGrid extends React.PureComponent<Props, State> {
             : SCROLL_DIRECTION_BACKWARD
           : this.state.scrollDirectionVertical;
 
-      const newState: $Shape<State> = {
+      const newState: State = {
         isScrolling: true,
         scrollDirectionHorizontal,
         scrollDirectionVertical,
-        scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED
+        scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.OBSERVED as 'observed' | 'requested'
       };
 
       if (!autoHeight) {
@@ -523,7 +520,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
    * This function should be called if dynamic column or row sizes have changed but nothing else has.
    * Since VirtualGrid only receives :columnCount and :rowCount it has no way of detecting when the underlying data changes.
    */
-  recomputeVirtualGridSize({ columnIndex = 0, rowIndex = 0 }: CellPosition = {}) {
+  recomputeVirtualGridSize({ columnIndex = 0, rowIndex = 0 } = {}) {
     const { scrollToColumn, scrollToRow } = this.props;
     const { instanceProps } = this.state;
 
@@ -779,8 +776,8 @@ class VirtualGrid extends React.PureComponent<Props, State> {
    * 2) New scroll props overriding the current state
    * 3) Cells-count or cells-size has changed, making previous scroll offsets invalid
    */
-  static getDerivedStateFromProps(nextProps: Props, prevState: State): $Shape<State> {
-    const newState = {};
+  static getDerivedStateFromProps(nextProps: Props, prevState: State): State {
+    const newState: State = {};
     const { instanceProps } = prevState;
 
     if (
@@ -917,7 +914,17 @@ class VirtualGrid extends React.PureComponent<Props, State> {
 
     const isScrolling = this._isScrolling();
 
-    const gridStyle: Object = {
+    const gridStyle: {
+      boxSizing: string,
+      direction: string,
+      height: string | number,
+      position: string,
+      width: string | number,
+      WebkitOverflowScrolling: string,
+      willChange: string,
+      overflowX?: string,
+      overflowY?: string
+    } = {
       boxSizing: 'border-box',
       direction: 'ltr',
       height: autoHeight ? 'auto' : height,
@@ -1291,8 +1298,8 @@ class VirtualGrid extends React.PureComponent<Props, State> {
     prevState: State,
     scrollLeft?: number,
     scrollTop?: number
-  }): $Shape<State> {
-    const newState: Object = {
+  }): State {
+    const newState: any = {
       scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASONS.REQUESTED
     };
 
@@ -1335,7 +1342,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
   }
 
   static _wrapSizeGetter(value: CellSize): CellSizeGetter {
-    return typeof value === 'function' ? value : () => (value: any);
+    return typeof value === 'function' ? value : () => value as any;
   }
 
   static _getCalculatedScrollLeft(nextProps: Props, prevState: State) {
@@ -1363,7 +1370,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
     return VirtualGrid._getCalculatedScrollLeft(props, state);
   }
 
-  static _getScrollLeftForScrollToColumnStateUpdate(nextProps: Props, prevState: State): $Shape<State> {
+  static _getScrollLeftForScrollToColumnStateUpdate(nextProps: Props, prevState: State): State {
     const { scrollLeft } = prevState;
     const calculatedScrollLeft = VirtualGrid._getCalculatedScrollLeft(nextProps, prevState);
 
@@ -1437,7 +1444,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
     }
   }
 
-  static _getScrollTopForScrollToRowStateUpdate(nextProps: Props, prevState: State): $Shape<State> {
+  static _getScrollTopForScrollToRowStateUpdate(nextProps: Props, prevState: State): State {
     const { scrollTop } = prevState;
     const calculatedScrollTop = VirtualGrid._getCalculatedScrollTop(nextProps, prevState);
 
@@ -1464,7 +1471,7 @@ class VirtualGrid extends React.PureComponent<Props, State> {
     // This invalid event can be detected by comparing event.target to this component's scrollable DOM element.
     // See issue #404 for more information.
     if (event.target === this._scrollingContainer) {
-      this.handleScrollEvent((event.target: any));
+      this.handleScrollEvent(event.target as any);
     }
   };
 }
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.ts
similarity index 96%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.ts
index 02180fc3760..d6708ecf229 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/VirtualTableBody.ts
@@ -1,8 +1,7 @@
-/** @flow */
 /* eslint-disable */
 
 import * as React from 'react';
-import type {
+import {
   NoContentRenderer,
   Alignment,
   CellSize,
@@ -11,8 +10,6 @@ import type {
   RenderedSection,
   CellRendererParams,
   Scroll as VirtualGridScroll,
-  RowRenderer,
-  RenderedRows,
   Scroll
 } from './types';
 
@@ -55,7 +52,7 @@ type Props = {
 
   /** Callback invoked with information about the slice of rows that were just rendered.  */
 
-  onRowsRendered: (params: RenderedRows) => void,
+  onRowsRendered: (params: any) => void,
 
   /**
    * Callback invoked whenever the scroll offset changes within the inner scrollable region.
@@ -76,7 +73,7 @@ type Props = {
   rowHeight: CellSize,
 
   /** Responsible for rendering a row given an index; ({ index: number }): node */
-  rowRenderer: RowRenderer,
+  rowRenderer: any,
 
   /** Number of rows in list. */
   rowCount: number,
@@ -99,9 +96,9 @@ type Props = {
   /** Width of list */
   width: number,
 
-  columns: Array,
+  columns: any[],
 
-  rows: Array
+  rows: any[]
 };
 
 export default class VirtualTableBody extends React.PureComponent<Props> {
@@ -118,7 +115,7 @@ export default class VirtualTableBody extends React.PureComponent<Props> {
     style: {}
   };
 
-  VirtualGrid: ?React.ElementRef<typeof VirtualGrid>;
+  VirtualGrid: any;
 
   forceUpdateVirtualGrid() {
     if (this.VirtualGrid) {
@@ -199,11 +196,12 @@ export default class VirtualTableBody extends React.PureComponent<Props> {
 
     const classNames = clsx('ReactVirtualized__List', className);
 
+    const VirtualGridAny = VirtualGrid as any;
     return (
       // note: these aria props if rendered will break a11y for role="presentation"
       // this approach attempts to fix non standard table grids
       // see: https://www.html5accessibility.com/tests/aria-table-fix.html
-      <VirtualGrid
+      <VirtualGridAny
         {...this.props}
         style={{
           tableLayout: 'fixed',
@@ -260,7 +258,7 @@ export default class VirtualTableBody extends React.PureComponent<Props> {
     });
   };
 
-  _setRef = (ref: ?React.ElementRef<typeof VirtualGrid>) => {
+  _setRef = (ref: any) => {
     this.VirtualGrid = ref;
   };
 
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md
index 73ced06a489..9c37e7b24f7 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/Virtualized.md
@@ -73,7 +73,7 @@ class VirtualizedExample extends React.Component {
       const {rows, columns} = this.state;
       const text = rows[index].cells[0];
 
-      const className = clsx({
+      const className = clsx('pf-l-grid', {
         isVisible: isVisible
       });
 
@@ -216,7 +216,7 @@ class SortableExample extends React.Component {
       const {rows, columns} = this.state;
       const text = rows[index].cells[0];
 
-      const className = clsx({
+      const className = clsx('pf-l-grid', {
         isVisible: isVisible
       });
 
@@ -365,7 +365,7 @@ class SelectableExample extends React.Component {
       const {rows, columns} = this.state;
       const text = rows[index].cells[0];
 
-      const className = clsx({
+      const className = clsx('pf-l-grid', {
         isVisible: isVisible
       });
 
@@ -518,7 +518,7 @@ class ActionsExample extends React.Component {
       const {rows, columns, actions} = this.state;
       const text = rows[index].cells[0];
 
-      const className = clsx({
+      const className = clsx('pf-l-grid', {
         isVisible: isVisible
       });
 
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md
index 1ab9a27f098..77fde3c1e1b 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/WindowScroller.md
@@ -95,7 +95,7 @@ class WindowScrollerExample extends React.Component {
       const {rows, columns} = this.state;
       const text = rows[index].cells[0];
 
-      const className = clsx({
+      const className = clsx('pf-l-grid', {
         isVisible: isVisible
       });
 
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.ts
similarity index 93%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.ts
index 24cb2384f7a..c1bc8ace6f8 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/accessibilityOverscanIndicesGetter.ts
@@ -1,6 +1,4 @@
-// @flow
-
-import type { OverscanIndicesGetterParams, OverscanIndices } from './types';
+import { OverscanIndicesGetterParams, OverscanIndices } from './types';
 
 export const SCROLL_DIRECTION_BACKWARD = -1;
 export const SCROLL_DIRECTION_FORWARD = 1;
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.ts
similarity index 98%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.ts
index 857546d5216..493b5104b60 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultCellRangeRenderer.ts
@@ -1,7 +1,6 @@
-/** @flow */
 /* eslint-disable */
 
-import type { CellRangeRendererParams } from './types';
+import { CellRangeRendererParams } from './types';
 
 /**
  * Default implementation of cellRangeRenderer used by Grid.
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.ts
similarity index 91%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.ts
index 4e2ed49204f..7ea879f740b 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/defaultOverscanIndicesGetter.ts
@@ -1,6 +1,4 @@
-// @flow
-
-import type { OverscanIndicesGetterParams, OverscanIndices } from './types';
+import { OverscanIndicesGetterParams, OverscanIndices } from './types';
 
 export const SCROLL_DIRECTION_BACKWARD = -1;
 export const SCROLL_DIRECTION_FORWARD = 1;
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.ts
similarity index 100%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/index.ts
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.ts
similarity index 84%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.ts
index fd450b44a15..b8b3109eb7d 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/types.ts
@@ -1,24 +1,22 @@
-// @flow
-
 import * as React from 'react';
 import ScalingCellSizeAndPositionManager from './utils/ScalingCellSizeAndPositionManager';
 
-export type CellPosition = { columnIndex: number, rowIndex: number };
+export type CellPosition = { columnIndex?: number, rowIndex?: number };
 
 export type CellRendererParams = {
   columnIndex: number,
   isScrolling: boolean,
   isVisible: boolean,
   key: string,
-  parent: Object,
+  parent: any,
   rowIndex: number,
-  style: Object
+  style: any
 };
 
-export type CellRenderer = (props: CellRendererParams) => React.Element<*>;
+export type CellRenderer = (props: CellRendererParams) => React.ReactElement<any>;
 
-export type CellCache = { [key: string]: React.Element<*> };
-export type StyleCache = { [key: string]: Object };
+export type CellCache = { [key: string]: React.ReactElement<any> };
+export type StyleCache = { [key: string]: any };
 
 export type CellRangeRendererParams = {
   cellCache: CellCache,
@@ -26,11 +24,11 @@ export type CellRangeRendererParams = {
   columnSizeAndPositionManager: ScalingCellSizeAndPositionManager,
   columnStartIndex: number,
   columnStopIndex: number,
-  deferredMeasurementCache?: Object,
+  deferredMeasurementCache?: any,
   horizontalOffsetAdjustment: number,
   isScrolling: boolean,
   isScrollingOptOut: boolean,
-  parent: Object,
+  parent: any,
   rowSizeAndPositionManager: ScalingCellSizeAndPositionManager,
   rowStartIndex: number,
   rowStopIndex: number,
@@ -38,17 +36,17 @@ export type CellRangeRendererParams = {
   scrollTop: number,
   styleCache: StyleCache,
   verticalOffsetAdjustment: number,
-  visibleColumnIndices: Object,
-  visibleRowIndices: Object
+  visibleColumnIndices: any,
+  visibleRowIndices: any
 };
 
-export type CellRangeRenderer = (params: CellRangeRendererParams) => React.Element<*>[];
+export type CellRangeRenderer = (params: CellRangeRendererParams) => React.ReactElement<any>[];
 
 export type CellSizeGetter = (params: { index: number }) => number;
 
 export type CellSize = CellSizeGetter | number;
 
-export type NoContentRenderer = () => React.Element<*> | null;
+export type NoContentRenderer = () => React.ReactElement<any> | null;
 
 export type Scroll = {
   clientHeight: number,
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.ts
similarity index 98%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.ts
index 64cd9021196..7c32f03fd2a 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/CellSizeAndPositionManager.ts
@@ -1,8 +1,7 @@
-/** @flow */
 /* eslint-disable */
 
 import LinearLayoutVector from 'linear-layout-vector';
-import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types';
+import { Alignment, CellSizeGetter, VisibleCellRange } from '../types';
 
 type CellSizeAndPositionManagerParams = {
   cellCount: number,
@@ -40,7 +39,7 @@ type SizeAndPositionData = {
 export default class CellSizeAndPositionManager {
   // Cache of size and position data for cells, mapped by cell index.
   // Note that invalid values may exist in this map so only rely on cells up to this._lastMeasuredIndex
-  _layoutVector: LinearLayoutVector;
+  _layoutVector;
 
   // Measurements for cells up to this index can be trusted; cells afterward should be estimated.
   _lastMeasuredIndex = -1;
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.ts
similarity index 98%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.ts
index 3686a83af4d..3414b9a910f 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/ScalingCellSizeAndPositionManager.ts
@@ -1,7 +1,6 @@
-/** @flow */
 /* eslint-disable */
 
-import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types';
+import { Alignment, CellSizeGetter, VisibleCellRange } from '../types';
 
 import CellSizeAndPositionManager from './CellSizeAndPositionManager';
 import { getMaxElementSize } from './maxElementSize.js';
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.ts
similarity index 100%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/animationFrame.ts
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.ts
similarity index 96%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.ts
index f5c5eb2909f..a249213838c 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/calculateSizeAndPositionDataAndUpdateScrollOffset.ts
@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * Helper method that determines when to recalculate row or column metadata.
  */
@@ -9,7 +7,7 @@ type Params<T> = {
   cellCount: number,
 
   // Width or height of cells for the current axis
-  cellSize: ?number,
+  cellSize?: number,
 
   // Method to invoke if cell metadata should be recalculated
   computeMetadataCallback: (props: T) => void,
@@ -21,7 +19,7 @@ type Params<T> = {
   nextCellsCount: number,
 
   // Newly updated width or height of cells for the current axis
-  nextCellSize: ?number,
+  nextCellSize?: number,
 
   // Newly updated scroll-to-index
   nextScrollToIndex: number,
@@ -43,7 +41,7 @@ export default function calculateSizeAndPositionDataAndUpdateScrollOffset({
   nextScrollToIndex,
   scrollToIndex,
   updateScrollOffsetForScrollToIndex
-}: Params<*>) {
+}: Params<any>) {
   // Don't compare cell sizes if they are functions because inline functions would cause infinite loops.
   // In that event users should use the manual recompute methods to inform of changes.
   if (
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.ts
similarity index 100%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/createCallbackMemoizer.ts
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.ts
similarity index 78%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.ts
index 506c0c5b62a..ebd82d343dc 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/maxElementSize.ts
@@ -1,11 +1,9 @@
-// @flow
-
 const DEFAULT_MAX_ELEMENT_SIZE = 1500000;
 const CHROME_MAX_ELEMENT_SIZE = 1.67771e7;
 
 const isBrowser = () => typeof window !== 'undefined';
 
-const isChrome = () => !!window.chrome && !!window.chrome.webstore;
+const isChrome = () => !!(window as any).chrome && !!(window as any).chrome.webstore;
 
 export const getMaxElementSize = (): number => {
   if (isBrowser()) {
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.ts
similarity index 100%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/requestAnimationTimeout.ts
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.ts
similarity index 97%
rename from packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.ts
index c0cb6347b9f..e5d5e0fd96c 100644
--- a/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.js
+++ b/packages/patternfly-4/react-virtualized-extension/src/components/Virtualized/utils/updateScrollIndexHelper.ts
@@ -1,6 +1,4 @@
-// @flow
-
-import type { Alignment, CellSize } from '../types';
+import { Alignment, CellSize } from '../types';
 
 import ScalingCellSizeAndPositionManager from './ScalingCellSizeAndPositionManager.js';
 
diff --git a/packages/patternfly-4/react-virtualized-extension/src/components/index.js b/packages/patternfly-4/react-virtualized-extension/src/components/index.ts
similarity index 100%
rename from packages/patternfly-4/react-virtualized-extension/src/components/index.js
rename to packages/patternfly-4/react-virtualized-extension/src/components/index.ts
diff --git a/packages/patternfly-4/react-virtualized-extension/src/index.ts b/packages/patternfly-4/react-virtualized-extension/src/index.ts
new file mode 100644
index 00000000000..07635cbbc8e
--- /dev/null
+++ b/packages/patternfly-4/react-virtualized-extension/src/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/react-icons/.babelrc b/packages/react-icons/.babelrc
index d0be3075281..d51d42dfe95 100644
--- a/packages/react-icons/.babelrc
+++ b/packages/react-icons/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["../patternfly-4/.babelrc.js"]
-}
+  "extends": "../patternfly-4/.babelrc"
+}
\ No newline at end of file
diff --git a/packages/react-icons/.npmignore b/packages/react-icons/.npmignore
new file mode 100644
index 00000000000..dd2cdd7ae6b
--- /dev/null
+++ b/packages/react-icons/.npmignore
@@ -0,0 +1,5 @@
+dist/**/demos
+dist/**/examples
+dist/**/__snapshots__
+dist/**/*.test.js
+dist/**/*.map
diff --git a/packages/react-icons/CHANGELOG.md b/packages/react-icons/CHANGELOG.md
index f4caf6ab088..99ab96efbff 100644
--- a/packages/react-icons/CHANGELOG.md
+++ b/packages/react-icons/CHANGELOG.md
@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.10.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@3.10.1...@patternfly/react-icons@3.10.2) (2019-06-14)
+
+
+### Bug Fixes
+
+* **react-icons:** add noVerticalAlign prop to d.ts file ([#2238](https://github.com/patternfly/patternfly-react/issues/2238)) ([c50143c](https://github.com/patternfly/patternfly-react/commit/c50143c)), closes [#2237](https://github.com/patternfly/patternfly-react/issues/2237)
+
+
+
+
+
+## [3.10.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@3.10.0...@patternfly/react-icons@3.10.1) (2019-06-14)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+
+
+
+
+# 3.10.0 (2019-06-13)
+
+
+### Bug Fixes
+
+* **topology:** Fixes JS dist for react-topology ([#2230](https://github.com/patternfly/patternfly-react/issues/2230)) ([337510a](https://github.com/patternfly/patternfly-react/commit/337510a))
+
+
+### Features
+
+* **build:** add source maps ([#2142](https://github.com/patternfly/patternfly-react/issues/2142)) ([5076c48](https://github.com/patternfly/patternfly-react/commit/5076c48))
+
+
+
+
+
+## [3.9.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@3.9.4...@patternfly/react-icons@3.9.5) (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+
+
+
+
+## 3.9.4 (2019-06-10)
+
+**Note:** Version bump only for package @patternfly/react-icons
+
+
+
+
+
 ## 3.9.3 (2019-05-29)
 
 **Note:** Version bump only for package @patternfly/react-icons
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 6087c271ad2..afd6321fdf0 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-icons",
-  "version": "3.9.3",
+  "version": "3.10.2",
   "description": "PatternFly 4 Icons as React Components",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -25,17 +25,26 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build": "node ./build/generateIcons.js && yarn build:babel && node ./scripts/copyTS.js",
-    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm' && yarn build:babel:umd",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js -q",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm -q",
-    "build:babel:umd": "cross-env BABEL_ENV=production:umd babel dist/esm --out-dir dist/umd --plugins transform-es2015-modules-umd -q",
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --source-maps --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel --source-maps --extensions '.js' dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     "clean": "rimraf dist src/icons src/index.js src/index.d.ts"
   },
   "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "@fortawesome/free-regular-svg-icons": "^5.7.2",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@patternfly/patternfly": "2.8.2",
+    "@patternfly/patternfly": "2.13.0",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",
     "node-plop": "^0.15.0",
diff --git a/packages/react-icons/src/common.d.ts b/packages/react-icons/src/common.d.ts
index bf05e62110f..6c376905f50 100644
--- a/packages/react-icons/src/common.d.ts
+++ b/packages/react-icons/src/common.d.ts
@@ -12,6 +12,7 @@ export interface IconProps extends Omit<HTMLProps<SVGElement>, 'size'> {
   color?: string;
   size?: OneOf<typeof IconSize, keyof typeof IconSize>;
   title?: string;
+  noVerticalAlign?: boolean;
 }
 
 export const propTypes: Record<'size' | 'color', any>;
diff --git a/packages/react-icons/src/common.js b/packages/react-icons/src/common.js
index a7362bb9cc3..234ec624215 100644
--- a/packages/react-icons/src/common.js
+++ b/packages/react-icons/src/common.js
@@ -10,13 +10,15 @@ export const IconSize = {
 export const propTypes = {
   color: PropTypes.string,
   size: PropTypes.oneOf(Object.keys(IconSize)),
-  title: PropTypes.string
+  title: PropTypes.string,
+  noVerticalAlign: PropTypes.bool
 };
 
 export const defaultProps = {
   color: 'currentColor',
   size: IconSize.sm,
-  title: null
+  title: null,
+  noVerticalAlign: false
 };
 
 export const getSize = size => {
diff --git a/scripts/generators/package/package.json.hbs b/scripts/generators/package/package.json.hbs
index 8e1e1d7c449..34c4b24480e 100644
--- a/scripts/generators/package/package.json.hbs
+++ b/scripts/generators/package/package.json.hbs
@@ -35,11 +35,23 @@
   "scripts": {
     {{#if buildsWithBabel}}
     "build": "yarn build:babel",
-    "build:babel": "concurrently 'yarn build:babel:cjs' 'yarn build:babel:esm'",
-    "build:babel:cjs": "cross-env BABEL_ENV=production:cjs babel src --out-dir dist/js",
-    "build:babel:esm": "cross-env BABEL_ENV=production:esm babel src --out-dir dist/esm"
+    "build:babel": "concurrently 'yarn build:babel:esm && yarn build:babel:umd' 'yarn build:babel:cjs'",
+    "build:babel:cjs": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/js --presets=@babel/env",
+    "build:babel:esm": "babel --extensions '.js,.ts,.tsx' src --out-dir dist/esm",
+    "build:babel:umd": "babel dist/esm --out-dir dist/umd --plugins=transform-es2015-modules-umd",
     {{/if}}
   },
   "dependencies": {},
-  "devDependencies": {}
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-typescript": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-typescript-to-proptypes": "^0.17.1",
+  }
 }
diff --git a/scripts/hashDir.js b/scripts/hashDir.js
index 5b72b61a80c..8b3cbbe16ef 100644
--- a/scripts/hashDir.js
+++ b/scripts/hashDir.js
@@ -3,49 +3,33 @@ const path = require('path');
 const crypto = require('crypto');
 
 // http://stackoverflow.com/a/5827895/4241030
-function filewalker(dir, done) {
+function filewalker(dir) {
   let results = [];
 
-  fs.readdir(dir, function(err, list) {
-    if (err) return done(err);
+	fs.readdirSync(dir).forEach(file => {
+    filePath = path.resolve(dir, file);
 
-    var pending = list.length;
-
-    if (!pending) return done(null, results);
-
-    list.forEach(function(file){
-      file = path.resolve(dir, file);
-
-      fs.stat(file, function(err, stat){
-        // If directory, execute a recursive call
-        if (stat && stat.isDirectory()) {
-          filewalker(file, function(err, res){
-            results = results.concat(res);
-            if (!--pending) done(null, results);
-          });
-        } else {
-          results.push(file);
-          if (!--pending) done(null, results);
-        }
-      });
-    });
+    const stat = fs.statSync(filePath);
+    // If directory, execute a recursive call
+    if (stat && stat.isDirectory() && !stat.isSymbolicLink()) {
+      results = results.concat(filewalker(filePath));
+    } else if (stat && stat.isFile()) {
+      results.push(filePath);
+    }
   });
+
+  return results;
 };
 
 function hashDir(dirPath) {
   const md5 = crypto.createHash('md5');
 
-  return new Promise((resolve, reject) => {
-    filewalker(dirPath, (err, files) => {
-      if (err) reject(err);
-
-      files.sort().forEach(file => {
-        const fileContents = fs.readFileSync(file);
-        md5.update(fileContents);
-      });
-      resolve(md5.digest('hex'));
-    })
+  const files = filewalker(dirPath);
+  files.sort().forEach(file => {
+    const fileContents = fs.readFileSync(file);
+    md5.update(fileContents);
   });
+  return md5.digest('hex');
 }
 
 module.exports = {
diff --git a/scripts/incrementalBuild.js b/scripts/incrementalBuild.js
index bb894240ba1..06bef325bf3 100644
--- a/scripts/incrementalBuild.js
+++ b/scripts/incrementalBuild.js
@@ -1,3 +1,5 @@
+// This script should be replaced by some standard incremental build system
+// `tsc` is a pretty good example...
 const fs = require('fs');
 const { hashDir } = require("./hashDir");
 const Project = require('@lerna/project');
@@ -17,16 +19,26 @@ const isPf4 = process.argv.length > 2 && process.argv[2] === 'pf4';
 const commonPackages = [
   '@patternfly/react-icons'
 ];
+
 // Assume src directory gets made into dist
-const getDir = (packageName) => {
+const getSrcDirs = packageName => {
   switch(packageName) {
     case '@patternfly/react-icons':
-      return 'build'
+      return ['build', 'src']
     default:
-      return 'src'
+      return ['src']
   }
 };
 
+const hashPackageSrc = (packageLoc, packageName) => {
+  let hash = 0;
+  for (let srcDir of getSrcDirs(packageName)) {
+    hash += hashDir(`${packageLoc}/${srcDir}`);
+  }
+
+  return hash;
+}
+
 // These are packages we need to rebuild
 async function getInvalidPackages() {
   const packages = (await new Project(__dirname).getPackages())
@@ -39,8 +51,7 @@ async function getInvalidPackages() {
       : true) // Based off argv
 
   for (let p of packages) {
-    const watchDir = getDir(p.name);
-    p.hash = await hashDir(`${p.location}/${watchDir}`);
+    p.hash = hashPackageSrc(p.location, p.name);
     p.valid = cache && cache[p.name] === p.hash;
     if (p.valid) {
       console.info('Skipping', p.name, '(already built).');
@@ -50,25 +61,21 @@ async function getInvalidPackages() {
   return packages.filter(p => !p.valid);
 }
 
-async function incrementalBuild() {
-  const packages = await getInvalidPackages();
-
+getInvalidPackages().then(packages => {
   if (packages.length > 0) {
     // Run for all invalid packages
-    await RunCommand({
+    RunCommand({
       cwd: '.',
       script: 'build',
       npmClient: 'yarn',
-      scope: packages.map(p => p.name),
-      stream: true
-    });
-    // Mark as valid
-    packages.forEach(p => cache[p.name] = p.hash);
-    if (!fs.existsSync('.cache')) {
-      fs.mkdirSync('.cache');
-    }
-    fs.writeFileSync(cacheFile, JSON.stringify(cache, null, 2));
+      scope: packages.map(p => p.name)
+    }).then(() => {
+      // Mark as valid
+      packages.forEach(p => cache[p.name] = p.hash);
+      if (!fs.existsSync('.cache')) {
+        fs.mkdirSync('.cache');
+      }
+      fs.writeFileSync(cacheFile, JSON.stringify(cache, null, 2));
+    })
   }
-}
-
-incrementalBuild().then();
+});
diff --git a/test.env.js b/test.env.js
index a339faf05a5..767857b265e 100644
--- a/test.env.js
+++ b/test.env.js
@@ -1,6 +1,6 @@
-import 'raf/polyfill';
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+require('raf/polyfill');
+const { configure } = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
 
 const MutationObserverPolyfill = require('mutation-observer');
 // referenced from '@novnc/nvnc/core/util/events.js'
diff --git a/yarn.lock b/yarn.lock
index 4c88df211c6..b61edd80afd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -302,13 +302,6 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-export-default-from" "^7.2.0"
 
-"@babel/plugin-proposal-export-namespace-from@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.2.0.tgz#308fd4d04ff257fc3e4be090550840eeabad5dd9"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.2.0"
-
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -375,12 +368,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-export-namespace-from@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.2.0.tgz#8d257838c6b3b779db52c0224443459bd27fb039"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
 "@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c"
@@ -589,12 +576,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-object-assign@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.2.0.tgz#6fdeea42be17040f119e38e23ea0f49f31968bde"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
 "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.2.0.tgz#b35d4c10f56bab5d650047dad0f1d8e8814b6598"
@@ -1733,9 +1714,9 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
-"@patternfly/patternfly@2.8.2":
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.8.2.tgz#8362795b17a73be76dd9408b3c0d370e8a030d77"
+"@patternfly/patternfly@2.13.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.13.0.tgz#743be7a9efed6827948391a68c7e646dae42ec9c"
 
 "@pieh/friendly-errors-webpack-plugin@1.7.0-chalk-2":
   version "1.7.0-chalk-2"
@@ -3180,6 +3161,7 @@ any-promise@^1.0.0, any-promise@^1.1.0:
 anymatch@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
   dependencies:
     micromatch "^2.1.5"
     normalize-path "^2.0.0"
@@ -3576,6 +3558,7 @@ axobject-query@^2.0.1, axobject-query@^2.0.2:
 babel-cli@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
+  integrity sha1-UCq1SHTX24itALiHoGODzgPQAvE=
   dependencies:
     babel-core "^6.26.0"
     babel-polyfill "^6.26.0"
@@ -4332,6 +4315,7 @@ babel-plugin-transform-function-bind@^6.22.0:
 babel-plugin-transform-imports@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-imports/-/babel-plugin-transform-imports-1.5.1.tgz#b3756696aea907719d0d63b0e67c88fba963adb0"
+  integrity sha512-Jkb0tjqye8kjOD7GdcKJTGB3dC9fruQhwRFZCeYS0sZO2otyjG6SohKR8nZiSm/OvhY+Ny2ktzVE59XKgIqskA==
   dependencies:
     babel-types "^6.6.0"
     is-valid-path "^0.1.1"
@@ -4359,6 +4343,7 @@ babel-plugin-transform-minify-booleans@^6.9.0:
 babel-plugin-transform-object-assign@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba"
+  integrity sha1-+Z0vZvGgsNSY40bFNZaEdAyqILo=
   dependencies:
     babel-runtime "^6.22.0"
 
@@ -4463,6 +4448,7 @@ babel-plugin-typescript-to-proptypes@^0.17.1:
 babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
+  integrity sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=
   dependencies:
     babel-runtime "^6.26.0"
     core-js "^2.5.0"
@@ -5677,6 +5663,7 @@ chokidar@2.1.2:
 chokidar@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+  integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=
   dependencies:
     anymatch "^1.3.0"
     async-each "^1.0.0"
@@ -5913,7 +5900,6 @@ clone@^1.0.2:
 clsx@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
-  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
 
 cmd-shim@^2.0.2:
   version "2.0.2"
@@ -12112,7 +12098,6 @@ jsdom@^11.5.1:
 jsdom@^15.1.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.1.0.tgz#80c5f0dd69466742ab1194f15d301bdd01417596"
-  integrity sha512-QEmc2XIkNfCK3KRfa9ljMJjC4kAGdVgRrs/pCBsQG/QoKz0B42+C58f6TdAmhq/rw494eFCoLHxX6+hWuxb96Q==
   dependencies:
     abab "^2.0.0"
     acorn "^6.0.4"
@@ -12559,7 +12544,6 @@ liftoff@^2.5.0:
 linear-layout-vector@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz#398114d7303b6ecc7fd6b273af7b8401d8ba9c70"
-  integrity sha1-OYEU1zA7bsx/1rJzr3uEAdi6nHA=
 
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
@@ -12768,6 +12752,7 @@ lodash.filter@^4.4.0:
 lodash.findkey@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.findkey/-/lodash.findkey-4.6.0.tgz#83058e903b51cbb759d09ccf546dea3ea39c4718"
+  integrity sha1-gwWOkDtRy7dZ0JzPVG3qPqOcRxg=
 
 lodash.findlastindex@^4.6.0:
   version "4.6.0"
@@ -12868,6 +12853,7 @@ lodash.set@^4.3.2:
 lodash.snakecase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
+  integrity sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=
 
 lodash.some@^4.4.0, lodash.some@^4.6.0:
   version "4.6.0"
@@ -14608,6 +14594,7 @@ osenv@0, osenv@^0.1.4, osenv@^0.1.5:
 output-file-sync@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+  integrity sha1-0KM+7+YaIF+suQCS6CZZjVJFznY=
   dependencies:
     graceful-fs "^4.1.4"
     mkdirp "^0.5.1"
@@ -17308,6 +17295,7 @@ regenerate@^1.2.1, regenerate@^1.4.0:
 regenerator-runtime@^0.10.5:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+  integrity sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=
 
 regenerator-runtime@^0.11.0:
   version "0.11.1"
@@ -21117,7 +21105,6 @@ ws@^5.2.0, ws@^5.2.1:
 ws@^6.1.2:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
   dependencies:
     async-limiter "~1.0.0"