Merge pull request #311 from rackerlabs/hx-icon-shadowdom

fix(HXIcon): correct issues with HXIconElement

Author: CITguy

docs/components/icons/index.html

@@ -10,7 +10,7 @@
   <section>
     <h2 id="basic-icon">Basic Icon</h2>
     <p>
-      Add a styleable SVG icon with the <code>&lt;hx-icon&gt;</code> element.
+      Use the <code>&lt;hx-icon&gt;</code> element to render a styleable inline SVG icon.
     </p>
     <div class="example">
       <div>

src/helix-ui/elements/HXAccordionPanelElement.less

@@ -1,5 +1,4 @@
 @import "./HXElement";
-@import "elements/hx-icon";
 
 #hxToggle {
   background-color: transparent;

src/helix-ui/elements/HXAlertElement.html

@@ -1,5 +1,7 @@
 <div id="hxAlert">
-  <hx-icon id="hxIcon" type="info-circle"></hx-icon>
+  <span id="hxIconWrapper">
+    <hx-icon id="hxIcon" type="info-circle"></hx-icon>
+  </span>
   <span id="hxContent">
     <span id="hxStatus"></span>
     <slot></slot>

src/helix-ui/elements/HXAlertElement.less

@@ -1,5 +1,4 @@
 @import "./HXElement";
-@import "elements/hx-icon";
 
 #hxAlert {
   display: flex;
@@ -11,9 +10,9 @@
     cursor: pointer;
   }
 
-  #hxIcon {
+  #hxIconWrapper {
     flex-shrink: 0;
-    margin: 1rem;
+    padding: 1rem;
   }
 
   #hxContent {

src/helix-ui/elements/HXCheckboxElement.less

@@ -1,5 +1,4 @@
 @import "./HXElement";
-@import "elements/hx-icon";
 
 #hxCheckbox {
   display: flex;

src/helix-ui/elements/HXErrorElement.html

@@ -1,4 +1,8 @@
 <div id="hxError">
-  <hx-icon type="exclamation-circle" id="hxIcon"></hx-icon>
-  <slot></slot>
+  <span>
+    <hx-icon type="exclamation-circle" id="hxIcon"></hx-icon>
+  </span>
+  <span>
+    <slot></slot>
+  </span>
 </div>

src/helix-ui/elements/HXErrorElement.less

@@ -1,8 +1,9 @@
 @import './HXElement';
-@import 'elements/hx-icon';
 
 #hxError {
-  #hxIcon {
-    margin-right: 0.25rem;
+  display: inline-flex;
+
+  * + * {
+    margin-left: 0.25rem;
   }
 }

src/helix-ui/elements/HXFileIconElement.less

@@ -1,5 +1,4 @@
 @import './HXElement';
-@import 'elements/hx-icon';
 
 #hxFileIcon {
   position: relative;
@@ -8,20 +7,20 @@
     font-size: 2.5rem;
     height: 1em;
   }
-  
+
   #hxOverlay {
     line-height: 1;
     position: absolute;
     text-align: center;
     top: 0.5rem;
     width: 100%;
   }
-  
+
   #hxIcon {
     font-size: 1rem;
     height: 1em;
   }
-  
+
   #hxExt {
     font-size: 0.5rem;
     line-height: 1.5;

src/helix-ui/elements/HXFileInputElement.less

@@ -1,12 +1,11 @@
 @import './HXElement';
-@import 'elements/hx-icon';
 @import (reference) "components/buttons";
 
 :host {
   #hxContent {
-    /* 
-      Needed to prevent focusing of native file inputs. 
-      Especially true for Microsoft browsers, because 
+    /*
+      Needed to prevent focusing of native file inputs.
+      Especially true for Microsoft browsers, because
       Edge and IE have double tab stops.
     */
     display: none;

src/helix-ui/elements/HXFileTileElement.less

@@ -1,6 +1,5 @@
 @import "./HXElement";
 @import "base/links";
-@import "elements/hx-icon";
 @import "elements/hx-progress";
 @import "components/progress";
 @import (reference) "components/buttons";
@@ -22,7 +21,6 @@
     width: 100%;
   }
 
-
   #hxRetry {
     #Button.basic();
     #Button.small();