fix(Alert): correct ShadyCSS styles

Author: Ryan A. Johnson

src/helix-ui/elements/HXAlertElement.html

@@ -1,11 +1,11 @@
-<div id="wrapper">
-  <hx-icon id="icon" type="info-circle"></hx-icon>
-  <span id="content">
-    <span id="status"></span>
+<div id="hxAlert">
+  <hx-icon id="hxIcon" type="info-circle"></hx-icon>
+  <span id="hxContent">
+    <span id="hxStatus"></span>
     <slot></slot>
   </span>
-  <button id="cta" type="button"></button>
-  <button id="dismiss" type="button">
+  <button id="hxCta" type="button"></button>
+  <button id="hxDismiss" type="button">
     <hx-icon type="times"></hx-icon>
   </button>
 </div>

src/helix-ui/elements/HXAlertElement.js

@@ -190,21 +190,21 @@ export class HXAlertElement extends HXElement {
 
     /** @private */
     get _elIcon () {
-        return this.shadowRoot.getElementById('icon');
+        return this.shadowRoot.getElementById('hxIcon');
     }
 
     /** @private */
     get _elStatus () {
-        return this.shadowRoot.getElementById('status');
+        return this.shadowRoot.getElementById('hxStatus');
     }
 
     /** @private */
     get _btnCta () {
-        return this.shadowRoot.getElementById('cta');
+        return this.shadowRoot.getElementById('hxCta');
     }
 
     /** @private */
     get _btnDismiss () {
-        return this.shadowRoot.getElementById('dismiss');
+        return this.shadowRoot.getElementById('hxDismiss');
     }
 }

src/helix-ui/elements/HXAlertElement.less

@@ -1,66 +1,69 @@
 @import "./HXElement";
 @import "elements/hx-icon";
 
-button {
-  align-self: flex-start;
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-}
 
-#wrapper {
+#hxAlert {
   display: flex;
-}
-
-#icon {
-  flex-shrink: 0;
-  margin: 1rem;
-}
 
-#content {
-  flex-grow: 1;
-  margin-right: 1rem;
-  padding: 1rem 0;
-}
+  button {
+    align-self: flex-start;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+  }
 
-#status {
-  font-weight: 500;
-  text-transform: uppercase;
+  #hxIcon {
+    flex-shrink: 0;
+    margin: 1rem;
+  }
 
-  &:after {
-    content: ":";
+  #hxContent {
+    flex-grow: 1;
+    margin-right: 1rem;
+    padding: 1rem 0;
   }
 
-  &:empty {
-    display: none;
+  #hxStatus {
+    font-weight: 500;
+    text-transform: uppercase;
+
+    &:after {
+      content: ":";
+    }
+
+    &:empty {
+      display: none;
+    }
   }
-}
 
-#cta {
-  flex-shrink: 0;
-  font-weight: 500;
-  padding: 1rem 0;
-  text-transform: uppercase;
-  white-space: nowrap;
+  #hxCta {
+    flex-shrink: 0;
+    font-weight: 500;
+    padding: 1rem 0;
+    text-transform: uppercase;
+    white-space: nowrap;
 
-  &:empty {
-    display: none;
+    &:empty {
+      display: none;
+    }
   }
-}
 
-#dismiss {
-  flex-shrink: 0;
-  height: 3rem;
-  padding: 1rem;
-  width: 3rem;
+  #hxDismiss {
+    flex-shrink: 0;
+    height: 3rem;
+    padding: 1rem;
+    width: 3rem;
+  }
 }
 
 :host([static]) {
-  #dismiss {
-    display: none;
-  }
+  #hxAlert {
+    #hxDismiss {
+      display: none;
+    }
 
-  #cta {
-    margin-right: 1rem;
+    #hxCta {
+      margin-right: 1rem;
+    }
   }
 }