From 9b22b49232da67bd15e04193006ce881a93265c0 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Mon, 7 Sep 2020 21:26:06 -0500
Subject: 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
---
 src/components/Global/Search.vue           | 33 ++++++++++++++++++++++++++++--
 src/components/Mixins/SearchFilterMixin.js | 17 +++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Mixins/SearchFilterMixin.js

(limited to 'src/components')

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>
diff --git a/src/components/Mixins/SearchFilterMixin.js b/src/components/Mixins/SearchFilterMixin.js
new file mode 100644
index 00000000..856975dc
--- /dev/null
+++ b/src/components/Mixins/SearchFilterMixin.js
@@ -0,0 +1,17 @@
+const SearchFilterMixin = {
+  data() {
+    return {
+      searchFilter: null
+    };
+  },
+  methods: {
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
+    },
+    onClearSearchInput() {
+      this.searchFilter = null;
+    }
+  }
+};
+
+export default SearchFilterMixin;
-- 
cgit v1.2.3