Add PromptForItems component.

ui_framework/components/index.scss

@@ -204,6 +204,7 @@ body {
 @import "modal/index";
 @import "no_items/index";
 @import "panel/index";
+@import "prompt_for_items/index";
 @import "table/index";
 @import "tabs/index";
 @import "tool_bar/index";

ui_framework/components/prompt_for_items/_index.scss

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

ui_framework/components/prompt_for_items/_prompt_for_items.scss

@@ -0,0 +1,16 @@
+.kuiPromptForItems {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+}
+
+  .kuiPromptForItems__message {
+    font-size: 18px;
+    color: $subduedFontColor;
+    line-height: $lineHeight;
+  }
+
+  .kuiPromptForItems__actions {
+    margin-top: 10px;
+  }

ui_framework/dist/ui_framework.css

@@ -915,6 +915,30 @@ body {
       -ms-flex-align: center;
           align-items: center; }
 
+.kuiPromptForItems {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 30px; }
+
+.kuiPromptForItems__message {
+  font-size: 18px;
+  color: #9fa3a7;
+  line-height: 1.5; }
+
+.kuiPromptForItems__actions {
+  margin-top: 10px; }
+
 /**
  * 1. Make seamless transition from ToolBar to Table header.
  * 1. Make seamless transition from Table to ToolBarFooter header.

ui_framework/doc_site/src/views/table/controlled_table_prompt_for_items.html

@@ -0,0 +1,79 @@
+<div class="kuiControlledTable">
+  <!-- ToolBar -->
+  <div class="kuiToolBar">
+    <div class="kuiToolBarSearch">
+      <div class="kuiToolBarSearchBox">
+        <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
+        <input
+          class="kuiToolBarSearchBox__input"
+          type="text"
+          placeholder="Search..."
+        >
+      </div>
+    </div>
+
+    <div class="kuiToolBarSection">
+      <button class="kuiButton kuiButton--primary">
+        Add
+      </button>
+
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-gear"></span>
+      </button>
+
+      <button class="kuiButton kuiButton--basic kuiButton--icon">
+        <span class="kuiButton__icon kuiIcon fa-bars"></span>
+      </button>
+    </div>
+
+    <div class="kuiToolBarSection">
+      <div class="kuiToolBarText">
+        0 of 33
+      </div>
+
+      <div class="kuiButtonGroup kuiButtonGroup--united">
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+        </button>
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- PromptForItems -->
+  <div class="kuiPanel kuiPanel--centered">
+    <div class="kuiPromptForItems">
+      <div class="kuiPromptForItems__message">
+        Looks like you don&rsquo;t have any items. Let&rsquo;s add some!
+      </div>
+
+      <div class="kuiPromptForItems__actions">
+        <button class="kuiButton kuiButton--primary kuiButton--iconText">
+          <span class="kuiButton__icon kuiIcon fa-plus"></span>
+          Add an item
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ToolBarFooter -->
+  <div class="kuiToolBarFooter">
+    <div class="kuiToolBarFooterSection">
+      <div class="kuiToolBarText">
+        0 of 33
+      </div>
+
+      <div class="kuiButtonGroup kuiButtonGroup--united">
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+        </button>
+        <button class="kuiButton kuiButton--basic kuiButton--icon">
+          <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+</div>

ui_framework/doc_site/src/views/table/table_example.jsx

@@ -21,4 +21,8 @@ export default createExample([{
   title: 'ControlledTable with NoItems',
   html: require('./controlled_table_no_items.html'),
   hasDarkTheme: false,
+}, {
+  title: 'ControlledTable with PromptForItems',
+  html: require('./controlled_table_prompt_for_items.html'),
+  hasDarkTheme: false,
 }]);