fix(Search): correct ShadyCSS styles

Author: Cathy Siller

src/helix-ui/elements/HXSearchElement.html

@@ -1,10 +1,10 @@
-<label id="wrapper">
-  <input type="text" role="search" id="search" autocomplete="off" />
-  <button type="button" id="clear" hidden aria-label="Clear search">
+<label id="hxSearch">
+  <input type="text" role="search" id="hxNativeControl" autocomplete="off" />
+  <button type="button" id="hxClear" hidden aria-label="Clear search">
     <hx-icon type="times"></hx-icon>
   </button>
-  <div id="icon">
+  <div id="hxIcon">
     <hx-icon type="search"></hx-icon>
   </div>
-  <div id="customControl"></div>
+  <div id="hxCustomControl"></div>
 </label>

src/helix-ui/elements/HXSearchElement.js

@@ -60,9 +60,6 @@ export class HXSearchElement extends HXElement {
 
     constructor () {
         super();
-        this._elSearch = this.shadowRoot.getElementById('search');
-        this._btnClear = this.shadowRoot.getElementById('clear');
-
         this._clearValue = this._clearValue.bind(this);
         this._onInput = this._onInput.bind(this);
     }
@@ -162,6 +159,16 @@ export class HXSearchElement extends HXElement {
         }
     }
 
+    /** @private */
+    get _elSearch () {
+        return this.shadowRoot.getElementById('hxNativeControl');
+    }
+
+    /** @private */
+    get _btnClear () {
+        return this.shadowRoot.getElementById('hxClear');
+    }
+
     // PRIVATE FUNCTIONS
     _onInput (evt) {
         this.value = evt.target.value;

src/helix-ui/elements/HXSearchElement.less

@@ -12,13 +12,13 @@ input::-ms-clear {
   height: 2rem;
   min-width: 8rem;
 
-  #wrapper {
+  #hxSearch {
     display: flex;
     height: 100%;
     position: relative;
   }
 
-  #icon {
+  #hxIcon {
     color: @gray-700;
     flex-shrink: 0;
     line-height: 1;
@@ -27,7 +27,7 @@ input::-ms-clear {
     z-index: 1;
   }
 
-  #search {
+  #hxNativeControl {
     #Mix.placeholder();
     #Mix.resetFocus();
 
@@ -43,18 +43,18 @@ input::-ms-clear {
     z-index: 1;
 
     &:focus {
-      ~ #clear {
+      ~ #hxClear {
         color: @cyan-700;
       }
 
-      ~ #customControl {
+      ~ #hxCustomControl {
         border-color: @cyan-700;
         box-shadow: @focus-glow;
       }
     }
   }
 
-  #customControl {
+  #hxCustomControl {
     background-color: @gray-0;
     border-radius: 2px;
     border: 1px solid @gray-500;
@@ -66,7 +66,7 @@ input::-ms-clear {
     z-index: 0; // sits behind everything
   }
 
-  #clear {
+  #hxClear {
     #Mix.resetFocus();
 
     background-color: transparent;
@@ -89,48 +89,48 @@ input::-ms-clear {
         color: @cyan-700;
       }
 
-      ~ #customControl {
+      ~ #hxCustomControl {
         border-color: @cyan-700;
         box-shadow: @focus-glow;
       }
     }//:focus
-  }//#clear
+  }
 }//default
 
 :host([invalid]) {
   color: @red-900;
 
   // ----- IDLE -----
 
-  #icon,
-  #clear {
+  #hxIcon,
+  #hxClear {
     color: inherit;
   }
 
-  #customControl {
+  #hxCustomControl {
     border-color: @red-900;
     border-width: 2px;
   }
 
   // ----- FOCUS -----
 
-  #clear:focus {
+  #hxClear:focus {
     hx-icon {
       outline-color: currentColor;
     }
   }
 
-  #search:focus {
-    ~ #clear {
+  #hxNativeControl:focus {
+    ~ #hxClear {
       color: @red-900;
     }
   }
 
   // make sure that our custom control doesn't lose focus style
-  // when we tab between #search and #clear
-  #clear:focus,
-  #search:focus {
-    ~ #customControl {
+  // when we tab between #hxSearch and #hxClear
+  #hxClear:focus,
+  #hxNativeControl:focus {
+    ~ #hxCustomControl {
       box-shadow: @focus-glow-invalid;
       border-color: @red-900;
     }
@@ -140,26 +140,26 @@ input::-ms-clear {
 :host([disabled]) {
   color: @gray-400;
 
-  #wrapper {
+  #hxSearch {
     color: inherit;
     cursor: not-allowed;
   }
 
-  #icon {
+  #hxIcon {
     color: inherit;
   }
 
-  #clear {
+  #hxClear {
     display: none;
   }
 
-  #search {
+  #hxNativeControl {
     #Mix.disabledPlaceholder();
 
     color: inherit;
   }
 
-  #customControl {
+  #hxCustomControl {
     background-color: @gray-50;
     border-color: @gray-300;
     border-width: 1px;