Add table search filter clear button

- Adds ability to quickly clear a table input search field
- Uses similar styling to password toggle icon and datepicker
- Button style to be addressed in separate commit to match
  style guide

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I18f2e01c28c00c7e7b2ad1af924070241caf36a5

1 files changed, 31 insertions, 2 deletions

diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index 9ebf4680..eeb909a8 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -12,12 +12,22 @@
         </b-input-group-prepend>
         <b-form-input
           :id="`searchInput-${_uid}`"
+          ref="searchInput"
           v-model="filter"
           class="search-input"
           type="text"
           :placeholder="placeholder"
           @input="onChangeInput"
-        ></b-form-input>
+        >
+        </b-form-input>
+        <b-button
+          v-if="filter"
+          variant="link"
+          :aria-label="$t('global.ariaLabel.clearSearch')"
+          @click="onClearSearch"
+        >
+          <icon-close :title="$t('global.ariaLabel.clearSearch')" />
+        </b-button>
       </b-input-group>
     </b-form-group>
   </div>
@@ -25,9 +35,11 @@
 
 <script>
 import IconSearch from '@carbon/icons-vue/es/search/16';
+import IconClose from '@carbon/icons-vue/es/close/20';
+
 export default {
   name: 'Search',
-  components: { IconSearch },
+  components: { IconSearch, IconClose },
   props: {
     placeholder: {
       type: String,
@@ -44,6 +56,11 @@ export default {
   methods: {
     onChangeInput() {
       this.$emit('changeSearch', this.filter);
+    },
+    onClearSearch() {
+      this.filter = '';
+      this.$emit('clearSearch');
+      this.$refs.searchInput.focus();
     }
   }
 };
@@ -60,4 +77,16 @@ export default {
   z-index: 4;
   stroke: gray('400');
 }
+
+.btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 0.4rem 1rem;
+  z-index: 4;
+  svg {
+    margin-left: 0;
+    vertical-align: sub;
+  }
+}
 </style>