Improve the search box component to make it fluid and iconed

ui/app/components/search-box.js

@@ -22,6 +22,11 @@ export default Component.extend({
       this.set('_searchTerm', e.target.value);
       run.debounce(this, updateSearch, this.get('debounce'));
     },
+
+    clear() {
+      this.set('_searchTerm', '');
+      run.debounce(this, updateSearch, this.get('debounce'));
+    },
   },
 });
 

ui/app/styles/components.scss

@@ -17,6 +17,7 @@
 @import './components/nomad-logo';
 @import './components/page-layout';
 @import './components/primary-metric';
+@import './components/search-box';
 @import './components/simple-list';
 @import './components/status-text';
 @import './components/timeline';

ui/app/styles/components/search-box.scss

@@ -0,0 +1,70 @@
+.search-box {
+  width: 100%;
+  max-width: 300px;
+
+  position: relative;
+
+  .prefix-icon,
+  .suffix-icon {
+    position: absolute;
+    z-index: $z-icon-decorators;
+
+    path {
+      fill: $grey;
+    }
+  }
+
+  .prefix-icon {
+    left: 0.75em;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 15px;
+    height: 15px;
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .suffix-icon {
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 1.75em;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+
+    svg {
+      position: absolute;
+      display: block;
+      height: 10px;
+      width: 10px;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+    }
+
+    &:hover path {
+      fill: $grey-light;
+    }
+
+    &:focus {
+      outline: none;
+      path {
+        fill: $grey-light;
+      }
+    }
+  }
+
+  .control {
+    width: 100%;
+  }
+
+  input {
+    width: 100%;
+    padding: 0.4em 1.75em 0.4em 2.25em;
+  }
+}

ui/app/styles/core/forms.scss

@@ -23,7 +23,7 @@
 .textarea {
   @include input;
   box-shadow: none;
-  padding: 0.75em 1.5em;
+  padding: 0.4em 0.75em;
   height: auto;
 
   &::placeholder {

ui/app/styles/utils/z-indices.scss

@@ -4,3 +4,4 @@ $z-gutter: 220;
 $z-gutter-backdrop: 219;
 $z-subnav: 200;
 $z-base: 100;
+$z-icon-decorators: 50;

ui/app/templates/components/search-box.hbs

@@ -1,3 +1,5 @@
 <div class="control">
+  <span class="prefix-icon">{{x-icon "search"}}</span>
   <input class="input {{inputClass}}" type="text" placeholder={{placeholder}} value={{_searchTerm}} oninput={{action "setSearchTerm"}}>
+  <button class="suffix-icon" onclick={{action "clear"}}>{{x-icon "cancel"}}</button>
 </div>

ui/public/images/icons/cancel.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path id="a" d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"/>
+</svg>

ui/public/images/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M12.5 11h-.79l-.28-.27A6.471 6.471 0 0 0 13 6.5 6.5 6.5 0 1 0 6.5 13c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L17.49 16l-4.99-5zm-6 0C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11z" id="a"/>
+</svg>