fix(Toast): correct ShadyCSS styles

Author: Cathy Siller

src/helix-ui/elements/HXToastElement.html

@@ -1,14 +1,14 @@
-<div id="wrapper">
-  <div id="icon-wrapper">
-    <hx-icon id="icon" type="info-circle"></hx-icon>
+<div id="hxToast">
+  <div id="hxIconWrapper">
+    <hx-icon id="hxIcon" type="info-circle"></hx-icon>
   </div>
-  <div id="content">
+  <div id="hxContent">
     <div>
       <slot></slot>
     </div>
-    <button id="cta" type="button"></button>
+    <button id="hxCta" type="button"></button>
   </div>
-  <button id="dismiss" type="button">
+  <button id="hxDismiss" type="button">
     <hx-icon type="times"></hx-icon>
   </button>
-</div>
+</div>

src/helix-ui/elements/HXToastElement.js

@@ -133,14 +133,14 @@ export class HXToastElement extends HXElement {
 
     // PRIVATE GETTERS
     get _elIcon () {
-        return this.shadowRoot.getElementById('icon');
+        return this.shadowRoot.getElementById('hxIcon');
     }
 
     get _btnCta () {
-        return this.shadowRoot.getElementById('cta');
+        return this.shadowRoot.getElementById('hxCta');
     }
 
     get _btnDismiss () {
-        return this.shadowRoot.getElementById('dismiss');
+        return this.shadowRoot.getElementById('hxDismiss');
     }
 }

src/helix-ui/elements/HXToastElement.less

@@ -3,7 +3,7 @@
 @import (reference) 'components/box';
 @import (reference) 'components/buttons';
 
-#wrapper {
+#hxToast {
   &:extend(.hxBox-sm);
   background-color: @gray-0;
   box-shadow: 0px 3px 3px 0 @shadow-color;
@@ -32,89 +32,89 @@
   &::after {
     border-left: 8px solid currentColor;
   }
-}
-
-#icon-wrapper {
-  align-items: center;
-  display: flex;
-  margin: 0 0.75rem 0 0.5rem;
 
-  hx-icon {
-    font-size: 2rem;
+  #hxIconWrapper {
+    align-items: center;
+    display: flex;
+    margin: 0 0.75rem 0 0.5rem;
+  
+    hx-icon {
+      font-size: 2rem;
+    }
   }
-}
-
-#content {
-  flex-grow: 1;
-  margin-right: 1.5rem;
-  text-align: right;
-  word-wrap: break-word;
-
-  div {
-    font-size: 0.875rem;
-    text-align: left;
+  
+  #hxContent {
+    flex-grow: 1;
+    margin-right: 1.5rem;
+    text-align: right;
+    word-wrap: break-word;
+  
+    div {
+      font-size: 0.875rem;
+      text-align: left;
+    }
   }
-}
-
-#cta {
-  &:extend(.hxBtn);
-  &:extend(.hxBtn.hxLink);
-  text-transform: uppercase;
-
-  &:empty {
-    display: none;
+  
+  #hxCta {
+    &:extend(.hxBtn);
+    &:extend(.hxBtn.hxLink);
+    text-transform: uppercase;
+  
+    &:empty {
+      display: none;
+    }
+  }
+  
+  #hxDismiss {
+    background-color: transparent;
+    border: 0;
+    color: @gray-700;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    height: 2.25rem;
+    line-height: 0;
+    margin: 0;
+    padding: 0.75rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 2.25rem;
   }
-}
-
-#dismiss {
-  background-color: transparent;
-  border: 0;
-  color: @gray-700;
-  cursor: pointer;
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  height: 2.25rem;
-  line-height: 0;
-  margin: 0;
-  padding: 0.75rem;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 2.25rem;
 }
 
 :host([type="info"]) {
-  #wrapper {
+  #hxToast {
     &::after {
       border-left-color: @purple-500;
     }
   }
 
-  #icon {
+  #hxIcon {
     color: @purple-500;
   }
 }
 
 :host([type="error"]) {
-  #wrapper {
+  #hxToast {
     &::after {
       border-left-color: @red-900;
     }
   }
 
-  #icon {
+  #hxIcon {
     color: @red-900;
   }
 }
 
 :host([type="success"]) {
-  #wrapper {
+  #hxToast {
     &::after {
       border-left-color: @green-500;
     }
   }
 
-  #icon {
+  #hxIcon {
     color: @green-500;
   }
-}
+}