Fix missing icons in Visualize listing. (elastic#11243)

* Fix StatusText component so that it supports image icons. * Fix missing icons in Visualize listing. Support both icons and images.
cjcenizal · Apr 14, 2017 · 46f2740 · 46f2740
1 parent c5a44b9
commit 46f2740
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 18 deletions.
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -172,7 +172,19 @@
           <td class="kuiTableRowCell">
             <div class="kuiTableRowCell__liner">
               <span class="kuiStatusText">
-                <span class="kuiStatusText__icon kuiIcon {{ item.icon }}"></span>
+                <img
+                  class="kuiStatusText__icon kuiIcon"
+                  ng-if="item.type.image"
+                  aria-hidden="true"
+                  ng-src="{{ item.type.image }}"
+                />
+
+                <!-- If there's no image, default to an icon, for BWC. -->
+                <span
+                  class="kuiStatusText__icon kuiIcon {{ item.icon }}"
+                  ng-if="!item.type.image"
+                ></span>
+
                 {{ item.type.title }}
               </span>
             </div>

diff --git a/ui_framework/components/status_text/_index.scss b/ui_framework/components/status_text/_index.scss
@@ -1 +1,3 @@
+$statusTextIconSize: 1.15em;
+
 @import "status_text";
diff --git a/ui_framework/components/status_text/_status_text.scss b/ui_framework/components/status_text/_status_text.scss
@@ -19,6 +19,12 @@
   color: $globalDangerColor;
 }
 
+/**
+ * 1. Set the image to be the same size as a font icon at 14px.
+ * 2. We need to cap the height too, in case the icon was designed thin and tall.
+ */
 .kuiStatusText__icon {
   margin-right: 6px;
+  width: $statusTextIconSize; /* 1 */
+  max-height:$statusTextIconSize; /* 2 */
 }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -1993,8 +1993,16 @@ body {
 .kuiStatusText--error {
   color: #D86051; }
 
+/**
+ * 1. Set the image to be the same size as a font icon at 14px.
+ * 2. We need to cap the height too, in case the icon was designed thin and tall.
+ */
 .kuiStatusText__icon {
-  margin-right: 6px; }
+  margin-right: 6px;
+  width: 1.15em;
+  /* 1 */
+  max-height: 1.15em;
+  /* 2 */ }
 
 /**
  * 1. Make seamless transition from ToolBar to Table header.

diff --git a/ui_framework/doc_site/src/views/status_text/status_text.html b/ui_framework/doc_site/src/views/status_text/status_text.html
@@ -0,0 +1,37 @@
+<p class="kuiText">
+  <span class="kuiStatusText">
+    <span class="kuiStatusText__icon kuiIcon fa-area-chart"></span>
+    Font icon
+  </span>
+</p>
+
+<p class="kuiText">
+  <span class="kuiStatusText">
+    <img
+      class="kuiStatusText__icon"
+      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjBweCI
+        gaGVpZ2h0PSI0NnB4IiB2aWV3Qm94PSIwIDAgNjAgNDYiIHZlcnNpb249IjEuMSIgeG1sbnM9Im
+        h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vc
+        mcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBo
+        dHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbi1
+        hcmVhPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPG
+        RlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlZpc3VhbGl6ZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd
+        2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9
+        IlZpc3VhbGl6ZS1DcmVhdGUtTmV3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzU2LjAwMDAwMCw
+        gLTIyMi4wMDAwMDApIiBmaWxsPSIjMDAwMDAwIj4KICAgICAgICAgICAgPGcgaWQ9ImNoYXJ0cy
+        IgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUuMDAwMDAwLCAxNDguMDAwMDAwKSI+CiAgICAgICAgI
+        CAgICAgICA8ZyBpZD0iYXJlYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjQxLjAwMDAwMCwgNDMu
+        MDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb24tYXJlYSIgdHJhbnNmb3J
+        tPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzMS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgIC
+        AgICAgPHBvbHlnb24gaWQ9Iu+HviIgcG9pbnRzPSI0NC41Mzg0NjE1IDExLjY2NjY2NjcgNTEgM
+        zUgOSAzNSA5IDIwIDIwLjMwNzY5MjMgNSAzNC44NDYxNTM4IDIwIj48L3BvbHlnb24+CiAgICAg
+        ICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJ4eS1heGlzIiBmaWxsLXJ1bGU9Im5vbnp
+        lcm8iIHBvaW50cz0iNCAwIDAgMCAwIDQ1LjAxMTYyNjMgNjAuMDAwMDAxMSA0NS4wMTE2MjYzID
+        YwLjAwMDAwMTEgNDEuMDExNjI2MyA0IDQxLjAxMTYyNjMiPjwvcG9seWdvbj4KICAgICAgICAgI
+        CAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAg
+        ICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
+    />
+    Image icon
+  </span>
+</p>
+
diff --git a/ui_framework/doc_site/src/views/status_text/status_text_error.html b/ui_framework/doc_site/src/views/status_text/status_text_error.html
@@ -1,4 +1,6 @@
-<span class="kuiStatusText kuiStatusText--error">
-  <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
-  Something&rsquo;s gone terribly wrong
-</span>
+<p class="kuiText">
+  <span class="kuiStatusText kuiStatusText--error">
+    <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+    Something&rsquo;s gone terribly wrong
+  </span>
+</p>
diff --git a/ui_framework/doc_site/src/views/status_text/status_text_example.js b/ui_framework/doc_site/src/views/status_text/status_text_example.js
@@ -7,13 +7,26 @@ import {
   GuideSectionTypes,
 } from '../../components';
 
+const html = require('./status_text.html');
 const infoHtml = require('./status_text_info.html');
 const successHtml = require('./status_text_success.html');
 const warningHtml = require('./status_text_warning.html');
 const errorHtml = require('./status_text_error.html');
 
 export default props => (
   <GuidePage title={props.route.name}>
+    <GuideSection
+      title="StatusText"
+      source={[{
+        type: GuideSectionTypes.HTML,
+        code: html,
+      }]}
+    >
+      <GuideDemo
+        html={html}
+      />
+    </GuideSection>
+
     <GuideSection
       title="Info"
       source={[{

diff --git a/ui_framework/doc_site/src/views/status_text/status_text_info.html b/ui_framework/doc_site/src/views/status_text/status_text_info.html
@@ -1,4 +1,6 @@
-<span class="kuiStatusText kuiStatusText--info">
-  <span class="kuiStatusText__icon kuiIcon fa-info"></span>
-  Just to let you know
-</span>
+<p class="kuiText">
+  <span class="kuiStatusText kuiStatusText--info">
+    <span class="kuiStatusText__icon kuiIcon fa-info"></span>
+    Just to let you know
+  </span>
+</p>
diff --git a/ui_framework/doc_site/src/views/status_text/status_text_success.html b/ui_framework/doc_site/src/views/status_text/status_text_success.html
@@ -1,4 +1,6 @@
-<span class="kuiStatusText kuiStatusText--success">
-  <span class="kuiStatusText__icon kuiIcon fa-check"></span>
-  Eveything is OK
-</span>
+<p class="kuiText">
+  <span class="kuiStatusText kuiStatusText--success">
+    <span class="kuiStatusText__icon kuiIcon fa-check"></span>
+    Eveything is OK
+  </span>
+</p>
diff --git a/ui_framework/doc_site/src/views/status_text/status_text_warning.html b/ui_framework/doc_site/src/views/status_text/status_text_warning.html
@@ -1,4 +1,6 @@
-<span class="kuiStatusText kuiStatusText--warning">
-  <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
-  Careful!
-</span>
+<p class="kuiText">
+  <span class="kuiStatusText kuiStatusText--warning">
+    <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
+    Careful!
+  </span>
+</p>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		$statusTextIconSize: 1.15em;

		@import "status_text";