Add unstyled KuiModal components. (elastic#13199)

ui_framework/dist/ui_framework.css

@@ -606,6 +606,65 @@ table {
     background: #e6f2f6;
     outline: solid 3px #e6f2f6; }
 
+.kuiModalOverlay {
+  position: fixed;
+  z-index: 6000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding-bottom: 10vh; }
+
+.kuiModal {
+  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+  background-color: #FFF;
+  border: 1px solid #D9D9D9;
+  border-radius: 4px;
+  z-index: 8000; }
+
+.kuiModalHeader {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 16px; }
+
+.kuiModalBody {
+  padding: 16px; }
+
+.kuiModalFooter {
+  padding: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+          justify-content: flex-end; }
+  .kuiModalFooter > * + * {
+    margin-left: 5px; }
+
 .kuiPage {
   padding: 32px; }
 
@@ -746,12 +805,11 @@ table {
 
 .kuiPopover__body {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
-  background: #FFF;
+  background-color: #FFF;
   position: absolute;
   min-width: 256px;
   top: 100%;
   left: 50%;
-  background: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px 0 4px 4px;
   padding: 16px;

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

@@ -15,6 +15,12 @@ import KeyPadMenuExample
 import KibanaSandbox
   from '../../views/kibana/kibana_sandbox';
 
+import LinkExample
+  from '../../views/link/link_example';
+
+import ModalExample
+  from '../../views/modal/modal_example';
+
 import PageExample
   from '../../views/page/page_example';
 
@@ -42,6 +48,13 @@ const components = [{
   name: 'KeyPadMenu',
   component: KeyPadMenuExample,
   hasReact: true,
+}, {
+  name: 'Link',
+  component: LinkExample,
+}, {
+  name: 'Modal',
+  component: ModalExample,
+  hasReact: true,
 }, {
   name: 'Page',
   component: PageExample,

ui_framework/doc_site/src/views/link/link.html

@@ -0,0 +1 @@
+<a class="kuiLink" href="#">More info</a>

ui_framework/doc_site/src/views/link/link_example.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+const linkHtml = require('./link.html');
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Link"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: linkHtml,
+      }]}
+    >
+      <GuideDemo
+        html={linkHtml}
+      />
+    </GuideSection>
+  </GuidePage>
+);

ui_framework/doc_site/src/views/modal/confirm_modal_example.js

@@ -0,0 +1,51 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  KuiConfirmModal,
+  KuiModalOverlay,
+} from '../../../../components';
+
+export class ConfirmModalExample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showConfirmModal: false
+    };
+    this.closeModal = this.closeModal.bind(this);
+    this.showModal = this.showModal.bind(this);
+  }
+
+  closeModal() {
+    this.setState({ showConfirmModal: false });
+  }
+
+  showModal() {
+    this.setState({ showConfirmModal: true });
+  }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.showModal}>
+          Show Modal
+        </button>
+        {
+          this.state.showConfirmModal ?
+            <KuiModalOverlay>
+              <KuiConfirmModal
+                message="This is a confirmation modal example"
+                title="A confirmation modal"
+                onCancel={this.closeModal}
+                onConfirm={this.closeModal}
+                cancelButtonText="Cancel"
+                confirmButtonText="Confirm"
+              />
+            </KuiModalOverlay>
+            : null
+        }
+      </div>
+    );
+  }
+}

ui_framework/doc_site/src/views/modal/modal_example.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+import { StaticConfirmModal } from './static';
+const staticConfirmModalSource = require('!!raw!./static');
+const staticConfirmModalHtml = renderToHtml(StaticConfirmModal);
+
+import { ConfirmModalExample } from './confirm_modal_example';
+const showConfirmModalSource = require('!!raw!./confirm_modal_example');
+const showConfirmModalHtml = renderToHtml(ConfirmModalExample);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+
+    <GuideSection
+      title="Confirmation Modal"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: staticConfirmModalSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: staticConfirmModalHtml,
+      }]}
+    >
+      <GuideDemo>
+        <StaticConfirmModal />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Pop up Confirmation Modal with Overlay"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: showConfirmModalSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: showConfirmModalHtml,
+      }]}
+    >
+      <GuideDemo>
+        <ConfirmModalExample />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);

ui_framework/doc_site/src/views/modal/static.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {
+  KuiConfirmModal,
+} from '../../../../components';
+
+export const StaticConfirmModal = () => (
+  <KuiConfirmModal
+    onCancel={() => {}}
+    onConfirm={() => {}}
+    confirmButtonText="Confirm"
+    cancelButtonText="Cancel"
+    message="This is a confirmation modal"
+    title="Confirm Modal Title"
+  />
+);

ui_framework/src/components/index.js

@@ -24,6 +24,19 @@ export {
   KuiKeyPadMenuItemButton,
 } from './key_pad_menu';
 
+export {
+  KUI_MODAL_CANCEL_BUTTON,
+  KUI_MODAL_CONFIRM_BUTTON,
+  KuiConfirmModal,
+  KuiModal,
+  KuiModalBody,
+  KuiModalBodyText,
+  KuiModalFooter,
+  KuiModalHeader,
+  KuiModalHeaderTitle,
+  KuiModalOverlay,
+} from './modal';
+
 export {
   KuiOutsideClickDetector,
 } from './outside_click_detector';

ui_framework/src/components/index.scss

@@ -1,11 +1,12 @@
 
 // Components
 
-@import './avatar/index';
-@import './header/index';
-@import './icon/index';
-@import './key_pad_menu/index';
-@import './link/index';
-@import './page/index';
-@import './popover/index';
-@import './typography/index';
+@import 'avatar/index';
+@import 'header/index';
+@import 'icon/index';
+@import 'key_pad_menu/index';
+@import 'link/index';
+@import 'modal/index';
+@import 'page/index';
+@import 'popover/index';
+@import 'typography/index';

ui_framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiConfirmModal 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiModal testClass1 testClass2"
+  data-tests-subj="test subject string"
+  style="width:450px;"
+>
+  <div
+    class="kuiModalHeader"
+  >
+    <div
+      class="kuiModalHeader__title"
+      data-test-subj="confirmModalTitleText"
+    >
+      A confirmation modal
+    </div>
+  </div>
+  <div
+    class="kuiModalBody"
+  >
+    <div
+      class="kuiModalBodyText"
+      data-test-subj="confirmModalBodyText"
+    >
+      This is a confirmation modal example
+    </div>
+  </div>
+  <div
+    class="kuiModalFooter"
+  >
+    <button
+      data-test-subj="confirmModalCancelButton"
+    >
+      Cancel Button Text
+    </button>
+    <button
+      data-test-subj="confirmModalConfirmButton"
+    >
+      Confirm Button Text
+    </button>
+  </div>
+</div>
+`;

ui_framework/src/components/modal/__snapshots__/modal.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiModal 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiModal testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/src/components/modal/__snapshots__/modal_body.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiModalBody 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiModalBody testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/src/components/modal/__snapshots__/modal_body_text.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiModalBodyText 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiModalBodyText testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;

ui_framework/src/components/modal/__snapshots__/modal_footer.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders KuiModalFooter 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiModalFooter testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  children
+</div>
+`;