diff --git a/.gitignore b/.gitignore
index fbd0bc3f495b5c..9e666971d0bbac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,4 @@ ui_framework/doc_site/build
 !ui_framework/doc_site/build/index.html
 yarn.lock
 .yo-rc.json
+/.vscode
diff --git a/package.json b/package.json
index 871a6ba6aeca56..8a5e031e68bbd4 100644
--- a/package.json
+++ b/package.json
@@ -165,12 +165,13 @@
     "pui-react-tooltip": "7.5.4",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
-    "react": "15.4.2",
+    "react": "15.6.1",
     "react-ace": "3.7.0",
-    "react-addons-test-utils": "15.4.2",
+    "react-test-renderer": "15.6.1",
+    "react-addons-test-utils": "15.6.0",
     "react-anything-sortable": "1.6.1",
-    "react-color": "2.11.1",
-    "react-dom": "15.4.2",
+    "react-color": "2.11.7",
+    "react-dom": "15.6.1",
     "react-input-autosize": "1.1.0",
     "react-markdown": "2.4.2",
     "react-redux": "4.4.5",
@@ -216,7 +217,7 @@
     "chokidar": "1.6.0",
     "chromedriver": "2.29.0",
     "classnames": "2.2.5",
-    "enzyme": "2.7.0",
+    "enzyme": "2.9.1",
     "enzyme-to-json": "1.4.5",
     "eslint": "3.19.0",
     "eslint-plugin-babel": "4.1.1",
diff --git a/src/core_plugins/metrics/public/components/add_delete_buttons.js b/src/core_plugins/metrics/public/components/add_delete_buttons.js
index 215a8ed9ffe149..b084aab0d19c55 100644
--- a/src/core_plugins/metrics/public/components/add_delete_buttons.js
+++ b/src/core_plugins/metrics/public/components/add_delete_buttons.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Tooltip from './tooltip';
 
 function AddDeleteButtons(props) {
diff --git a/src/core_plugins/metrics/public/components/aggs/agg.js b/src/core_plugins/metrics/public/components/aggs/agg.js
index 913bd85dae10f1..001680e4a46e01 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import StdAgg from './std_agg';
 import aggToComponent from '../lib/agg_to_component';
 import { sortable } from 'react-anything-sortable';
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_row.js b/src/core_plugins/metrics/public/components/aggs/agg_row.js
index 480c7f7236306d..2d024c1c31436d 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_row.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_row.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import Tooltip from '../tooltip';
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
index 30e2cec1bae30b..b1839b62391e23 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 const metricAggs = [
diff --git a/src/core_plugins/metrics/public/components/aggs/calculation.js b/src/core_plugins/metrics/public/components/aggs/calculation.js
index b40a3f14e8cc3b..0d907cdbd8204f 100644
--- a/src/core_plugins/metrics/public/components/aggs/calculation.js
+++ b/src/core_plugins/metrics/public/components/aggs/calculation.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import uuid from 'uuid';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
index 0c780e29e91f35..86afb89dfb338c 100644
--- a/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
+++ b/src/core_plugins/metrics/public/components/aggs/cumulative_sum.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/derivative.js b/src/core_plugins/metrics/public/components/aggs/derivative.js
index 03cfd49adf63a3..a30bdcd55b40ff 100644
--- a/src/core_plugins/metrics/public/components/aggs/derivative.js
+++ b/src/core_plugins/metrics/public/components/aggs/derivative.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/field_select.js b/src/core_plugins/metrics/public/components/aggs/field_select.js
index 92d6a0520589dc..870d79376c62fa 100644
--- a/src/core_plugins/metrics/public/components/aggs/field_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 import generateByTypeFilter from '../lib/generate_by_type_filter';
 
diff --git a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
index 94098e3bd3636c..2af89a78e30dc2 100644
--- a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
+++ b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
index 27aa0ba9b2861d..2c0273a1ada4bc 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import calculateSiblings from '../lib/calculate_siblings';
diff --git a/src/core_plugins/metrics/public/components/aggs/moving_average.js b/src/core_plugins/metrics/public/components/aggs/moving_average.js
index 4f9ad7bc26dc41..d75d605ff8b9ae 100644
--- a/src/core_plugins/metrics/public/components/aggs/moving_average.js
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
index 4bd24b98adae39..170e651a91c57b 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
index de02f27856b576..8e44aff0104b7f 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/positive_only.js b/src/core_plugins/metrics/public/components/aggs/positive_only.js
index 543c814a759560..fa91cb5ac46c35 100644
--- a/src/core_plugins/metrics/public/components/aggs/positive_only.js
+++ b/src/core_plugins/metrics/public/components/aggs/positive_only.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/serial_diff.js b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
index 33d20a3a1e16fa..469b8f1f85626b 100644
--- a/src/core_plugins/metrics/public/components/aggs/serial_diff.js
+++ b/src/core_plugins/metrics/public/components/aggs/serial_diff.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/series_agg.js b/src/core_plugins/metrics/public/components/aggs/series_agg.js
index c7dc99344f6c80..32cfca69f8ca19 100644
--- a/src/core_plugins/metrics/public/components/aggs/series_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import Select from 'react-select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/static.js b/src/core_plugins/metrics/public/components/aggs/static.js
index d383eb21f16b43..d952c3cf320970 100644
--- a/src/core_plugins/metrics/public/components/aggs/static.js
+++ b/src/core_plugins/metrics/public/components/aggs/static.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
diff --git a/src/core_plugins/metrics/public/components/aggs/std_agg.js b/src/core_plugins/metrics/public/components/aggs/std_agg.js
index f6c6463e4b0a59..0b5a27b137e564 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_agg.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/std_deviation.js b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
index 803d0e240e3d2f..790a551ed1e0fe 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
diff --git a/src/core_plugins/metrics/public/components/aggs/std_sibling.js b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
index 45462b46a3740f..6fb7871a78f944 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_sibling.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AggRow from './agg_row';
 import MetricSelect from './metric_select';
 import AggSelect from './agg_select';
diff --git a/src/core_plugins/metrics/public/components/aggs/vars.js b/src/core_plugins/metrics/public/components/aggs/vars.js
index 85a77568a61080..e8d46ab3807fc3 100644
--- a/src/core_plugins/metrics/public/components/aggs/vars.js
+++ b/src/core_plugins/metrics/public/components/aggs/vars.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from '../add_delete_buttons';
 import * as collectionActions from '../lib/collection_actions';
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index ed1ca2a3e8ef7a..017d8968a3b7bb 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import * as collectionActions from './lib/collection_actions';
 import AddDeleteButtons from './add_delete_buttons';
diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
index 01ff23857b5426..ee8229478589a7 100644
--- a/src/core_plugins/metrics/public/components/color_picker.js
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Tooltip from './tooltip';
 import Picker from './custom_color_picker';
 
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index c690b3e28f2fd8..b1a922aaf21e63 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from './add_delete_buttons';
 import Select from 'react-select';
diff --git a/src/core_plugins/metrics/public/components/custom_color_picker.js b/src/core_plugins/metrics/public/components/custom_color_picker.js
index 5f3bd4f8185372..15b7e9b4d8e2d1 100644
--- a/src/core_plugins/metrics/public/components/custom_color_picker.js
+++ b/src/core_plugins/metrics/public/components/custom_color_picker.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import { ColorWrap as colorWrap, Saturation, Hue, Alpha, Checkboard } from 'react-color/lib/components/common';
 import ChromeFields from 'react-color/lib/components/chrome/ChromeFields';
diff --git a/src/core_plugins/metrics/public/components/data_format_picker.js b/src/core_plugins/metrics/public/components/data_format_picker.js
index fafc9e8d78d8a3..29e7a31ae8f00a 100644
--- a/src/core_plugins/metrics/public/components/data_format_picker.js
+++ b/src/core_plugins/metrics/public/components/data_format_picker.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import Select from 'react-select';
 import { durationOutputOptions, durationInputOptions } from './lib/durations';
diff --git a/src/core_plugins/metrics/public/components/error.js b/src/core_plugins/metrics/public/components/error.js
index a88477eb5b25c0..ce2178b27b9eab 100644
--- a/src/core_plugins/metrics/public/components/error.js
+++ b/src/core_plugins/metrics/public/components/error.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function ErrorComponent(props) {
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
index 8a93f10e63154d..902033450987cd 100644
--- a/src/core_plugins/metrics/public/components/icon_select.js
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import Select from 'react-select';
 
 class IconOption extends Component {
diff --git a/src/core_plugins/metrics/public/components/index_pattern.js b/src/core_plugins/metrics/public/components/index_pattern.js
index 10f9953e56bbb4..a6e8dfc9b61965 100644
--- a/src/core_plugins/metrics/public/components/index_pattern.js
+++ b/src/core_plugins/metrics/public/components/index_pattern.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import FieldSelect from './aggs/field_select';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js
index 2b4bc7baac66b5..76e94aadc94ce6 100644
--- a/src/core_plugins/metrics/public/components/markdown_editor.js
+++ b/src/core_plugins/metrics/public/components/markdown_editor.js
@@ -1,5 +1,7 @@
 /* eslint max-len:0 */
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+
+import React, { Component } from 'react';
 import tickFormatter from './lib/tick_formatter';
 import convertSeriesToVars from './lib/convert_series_to_vars';
 import AceEditor from 'react-ace';
diff --git a/src/core_plugins/metrics/public/components/panel_config.js b/src/core_plugins/metrics/public/components/panel_config.js
index 5ec2b849b746da..4561a8a54de45d 100644
--- a/src/core_plugins/metrics/public/components/panel_config.js
+++ b/src/core_plugins/metrics/public/components/panel_config.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import timeseries from './panel_config/timeseries';
 import metric from './panel_config/metric';
 import topN from './panel_config/top_n';
diff --git a/src/core_plugins/metrics/public/components/panel_config/gauge.js b/src/core_plugins/metrics/public/components/panel_config/gauge.js
index b70227b3a7f92c..fe6d5162917825 100644
--- a/src/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import Select from 'react-select';
diff --git a/src/core_plugins/metrics/public/components/panel_config/markdown.js b/src/core_plugins/metrics/public/components/panel_config/markdown.js
index 8c065ece6c1a49..ab008f32d0d7ca 100644
--- a/src/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import AceEditor from 'react-ace';
diff --git a/src/core_plugins/metrics/public/components/panel_config/metric.js b/src/core_plugins/metrics/public/components/panel_config/metric.js
index 5879503040a5f5..0c7c795a04b27c 100644
--- a/src/core_plugins/metrics/public/components/panel_config/metric.js
+++ b/src/core_plugins/metrics/public/components/panel_config/metric.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
index ce81e1b37d1c6b..62252a03e4db72 100644
--- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import AnnotationsEditor from '../annotations_editor';
 import { IndexPattern } from '../index_pattern';
diff --git a/src/core_plugins/metrics/public/components/panel_config/top_n.js b/src/core_plugins/metrics/public/components/panel_config/top_n.js
index 01166f9603ae14..05db07830601aa 100644
--- a/src/core_plugins/metrics/public/components/panel_config/top_n.js
+++ b/src/core_plugins/metrics/public/components/panel_config/top_n.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/series.js b/src/core_plugins/metrics/public/components/series.js
index 6111b2560a5257..d35bcb4bd4b55f 100644
--- a/src/core_plugins/metrics/public/components/series.js
+++ b/src/core_plugins/metrics/public/components/series.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 
 import timeseries from './vis_types/timeseries/series';
diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js
index b9b19ef70a0ba2..41d9f562531737 100644
--- a/src/core_plugins/metrics/public/components/series_config.js
+++ b/src/core_plugins/metrics/public/components/series_config.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import DataFormatPicker from './data_format_picker';
 import createSelectHandler from './lib/create_select_handler';
 import createTextHandler from './lib/create_text_handler';
diff --git a/src/core_plugins/metrics/public/components/series_editor.js b/src/core_plugins/metrics/public/components/series_editor.js
index 36d03eb04a721c..f2289d160ac403 100644
--- a/src/core_plugins/metrics/public/components/series_editor.js
+++ b/src/core_plugins/metrics/public/components/series_editor.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import reIdSeries from './lib/re_id_series';
 import Series from './series';
 import {
diff --git a/src/core_plugins/metrics/public/components/split.js b/src/core_plugins/metrics/public/components/split.js
index 1ef670c2623ed5..5fb10087c9fa37 100644
--- a/src/core_plugins/metrics/public/components/split.js
+++ b/src/core_plugins/metrics/public/components/split.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import uuid from 'uuid';
 
 import { SplitByTerms } from './splits/terms';
diff --git a/src/core_plugins/metrics/public/components/splits/everything.js b/src/core_plugins/metrics/public/components/splits/everything.js
index 616eff5fb06d24..b2438f81d51b29 100644
--- a/src/core_plugins/metrics/public/components/splits/everything.js
+++ b/src/core_plugins/metrics/public/components/splits/everything.js
@@ -1,6 +1,7 @@
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function SplitByEverything(props) {
   const { onChange, model } = props;
diff --git a/src/core_plugins/metrics/public/components/splits/filter.js b/src/core_plugins/metrics/public/components/splits/filter.js
index 3805f25eef0cb8..0c77be7b56450a 100644
--- a/src/core_plugins/metrics/public/components/splits/filter.js
+++ b/src/core_plugins/metrics/public/components/splits/filter.js
@@ -1,7 +1,8 @@
 import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export const SplitByFilter = props => {
   const { onChange } = props;
diff --git a/src/core_plugins/metrics/public/components/splits/filter_items.js b/src/core_plugins/metrics/public/components/splits/filter_items.js
index dc87bf4f33c403..09b4cd4574b14a 100644
--- a/src/core_plugins/metrics/public/components/splits/filter_items.js
+++ b/src/core_plugins/metrics/public/components/splits/filter_items.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import * as collectionActions from '../lib/collection_actions';
 import AddDeleteButtons from '../add_delete_buttons';
diff --git a/src/core_plugins/metrics/public/components/splits/filters.js b/src/core_plugins/metrics/public/components/splits/filters.js
index 8e68079311a916..e2157ffe62482b 100644
--- a/src/core_plugins/metrics/public/components/splits/filters.js
+++ b/src/core_plugins/metrics/public/components/splits/filters.js
@@ -1,7 +1,8 @@
 import createSelectHandler from '../lib/create_select_handler';
 import GroupBySelect from './group_by_select';
 import FilterItems from './filter_items';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 function SplitByFilters(props) {
   const { onChange, model } = props;
   const handleSelectChange = createSelectHandler(onChange);
diff --git a/src/core_plugins/metrics/public/components/splits/group_by_select.js b/src/core_plugins/metrics/public/components/splits/group_by_select.js
index 02cbef254ecbf7..1eaafde4609c58 100644
--- a/src/core_plugins/metrics/public/components/splits/group_by_select.js
+++ b/src/core_plugins/metrics/public/components/splits/group_by_select.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 function GroupBySelect(props) {
   const modeOptions = [
diff --git a/src/core_plugins/metrics/public/components/splits/terms.js b/src/core_plugins/metrics/public/components/splits/terms.js
index 448576bb60de5d..ca4af8e436e0df 100644
--- a/src/core_plugins/metrics/public/components/splits/terms.js
+++ b/src/core_plugins/metrics/public/components/splits/terms.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import GroupBySelect from './group_by_select';
 import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
diff --git a/src/core_plugins/metrics/public/components/tooltip.js b/src/core_plugins/metrics/public/components/tooltip.js
index 5db7cc8c241921..7d05b6f94621f4 100644
--- a/src/core_plugins/metrics/public/components/tooltip.js
+++ b/src/core_plugins/metrics/public/components/tooltip.js
@@ -1,5 +1,6 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { Tooltip } from 'pui-react-tooltip';
+import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'pui-react-overlay-trigger';
 
 function TooltipComponent(props) {
diff --git a/src/core_plugins/metrics/public/components/vis_editor.js b/src/core_plugins/metrics/public/components/vis_editor.js
index 1b70132a0b0812..f624a930d8ddc4 100644
--- a/src/core_plugins/metrics/public/components/vis_editor.js
+++ b/src/core_plugins/metrics/public/components/vis_editor.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import VisEditorVisualization from './vis_editor_visualization';
 import Visualization from './visualization';
 import VisPicker from './vis_picker';
diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
index ecb3db08e300a9..0889241d86d94a 100644
--- a/src/core_plugins/metrics/public/components/vis_editor_visualization.js
+++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import Visualization from './visualization';
 import Toggle from 'react-toggle';
diff --git a/src/core_plugins/metrics/public/components/vis_picker.js b/src/core_plugins/metrics/public/components/vis_picker.js
index 82719b054911e8..1a43ad21dccf27 100644
--- a/src/core_plugins/metrics/public/components/vis_picker.js
+++ b/src/core_plugins/metrics/public/components/vis_picker.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 function VisPickerItem(props) {
   const { label, icon, type } = props;
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
index 2aa6f122ff45f1..4f9c003c3e0b6b 100644
--- a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
index 2894c228ecc263..c9521c620bbed5 100644
--- a/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/gauge/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Gauge from 'plugins/metrics/visualizations/components/gauge';
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
index 471dd47048a37b..c33f2ddeba21f3 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
 import Sortable from 'react-anything-sortable';
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
index ecf2274cb0236e..fa226c1781e52e 100644
--- a/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/markdown/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 import color from 'color';
 import Markdown from 'react-markdown';
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/series.js b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
index e8531426735502..06018925091afa 100644
--- a/src/core_plugins/metrics/public/components/vis_types/metric/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
index a1bb27245019bf..3da2740e91c009 100644
--- a/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/metric/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Metric from 'plugins/metrics/visualizations/components/metric';
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index 667cb926544fad..2fe2d906f3c7a5 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Select from 'react-select';
 import DataFormatPicker from '../../data_format_picker';
 import createSelectHandler from '../../lib/create_select_handler';
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
index b6db23e0cad13e..0d3a4c9b130b23 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import SeriesConfig from './config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
index 0b8cc84f589c4f..5d351eae7970bc 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import tickFormatter from '../../lib/tick_formatter';
 import _ from 'lodash';
 import Timeseries from 'plugins/metrics/visualizations/components/timeseries';
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
index 93e81b8f508439..7254d30eb9afe3 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ColorPicker from '../../color_picker';
 import AddDeleteButtons from '../../add_delete_buttons';
 import { SeriesConfig } from '../../series_config';
diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
index 324ffb22475a7b..fefafede5d0dfc 100644
--- a/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
+++ b/src/core_plugins/metrics/public/components/vis_types/top_n/vis.js
@@ -6,7 +6,9 @@ import getLastValue from 'plugins/metrics/visualizations/lib/get_last_value';
 import color from 'color';
 import replaceVars from '../../lib/replace_vars';
 
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+
+import React from 'react';
 function TopNVisualization(props) {
   const { backgroundColor, model, visData } = props;
 
diff --git a/src/core_plugins/metrics/public/components/visualization.js b/src/core_plugins/metrics/public/components/visualization.js
index 9530584b24d78c..f2ad093f8c10ca 100644
--- a/src/core_plugins/metrics/public/components/visualization.js
+++ b/src/core_plugins/metrics/public/components/visualization.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 import timeseries from './vis_types/timeseries/vis';
diff --git a/src/core_plugins/metrics/public/components/yes_no.js b/src/core_plugins/metrics/public/components/yes_no.js
index c7b59600db7591..41b7df6870063d 100644
--- a/src/core_plugins/metrics/public/components/yes_no.js
+++ b/src/core_plugins/metrics/public/components/yes_no.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import _ from 'lodash';
 
 function YesNo(props) {
diff --git a/src/core_plugins/metrics/public/visualizations/components/annotation.js b/src/core_plugins/metrics/public/visualizations/components/annotation.js
index b4711fdc02ab65..499bd92ff24157 100644
--- a/src/core_plugins/metrics/public/visualizations/components/annotation.js
+++ b/src/core_plugins/metrics/public/visualizations/components/annotation.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import moment from 'moment';
 import reactcss from 'reactcss';
 class Annotation extends Component {
diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
index 1e25d480dd2d5d..424afca1aa041d 100644
--- a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
+++ b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 import _ from 'lodash';
 import $ from '../lib/flot';
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
index 3bfc16e2013ae9..7ef45d4744b7e9 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import getLastValue from '../lib/get_last_value';
 import getValueBy from '../lib/get_value_by';
 import GaugeVis from './gauge_vis';
diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
index dab00d18ef9491..1f381a937b475b 100644
--- a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
+++ b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import reactcss from 'reactcss';
 import calculateCorrdinates from '../lib/calculate_corrdinates';
diff --git a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
index a1e0fbc7dba3cd..93c38e0659957b 100644
--- a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/legend.js b/src/core_plugins/metrics/public/visualizations/components/legend.js
index ea1a77d43169b5..bc1cc5edb6ae65 100644
--- a/src/core_plugins/metrics/public/visualizations/components/legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/legend.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import VerticalLegend from './vertical_legend';
 import HorizontalLegend from './horizontal_legend';
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/metric.js b/src/core_plugins/metrics/public/visualizations/components/metric.js
index 8736286b345b81..83389c7531204f 100644
--- a/src/core_plugins/metrics/public/visualizations/components/metric.js
+++ b/src/core_plugins/metrics/public/visualizations/components/metric.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import reactcss from 'reactcss';
diff --git a/src/core_plugins/metrics/public/visualizations/components/resize.js b/src/core_plugins/metrics/public/visualizations/components/resize.js
index 4f2c3fa50a1c08..de0d4c585c4461 100644
--- a/src/core_plugins/metrics/public/visualizations/components/resize.js
+++ b/src/core_plugins/metrics/public/visualizations/components/resize.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import { findDOMNode } from 'react-dom';
 class Resize extends Component {
 
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
index dafb91ea2e1f37..2553c5a0ffffd8 100644
--- a/src/core_plugins/metrics/public/visualizations/components/timeseries.js
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import TimeseriesChart from './timeseries_chart';
diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
index 21ddce241d2823..065991c423e924 100644
--- a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
+++ b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import moment from 'moment';
 import reactcss from 'reactcss';
 import FlotChart from './flot_chart';
diff --git a/src/core_plugins/metrics/public/visualizations/components/top_n.js b/src/core_plugins/metrics/public/visualizations/components/top_n.js
index 02f35746ff9200..00962ac93de332 100644
--- a/src/core_plugins/metrics/public/visualizations/components/top_n.js
+++ b/src/core_plugins/metrics/public/visualizations/components/top_n.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
 import reactcss from 'reactcss';
diff --git a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
index 4a789ace722046..ebaf89a31be4a7 100644
--- a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
+++ b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import createLegendSeries from '../lib/create_legend_series';
 import reactcss from 'reactcss';
 
diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js
index 077590df7084b6..ed47a17bcb31b4 100644
--- a/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js
+++ b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 import hljs from 'highlight.js';
diff --git a/ui_framework/doc_site/src/components/guide_demo/guide_demo.js b/ui_framework/doc_site/src/components/guide_demo/guide_demo.js
index 5618e9deafe612..114a0142c3e3b9 100644
--- a/ui_framework/doc_site/src/components/guide_demo/guide_demo.js
+++ b/ui_framework/doc_site/src/components/guide_demo/guide_demo.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
index 512d0430d9fd3a..27e38278cf8db2 100644
--- a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
+++ b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   Link,
diff --git a/ui_framework/doc_site/src/components/guide_page/guide_page.js b/ui_framework/doc_site/src/components/guide_page/guide_page.js
index ad56529336cb2b..0f4c582bab1dc3 100644
--- a/ui_framework/doc_site/src/components/guide_page/guide_page.js
+++ b/ui_framework/doc_site/src/components/guide_page/guide_page.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import {
   GuidePageSideNav,
diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js
index bc061b81d5e4d6..22430cb8fa6f4e 100644
--- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js
+++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 export const GuidePageSideNav = props =>  {
   return (
diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js
index 846ee8f20409aa..4bf95d1593b015 100644
--- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js
+++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 export class GuidePageSideNavItem extends Component {
 
diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
index 88cda5ef0b6581..81ed902c2373a8 100644
--- a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
+++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox_code_toggle.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 export class GuideSandboxCodeToggle extends Component {
   constructor(props) {
diff --git a/ui_framework/doc_site/src/components/guide_section/guide_section.js b/ui_framework/doc_site/src/components/guide_section/guide_section.js
index 8957d13de5a283..2680cbfc4e7d46 100644
--- a/ui_framework/doc_site/src/components/guide_section/guide_section.js
+++ b/ui_framework/doc_site/src/components/guide_section/guide_section.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import Slugify from '../../services/string/slugify';
 
diff --git a/ui_framework/doc_site/src/views/app_view.js b/ui_framework/doc_site/src/views/app_view.js
index 24616e55b77635..e1646943813416 100644
--- a/ui_framework/doc_site/src/views/app_view.js
+++ b/ui_framework/doc_site/src/views/app_view.js
@@ -1,7 +1,5 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/accessibility/screen_reader.js b/ui_framework/src/components/accessibility/screen_reader.js
index 53f40e28c35345..c7aa887fbfd46c 100644
--- a/ui_framework/src/components/accessibility/screen_reader.js
+++ b/ui_framework/src/components/accessibility/screen_reader.js
@@ -1,7 +1,5 @@
-import {
-  cloneElement,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
 import classNames from 'classnames';
 
 
diff --git a/ui_framework/src/components/action_item/action_item.js b/ui_framework/src/components/action_item/action_item.js
index 7475c6a0f9d516..3551f66ffd1fd2 100644
--- a/ui_framework/src/components/action_item/action_item.js
+++ b/ui_framework/src/components/action_item/action_item.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiActionItem = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js
index d0e35ded0e0a21..09c2733b26ee2e 100644
--- a/ui_framework/src/components/button/button.js
+++ b/ui_framework/src/components/button/button.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 import { KuiButtonIcon } from './button_icon/button_icon';
diff --git a/ui_framework/src/components/button/button_group/button_group.js b/ui_framework/src/components/button/button_group/button_group.js
index 71748db4f9e1b6..583a22c21d526b 100644
--- a/ui_framework/src/components/button/button_group/button_group.js
+++ b/ui_framework/src/components/button/button_group/button_group.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/button/button_icon/button_icon.js b/ui_framework/src/components/button/button_icon/button_icon.js
index 8f9e11409be557..839a7413173c74 100644
--- a/ui_framework/src/components/button/button_icon/button_icon.js
+++ b/ui_framework/src/components/button/button_icon/button_icon.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/card/card.js b/ui_framework/src/components/card/card.js
index b9cc1983c3d730..ee0ee3b23f744c 100644
--- a/ui_framework/src/components/card/card.js
+++ b/ui_framework/src/components/card/card.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCard = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_description.js b/ui_framework/src/components/card/card_description.js
index cfda63503802a5..a624b3203db875 100644
--- a/ui_framework/src/components/card/card_description.js
+++ b/ui_framework/src/components/card/card_description.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescription = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_description_text.js b/ui_framework/src/components/card/card_description_text.js
index b35c7a94166d56..26b25377e7a311 100644
--- a/ui_framework/src/components/card/card_description_text.js
+++ b/ui_framework/src/components/card/card_description_text.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescriptionText = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_description_title.js b/ui_framework/src/components/card/card_description_title.js
index bab87273ed01a7..ad888a0443cb09 100644
--- a/ui_framework/src/components/card/card_description_title.js
+++ b/ui_framework/src/components/card/card_description_title.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardDescriptionTitle = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_footer.js b/ui_framework/src/components/card/card_footer.js
index cb41dfe489fee7..8137459ec5f9e4 100644
--- a/ui_framework/src/components/card/card_footer.js
+++ b/ui_framework/src/components/card/card_footer.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardFooter = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/card/card_group.js b/ui_framework/src/components/card/card_group.js
index d13fac2a96c595..bd912b18bd119e 100644
--- a/ui_framework/src/components/card/card_group.js
+++ b/ui_framework/src/components/card/card_group.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiCardGroup = ({ children, className, isUnited, ...rest }) => {
diff --git a/ui_framework/src/components/collapse_button/collapse_button.js b/ui_framework/src/components/collapse_button/collapse_button.js
index 53a9c05efde9c4..7a58119b524d6e 100644
--- a/ui_framework/src/components/collapse_button/collapse_button.js
+++ b/ui_framework/src/components/collapse_button/collapse_button.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 const DIRECTIONS = [
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js
index e7160e020cfc07..1d99b777b254e1 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
@@ -19,7 +20,7 @@ export function KuiEmptyTablePrompt({ actions, message, className, ...rest }) {
 }
 
 KuiEmptyTablePrompt.propTypes = {
-  message: React.PropTypes.string.isRequired,
-  actions: React.PropTypes.node,
-  className: React.PropTypes.string,
+  message: PropTypes.string.isRequired,
+  actions: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js
index aa715ea91812de..9129fabba9c04e 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_actions.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptActions = ({ children, className, ...rest }) =>
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptActions.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string
+  children: PropTypes.node,
+  className: PropTypes.string
 };
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js
index 8f901fd172ccd9..19d6311bb3d672 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_message.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptMessage = ({ children, className, ...rest }) =>
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptMessage.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js
index 79710419ea4258..54d9ddc589764e 100644
--- a/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js
+++ b/ui_framework/src/components/empty_table_prompt/empty_table_prompt_panel.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiEmptyTablePromptPanel = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiEmptyTablePromptPanel.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/event/event.js b/ui_framework/src/components/event/event.js
index 002b505ad55cd5..77646fff76f301 100644
--- a/ui_framework/src/components/event/event.js
+++ b/ui_framework/src/components/event/event.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEvent = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_body.js b/ui_framework/src/components/event/event_body.js
index 85b1ba21ed74b8..e793c14b72a72b 100644
--- a/ui_framework/src/components/event/event_body.js
+++ b/ui_framework/src/components/event/event_body.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventBody = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_body_message.js b/ui_framework/src/components/event/event_body_message.js
index 066a5fc2e72b7a..e748dc8da7ea45 100644
--- a/ui_framework/src/components/event/event_body_message.js
+++ b/ui_framework/src/components/event/event_body_message.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventBodyMessage = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_body_metadata.js b/ui_framework/src/components/event/event_body_metadata.js
index d0496188dd5786..9b48bb9c8c3ec3 100644
--- a/ui_framework/src/components/event/event_body_metadata.js
+++ b/ui_framework/src/components/event/event_body_metadata.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventBodyMetadata = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/event/event_symbol.js b/ui_framework/src/components/event/event_symbol.js
index 49f703c5effa39..075ed90067f951 100644
--- a/ui_framework/src/components/event/event_symbol.js
+++ b/ui_framework/src/components/event/event_symbol.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiEventSymbol = ({ children, className, ...rest }) => {
diff --git a/ui_framework/src/components/info_button/info_button.js b/ui_framework/src/components/info_button/info_button.js
index b97a35e34b1a07..c2b841ac3f58c9 100644
--- a/ui_framework/src/components/info_button/info_button.js
+++ b/ui_framework/src/components/info_button/info_button.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
diff --git a/ui_framework/src/components/menu/menu.js b/ui_framework/src/components/menu/menu.js
index aef922264749cd..436e93e1c88208 100644
--- a/ui_framework/src/components/menu/menu.js
+++ b/ui_framework/src/components/menu/menu.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 
 export const KuiMenu = ({
diff --git a/ui_framework/src/components/menu/menu_item.js b/ui_framework/src/components/menu/menu_item.js
index 79e975601dc6f2..2a66f1c718098b 100644
--- a/ui_framework/src/components/menu/menu_item.js
+++ b/ui_framework/src/components/menu/menu_item.js
@@ -1,6 +1,5 @@
-import React, {
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -20,6 +19,6 @@ export const KuiMenuItem = ({
 };
 
 KuiMenuItem.propTypes = {
-  className: React.PropTypes.string,
+  className: PropTypes.string,
   children:  PropTypes.node
 };
diff --git a/ui_framework/src/components/pager/pager.js b/ui_framework/src/components/pager/pager.js
index 55d6ab8f39f648..d948f240a71fe7 100644
--- a/ui_framework/src/components/pager/pager.js
+++ b/ui_framework/src/components/pager/pager.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -33,14 +34,14 @@ export function KuiPager({
 }
 
 KuiPager.propTypes = {
-  startNumber: React.PropTypes.number.isRequired,
-  endNumber: React.PropTypes.number.isRequired,
-  totalItems: React.PropTypes.number.isRequired,
-  hasPreviousPage: React.PropTypes.bool.isRequired,
-  hasNextPage: React.PropTypes.bool.isRequired,
-  onNextPage: React.PropTypes.func.isRequired,
-  onPreviousPage: React.PropTypes.func.isRequired,
-  className: React.PropTypes.string
+  startNumber: PropTypes.number.isRequired,
+  endNumber: PropTypes.number.isRequired,
+  totalItems: PropTypes.number.isRequired,
+  hasPreviousPage: PropTypes.bool.isRequired,
+  hasNextPage: PropTypes.bool.isRequired,
+  onNextPage: PropTypes.func.isRequired,
+  onPreviousPage: PropTypes.func.isRequired,
+  className: PropTypes.string
 };
 
 
diff --git a/ui_framework/src/components/pager/pager_button_group.js b/ui_framework/src/components/pager/pager_button_group.js
index 6c105e3114096d..4ddc4a250ffabb 100644
--- a/ui_framework/src/components/pager/pager_button_group.js
+++ b/ui_framework/src/components/pager/pager_button_group.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import { KuiButton, KuiButtonIcon, KuiButtonGroup } from '../button';
@@ -26,9 +27,9 @@ export function KuiPagerButtonGroup({ className, onPrevious, onNext, hasNext, ha
 }
 
 KuiPagerButtonGroup.propTypes = {
-  onPrevious: React.PropTypes.func.isRequired,
-  onNext: React.PropTypes.func.isRequired,
-  hasNext: React.PropTypes.bool.isRequired,
-  hasPrevious: React.PropTypes.bool.isRequired,
-  className: React.PropTypes.string
+  onPrevious: PropTypes.func.isRequired,
+  onNext: PropTypes.func.isRequired,
+  hasNext: PropTypes.bool.isRequired,
+  hasPrevious: PropTypes.bool.isRequired,
+  className: PropTypes.string
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar.js b/ui_framework/src/components/tool_bar/tool_bar.js
index 54f6b1c8154463..c25e7a150c258f 100644
--- a/ui_framework/src/components/tool_bar/tool_bar.js
+++ b/ui_framework/src/components/tool_bar/tool_bar.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBar = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBar.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_footer.js b/ui_framework/src/components/tool_bar/tool_bar_footer.js
index 8bdeacad190b6e..deea0206cd2d6a 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_footer.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_footer.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarFooter = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest}>{children}</div>;
 };
 KuiToolBarFooter.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_footer_section.js b/ui_framework/src/components/tool_bar/tool_bar_footer_section.js
index 98f944b59bee97..408252296aa6e3 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_footer_section.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_footer_section.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarFooterSection = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBarFooterSection.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_search_box.js b/ui_framework/src/components/tool_bar/tool_bar_search_box.js
index 41bf0e99258900..002cefeb70bd74 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_search_box.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_search_box.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -27,8 +28,8 @@ export function KuiToolBarSearchBox({ filter, onFilter, placeholder, className,
 }
 
 KuiToolBarSearchBox.propTypes = {
-  filter: React.PropTypes.string,
-  onFilter: React.PropTypes.func.isRequired
+  filter: PropTypes.string,
+  onFilter: PropTypes.func.isRequired
 };
 
 KuiToolBarSearchBox.defaultProps = {
diff --git a/ui_framework/src/components/tool_bar/tool_bar_section.js b/ui_framework/src/components/tool_bar/tool_bar_section.js
index 3c4e3495a88cf3..9eccdd1a0091c5 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_section.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_section.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarSection = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBarSection.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/tool_bar/tool_bar_text.js b/ui_framework/src/components/tool_bar/tool_bar_text.js
index 0223186b1aaa45..6194bd53d9332d 100644
--- a/ui_framework/src/components/tool_bar/tool_bar_text.js
+++ b/ui_framework/src/components/tool_bar/tool_bar_text.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
@@ -6,6 +7,6 @@ export const KuiToolBarText = ({ children, className, ...rest }) => {
   return <div className={classes} {...rest} >{children}</div>;
 };
 KuiToolBarText.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/typography/typography.js b/ui_framework/src/components/typography/typography.js
index 1e13bbed7588b0..8c6b74c5a4c615 100644
--- a/ui_framework/src/components/typography/typography.js
+++ b/ui_framework/src/components/typography/typography.js
@@ -1,7 +1,5 @@
-import {
-  cloneElement,
-  PropTypes,
-} from 'react';
+import PropTypes from 'prop-types';
+import { cloneElement } from 'react';
 import classNames from 'classnames';
 
 const sizeToClassNameMap = {