Add NoResults and Panel components.

Backports PR #9516 **Commit 1:** Add NoResults and Panel components. * Original sha: 7fe7f31 * Authored by CJ Cenizal <[email protected]> on 2016-12-15T23:44:37Z **Commit 2:** Lighten noResults text. * Original sha: 022da42 * Authored by CJ Cenizal <[email protected]> on 2016-12-16T17:00:07Z
elastic · Dec 16, 2016 · 404ac63 · 404ac63
1 parent 87a7a35
commit 404ac63
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 1 deletion.
diff --git a/src/ui_framework/components/form/_text_input.scss b/src/ui_framework/components/form/_text_input.scss
@@ -15,7 +15,7 @@
   }
 
   &:focus {
-    @include focus;
+    outline: none;
     border-color: $selectedBorderColor;
   }
 }
diff --git a/src/ui_framework/components/index.scss b/src/ui_framework/components/index.scss
@@ -30,6 +30,7 @@ $successColor: #417505;
 $warningColor: #ffac15;
 $errorColor: #D86051;
 $fontColor: #191E23;
+$subduedFontColor: #9fa3a7;
 $panelColor: #E4E4E4;
 $selectedBorderColor: #6EADC1;
 $errorBorderColor: $errorColor;
@@ -68,5 +69,7 @@ body {
 @import "icon/index";
 @import "link/index";
 @import "local_nav/index";
+@import "no_results/index";
+@import "panel/index";
 @import "table/index";
 @import "tool_bar/index";
diff --git a/src/ui_framework/components/no_results/_index.scss b/src/ui_framework/components/no_results/_index.scss
@@ -0,0 +1 @@
+@import "no_results";
diff --git a/src/ui_framework/components/no_results/_no_results.scss b/src/ui_framework/components/no_results/_no_results.scss
@@ -0,0 +1,6 @@
+.kuiNoResults {
+  padding: 30px;
+  font-size: 18px;
+  color: $subduedFontColor;
+  line-height: $lineHeight;
+}
diff --git a/src/ui_framework/components/panel/_index.scss b/src/ui_framework/components/panel/_index.scss
@@ -0,0 +1 @@
+@import "panel";
diff --git a/src/ui_framework/components/panel/_panel.scss b/src/ui_framework/components/panel/_panel.scss
@@ -0,0 +1,9 @@
+.kuiPanel {
+  border: $tableBorder;
+}
+
+.kuiPanel--centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/ui_framework/doc_site/src/views/table/controlled_table_no_results.html b/src/ui_framework/doc_site/src/views/table/controlled_table_no_results.html
@@ -0,0 +1,70 @@
+<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">
+        1 &ndash; 20 of 33
+      </div>
+
+      <div class="kuiButtonGroup">
+        <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>
+
+  <!-- NoResults -->
+  <div class="kuiPanel kuiPanel--centered">
+    <div class="kuiNoResults">
+      No Items matched your search.
+    </div>
+  </div>
+
+  <!-- ToolBarFooter -->
+  <div class="kuiToolBarFooter">
+    <div class="kuiToolBarFooterSection">
+      <div class="kuiToolBarText">
+        1 &ndash; 20 of 33
+      </div>
+
+      <div class="kuiButtonGroup">
+        <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>
diff --git a/src/ui_framework/doc_site/src/views/table/table_example.jsx b/src/ui_framework/doc_site/src/views/table/table_example.jsx
@@ -13,4 +13,8 @@ export default createExample([{
   title: 'ControlledTable',
   html: require('./controlled_table.html'),
   hasDarkTheme: false,
+}, {
+  title: 'ControlledTable with NoResults',
+  html: require('./controlled_table_no_results.html'),
+  hasDarkTheme: false,
 }]);