Add InfoPanel. Use InfoPanel to present warning in Saved Object form.

src/core_plugins/kibana/public/management/sections/objects/_view.html

@@ -48,12 +48,14 @@
 
     <!-- Intro -->
     <div class="kuiViewContentItem kuiVerticalRhythm">
-      <p>
-        <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
-        <strong>Proceed with caution!</strong>
-      </p>
+      <div class="kuiInfoPanel kuiInfoPanel--warning">
+        <p>
+          <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
+          <strong>Proceed with caution!</strong>
+        </p>
 
-      <p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be.</p>
+        <p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be.</p>
+      </div>
     </div>
 
     <div class="kuiViewContentItem kuiVerticalRhythm">

src/ui_framework/components/index.scss

@@ -98,6 +98,7 @@ body {
 @import "button/index";
 @import "form/index";
 @import "icon/index";
+@import "info_panel/index";
 @import "link/index";
 @import "local_nav/index";
 @import "micro_button/index";

src/ui_framework/components/info_panel/_index.scss

@@ -0,0 +1 @@
+@import "info_panel";

src/ui_framework/components/info_panel/_info_panel.scss

@@ -0,0 +1,8 @@
+.kuiInfoPanel {
+  padding: 20px;
+  line-height: $lineHeight;
+}
+
+.kuiInfoPanel--warning {
+  background-color: #FFF6E4;
+}

src/ui_framework/doc_site/src/services/routes/Routes.js

@@ -10,6 +10,9 @@ import FormExample
 import IconExample
   from '../../views/icon/icon_example.jsx';
 
+import InfoPanelExample
+  from '../../views/info_panel/info_panel_example.jsx';
+
 import LinkExample
   from '../../views/link/link_example.jsx';
 
@@ -38,6 +41,9 @@ const components = [{
 }, {
   name: 'Icon',
   component: IconExample,
+}, {
+  name: 'InfoPanel',
+  component: InfoPanelExample,
 }, {
   name: 'Link',
   component: LinkExample,

src/ui_framework/doc_site/src/views/info_panel/info_panel.html

@@ -0,0 +1,10 @@
+<div class="kuiInfoPanel kuiInfoPanel--warning">
+  <p>
+    <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
+    <strong>Proceed with caution!</strong>
+  </p>
+
+  <p>
+    Here be dragons. Don&rsquo;t wanna mess with no dragons.
+  </p>
+</div>

src/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Warning',
+  description: (
+    <p>Use this InfoPanel to warn the user against decisions they might regret.</p>
+  ),
+  html: require('./info_panel.html'),
+  hasDarkTheme: false,
+}]);