Add kuiIcon--basic and support icons in Table component. Display icon…

…s in Visualize landing page.
elastic · Feb 4, 2017 · 1dbffd1 · 1dbffd1
1 parent 5a5eecb
commit 1dbffd1
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 8 deletions.
diff --git a/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html b/src/core_plugins/kibana/public/visualize/landing/visualize_landing.html
@@ -79,9 +79,14 @@
               ng-click="landingController.toggleAll()"
             >
           </th>
+
+          <th class="kuiTableHeaderCell kuiTableHeaderCell--icon">
+          </th>
+
           <th class="kuiTableHeaderCell">
             Visualization
           </th>
+
           <th class="kuiTableHeaderCell">
             Type
           </th>
@@ -102,6 +107,10 @@
             >
           </td>
 
+          <td class="kuiTableRowCell kuiTableRowCell--icon">
+            <div class="kuiIcon kuiIcon--basic {{ item.icon }}"></div>
+          </td>
+
           <td class="kuiTableRowCell">
             <div class="kuiTableRowCell__liner">
               <a class="kuiLink" ng-href="{{ item.url }}">

diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.js b/src/core_plugins/kibana/public/visualize/wizard/wizard.js
@@ -7,7 +7,6 @@ import { DashboardConstants } from 'plugins/kibana/dashboard/dashboard_constants
 import routes from 'ui/routes';
 import RegistryVisTypesProvider from 'ui/registry/vis_types';
 import uiModules from 'ui/modules';
-import './wizard.less';
 
 const module = uiModules.get('app/visualize', ['kibana/courier']);
 

diff --git a/src/core_plugins/kibana/public/visualize/wizard/wizard.less b/src/core_plugins/kibana/public/visualize/wizard/wizard.less
diff --git a/src/ui_framework/doc_site/src/views/icon/icon_basic.html b/src/ui_framework/doc_site/src/views/icon/icon_basic.html
@@ -0,0 +1 @@
+<div class="kuiIcon kuiIcon--basic fa-gear"></div>
diff --git a/ui_framework/components/icon/_icon.scss b/ui_framework/components/icon/_icon.scss
@@ -30,3 +30,7 @@
 .kuiIcon--inactive {
   color: $inactiveColor;
 }
+
+.kuiIcon--basic {
+  color: #565656;
+}
diff --git a/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss
@@ -88,7 +88,9 @@
  * 2. Align checkbox with text in other cells.
  */
 .kuiTableHeaderCell--checkBox,
-.kuiTableRowCell--checkBox {
+.kuiTableRowCell--checkBox,
+.kuiTableHeaderCell--icon,
+.kuiTableRowCell--icon {
   width: 28px; /* 1 */
   padding-right: 0;
   line-height: 1;

diff --git a/ui_framework/doc_site/src/views/icon/icon_example.jsx b/ui_framework/doc_site/src/views/icon/icon_example.jsx
@@ -17,6 +17,12 @@ export default createExample([{
     <p>Use this Icon to denote useful information.</p>
   ),
   html: require('./icon_info.html'),
+}, {
+  title: 'Basic',
+  description: (
+    <p>Use this Icon when you don't want to communicate any particular meaning with the icon's color.</p>
+  ),
+  html: require('./icon_basic.html'),
   hasDarkTheme: false,
 }, {
   title: 'Success',

diff --git a/ui_framework/doc_site/src/views/table/controlled_table.html b/ui_framework/doc_site/src/views/table/controlled_table.html
@@ -49,6 +49,8 @@
         <th class="kuiTableHeaderCell kuiTableHeaderCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </th>
+        <th class="kuiTableHeaderCell kuiTableHeaderCell--icon">
+        </th>
         <th class="kuiTableHeaderCell">
           Title
         </th>
@@ -69,6 +71,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-coffee"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Alligator</a>
         </td>
@@ -91,6 +96,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-bomb"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Boomerang</a>
         </td>
@@ -113,6 +121,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-trophy"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Celebration</a>
         </td>
@@ -135,6 +146,9 @@
         <td class="kuiTableRowCell kuiTableRowCell--checkBox">
           <input type="checkbox" class="kuiCheckBox">
         </td>
+        <th class="kuiTableRowCell kuiTableRowCell--icon">
+          <div class="kuiIcon kuiIcon--basic fa-child"></div>
+        </th>
         <td class="kuiTableRowCell">
           <a class="kuiLink" href="#">Dog</a>
         </td>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div class="kuiIcon kuiIcon--basic fa-gear"></div>