patternfly
diff --git a/‎.storybook/utils.js‎
Lines changed: 3 additions & 4 deletions b/‎.storybook/utils.js‎
Lines changed: 3 additions & 4 deletions
diff --git a/‎elements/pfe-accordion/src/pfe-accordion.scss‎
Lines changed: 1 addition & 1 deletion b/‎elements/pfe-accordion/src/pfe-accordion.scss‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎elements/pfe-icon/demo/index.html‎
Lines changed: 31 additions & 7 deletions b/‎elements/pfe-icon/demo/index.html‎
Lines changed: 31 additions & 7 deletions
diff --git a/‎elements/pfe-icon/package-lock.json‎
Lines changed: 7 additions & 11 deletions b/‎elements/pfe-icon/package-lock.json‎
Lines changed: 7 additions & 11 deletions
diff --git a/‎elements/pfe-icon/src/pfe-icon.html‎
Lines changed: 3 additions & 0 deletions b/‎elements/pfe-icon/src/pfe-icon.html‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎elements/pfe-icon/src/pfe-icon.js‎
Lines changed: 10 additions & 3 deletions b/‎elements/pfe-icon/src/pfe-icon.js‎
Lines changed: 10 additions & 3 deletions
@@ -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(" ");
 
 
@@ -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"]) {
 
@@ -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>
@@ -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" />
 
@@ -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() {
Original file line number	Diff line number	Diff line change
`@@ -37,12 +37,11 @@ const listProperties = (obj) =>`
`37`	`37`	`print = true;`
`38`	`38`	`}`
`39`	`39`
`40`		`- // If printing is allowed, the value exists and is not null and is not a slot`
	`40`	`+ // If printing is allowed, the value exists and is not null`
`41`	`41`	`if (`
`42`	`42`	`print &&`
`43`	`43`	`typeof v !== "undefined" &&`
`44`		`- (v !== null && v !== "null") &&`
`45`		`- p !== "slot"`
	`44`	`+ (v !== null && v !== "null")`
`46`	`45`	`) {`
`47`	`46`	`string += p;`
`48`	`47`	`// If the value is a boolean and is false, or the value is not a string true`
`@@ -60,7 +59,7 @@ const listProperties = (obj) =>`
`60`	`59`	`}`
`61`	`60`	`}`
`62`	`61`	`}`
`63`		`- return string.toLowerCase();`
	`62`	`+ return string;`
`64`	`63`	`})`
`65`	`64`	`.join(" ");`
`66`	`65`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ $LOCAL: accordion;`
`7`	`7`	`position: relative;`
`8`	`8`	`overflow: hidden;`
`9`	`9`	`margin: 0;`
`10`		`- color: #{pfe-radio(color--text)};`
	`10`	`+ color: #{pfe-radio(color, text)};`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`:host([on="dark"]) {`
Original file line number	Diff line number	Diff line change
`@@ -33,11 +33,14 @@ function _createIconSetHandler(el, setName) {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`function _iconLoad(el) {`
`36`		`- el.image.classList.remove("load-failed");`
	`36`	`+ el.classList.remove("load-failed");`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`function _iconLoadError(el) {`
`40`		`- el.image.classList.add("load-failed");`
	`40`	`+ el.classList.add("load-failed");`
	`41`	`+ if(el.has_fallback) {`
	`42`	`+ el.classList.add("has-fallback");`
	`43`	`+ }`
`41`	`44`	`}`
`42`	`45`
`43`	`46`	`class PfeIcon extends PFElement {`
`@@ -57,8 +60,12 @@ class PfeIcon extends PFElement {`
`57`	`60`	`return "pfe-icon.json";`
`58`	`61`	`}`
`59`	`62`
	`63`	`+ get has_fallback() {`
	`64`	`+ return this.children.length > 0 \|\| this.innerText.length > 0;`
	`65`	`+ }`
	`66`	`+`
`60`	`67`	`static get observedAttributes() {`
`61`		`- return ["icon"];`
	`68`	`+ return ["icon", "on-fail"];`
`62`	`69`	`}`
`63`	`70`
`64`	`71`	`constructor() {`