patternfly · kylebuch8 · Oct 3, 2019 · May 5, 2019 · May 7, 2019 · May 17, 2019
diff --git a/.storybook/utils.js b/.storybook/utils.js
@@ -37,12 +37,11 @@ const listProperties = (obj) =>
         print = true;
       }
 
-      // If printing is allowed, the value exists and is not null and is not a slot
+      // If printing is allowed, the value exists and is not null
       if (
         print &&
         typeof v !== "undefined" &&
-        (v !== null && v !== "null") &&
-        p !== "slot"
+        (v !== null && v !== "null")
       ) {
         string += p;
         // If the value is a boolean and is false, or the value is not a string true
@@ -60,7 +59,7 @@ const listProperties = (obj) =>
           }
         }
       }
-      return string.toLowerCase();
+      return string;
     })
     .join(" ");
 

diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss
@@ -7,7 +7,7 @@ $LOCAL: accordion;
   position: relative;
   overflow: hidden;
   margin: 0;
-  color: #{pfe-radio(color--text)};
+  color: #{pfe-radio(color, text)};
 }
 
 :host([on="dark"]) {

diff --git a/elements/pfe-icon/demo/index.html b/elements/pfe-icon/demo/index.html
@@ -2,22 +2,26 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PatternFly Element | pfe-icon Demo</title>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-    <link rel="stylesheet" href="https://overpass-30e2.kxcdn.com/overpass.css" />
+    <title>PatternFly Element | pfe-icon Demo</title>
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
-    <script>require(['../pfe-icon.umd.js'])</script>
+    <script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <script src="/requirejs/require.js"></script>
+
+    <script>require([
+      '../pfe-icon.umd.js',
+      '../../pfe-card/pfe-card.umd.js'
+    ])</script>
 
     <noscript>
       <link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
     </noscript>
 
     <link href="../../pfelement/pfelement.min.css" rel="stylesheet">
+    <link href="../../pfe-layouts/pfe-layouts.min.css" rel="stylesheet">
 
     <style type="text/css" media="screen">
       body {
@@ -324,5 +328,25 @@ <h2>web icons</h2>
     <pfe-icon size="md" icon="web-user"></pfe-icon>
     <pfe-icon size="md" icon="web-youtube2"></pfe-icon>
     <pfe-icon size="md" icon="web-youtube"></pfe-icon>
+
+    <h2>Fail to load tests</h2>
+    <div class="pfe-l-grid pfe-m-gutters pfe-m-all-6-on-xs pfe-m-all-3-col">
+      <pfe-card pfe-color="light">
+        <h3 slot="pfe-card--header">Fail with fallback text, no tags.</h3>
+        <pfe-icon size="xl"  icon="rh-foo-bar">Icon failed to load.</pfe-icon>
+      </pfe-card>
+      <pfe-card>
+        <h3 slot="pfe-card--header">Fail with fallback text, p tag.</h3>
+        <pfe-icon size="xl"  icon="rh-foo-bar"><p>Icon failed to load.</p></pfe-icon>
+      </pfe-card>
+      <pfe-card>
+        <h3 slot="pfe-card--header">Fail with preserve space on.</h3>
+        <pfe-icon size="xl"  icon="foo-bar" style="border: 1px solid hotpink;"></pfe-icon>
+      </pfe-card>
+      <pfe-card>
+        <h3 slot="pfe-card--header">Fail with collapse blank space.</h3>
+        <pfe-icon size="xl"  icon="foo-bar" style="border: 1px solid hotpink;" on-fail="collapse"></pfe-icon>
+      </pfe-card>
+    </div>
   </body>
 </html>
diff --git a/elements/pfe-icon/package-lock.json b/elements/pfe-icon/package-lock.json
diff --git a/elements/pfe-icon/src/pfe-icon.html b/elements/pfe-icon/src/pfe-icon.html
@@ -1,3 +1,6 @@
+<div class="pfe-icon--fallback">
+  <slot></slot>
+</div>
 <svg xmlns="http://www.w3.org/2000/svg">
   <filter color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%">
     <feFlood result="COLOR" />

diff --git a/elements/pfe-icon/src/pfe-icon.js b/elements/pfe-icon/src/pfe-icon.js
@@ -33,11 +33,14 @@ function _createIconSetHandler(el, setName) {
 }
 
 function _iconLoad(el) {
-  el.image.classList.remove("load-failed");
+  el.classList.remove("load-failed");
 }
 
 function _iconLoadError(el) {
-  el.image.classList.add("load-failed");
+  el.classList.add("load-failed");
+  if(el.has_fallback) {
+    el.classList.add("has-fallback");
+  }
 }
 
 class PfeIcon extends PFElement {
@@ -57,8 +60,12 @@ class PfeIcon extends PFElement {
     return "pfe-icon.json";
   }
 
+  get has_fallback() {
+    return this.children.length > 0 || this.innerText.length > 0;
+  }
+
   static get observedAttributes() {
-    return ["icon"];
+    return ["icon", "on-fail"];
   }
 
   constructor() {