Add EuiEmptyPrompt.

CHANGELOG.md

@@ -1,7 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `EuiBetaBadge` for non-GA labelling including options to add it to `EuiCard` and `EuiKeyPadMenuItem` ([#705](https://github.com/elastic/eui/pull/705))
-
+- Added `EuiEmptyPrompt` which can be used as a placeholder over empty tables and lists ([#711](https://github.com/elastic/eui/pull/711))
 
 ## [`0.0.44`](https://github.com/elastic/eui/tree/v0.0.44)
 

src-docs/src/routes.js

@@ -89,6 +89,9 @@ import { DelayHideExample }
 import { DescriptionListExample }
   from './views/description_list/description_list_example';
 
+import { EmptyPromptExample }
+  from './views/empty_prompt/empty_prompt_example';
+
 import { ErrorBoundaryExample }
   from './views/error_boundary/error_boundary_example';
 
@@ -297,6 +300,7 @@ const navigation = [{
     CardExample,
     CodeExample,
     DescriptionListExample,
+    EmptyPromptExample,
     HealthExample,
     IconExample,
     ImageExample,

src-docs/src/views/empty_prompt/empty_prompt.js

@@ -0,0 +1,20 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiEmptyPrompt,
+  EuiButton,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiEmptyPrompt
+    iconType="editorStrike"
+    title={<h2>You have no spice</h2>}
+    body={
+      <Fragment>
+        <p>Navigators use massive amounts of spice to gain a limited form of prescience. This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.</p>
+        <p>You&rsquo;ll need spice to rule Arrakis, young Atreides.</p>
+      </Fragment>
+    }
+    actions={<EuiButton color="primary" fill>Harvest spice</EuiButton>}
+  />
+);

src-docs/src/views/empty_prompt/empty_prompt_example.js

@@ -0,0 +1,61 @@
+import React, { Fragment } from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiEmptyPrompt,
+} from '../../../../src/components';
+
+import EmptyPrompt from './empty_prompt';
+const emptyPromptSource = require('!!raw-loader!./empty_prompt');
+const emptyPromptHtml = renderToHtml(EmptyPrompt);
+
+import Simple from './simple';
+const simpleSource = require('!!raw-loader!./simple');
+const simpleHtml = renderToHtml(Simple);
+
+export const EmptyPromptExample = {
+  title: 'EmptyPrompt',
+  sections: [{
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: emptyPromptSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: emptyPromptHtml,
+    }],
+    text: (
+      <p>
+        Use the <EuiCode>EuiEmptyPrompt</EuiCode> as a placeholder for an empty table or list of content.
+      </p>
+    ),
+    props: { EuiEmptyPrompt },
+    demo: <EmptyPrompt />,
+  }, {
+    title: 'Less content, more actions',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: simpleSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: simpleHtml,
+    }],
+    text: (
+      <Fragment>
+        <p>
+          You can remove parts of the prompt to simplify it, if you wish.
+        </p>
+        <p>
+          You can also provide an array of multiple actions.
+        </p>
+      </Fragment>
+    ),
+    props: { EuiEmptyPrompt },
+    demo: <Simple />,
+  }],
+};

src-docs/src/views/empty_prompt/simple.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {
+  EuiEmptyPrompt,
+  EuiButton,
+  EuiButtonEmpty,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiEmptyPrompt
+    title={<h2>You have no spice</h2>}
+    actions={[
+      <EuiButtonEmpty color="danger">Sabotage all spice fields</EuiButtonEmpty>,
+      <EuiButton color="primary" fill>Harvest spice</EuiButton>,
+    ]}
+  />
+);

src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiEmptyPrompt is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiEmptyPrompt testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <svg
+    class="euiIcon euiIcon--xxLarge euiIcon--subdued"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <path
+        d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        id="arrow_up-a"
+      />
+    </defs>
+    <use
+      fill-rule="nonzero"
+      href="#arrow_up-a"
+      transform="rotate(180 8 8)"
+    />
+  </svg>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+  <span
+    class="euiTextColor euiTextColor--subdued"
+  >
+    <h2
+      class="euiTitle euiTitle--medium"
+    >
+      Title
+    </h2>
+    <div
+      class="euiSpacer euiSpacer--m"
+    />
+    <div
+      class="euiText"
+    >
+      <p>
+        Body
+      </p>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+  </span>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+  <div>
+    Actions
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+</div>
+`;
+
+exports[`EuiEmptyPrompt props actions renders alone 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+  actions
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+</div>
+`;
+
+exports[`EuiEmptyPrompt props actions renders an array 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      action1
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      action2
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+</div>
+`;
+
+exports[`EuiEmptyPrompt props body renders alone 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <span
+    class="euiTextColor euiTextColor--subdued"
+  >
+    <div
+      class="euiText"
+    >
+      body
+    </div>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+  </span>
+</div>
+`;
+
+exports[`EuiEmptyPrompt props iconType renders alone 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <svg
+    class="euiIcon euiIcon--xxLarge euiIcon--subdued"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xlink="http://www.w3.org/1999/xlink"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <defs>
+      <path
+        d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        id="arrow_up-a"
+      />
+    </defs>
+    <use
+      fill-rule="nonzero"
+      href="#arrow_up-a"
+      transform="rotate(180 8 8)"
+    />
+  </svg>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+</div>
+`;
+
+exports[`EuiEmptyPrompt props title renders alone 1`] = `
+<div
+  class="euiEmptyPrompt"
+>
+  <span
+    class="euiTextColor euiTextColor--subdued"
+  >
+    <div
+      class="euiTitle euiTitle--medium"
+    >
+      title
+    </div>
+    <div
+      class="euiSpacer euiSpacer--m"
+    />
+  </span>
+</div>
+`;

src/components/empty_prompt/_empty_prompt.scss

@@ -0,0 +1,7 @@
+@import '../text/_mixins';
+
+.euiEmptyPrompt {
+  @include euiTextConstrainedWidth;
+  text-align: center;
+  margin: auto;
+}

src/components/empty_prompt/_index.scss

@@ -0,0 +1 @@
+@import 'empty_prompt';