Add cancel-button and -handler to search component

changelog/unreleased/enhancement-search-cancel

@@ -0,0 +1,6 @@
+Enhancement: "Chancel"-button and -handler in OcSearchBar
+
+We've added to possibility to have a "cancel"-button and -handler in the `OcSearchBar` component.
+
+https://github.com/owncloud/web/issues/7617
+https://github.com/owncloud/owncloud-design-system/pull/2328

src/components/atoms/OcSearchBar/OcSearchBar.vue

@@ -25,7 +25,7 @@
         @keydown.enter="onSearch"
       />
       <oc-button
-        v-if="query.length > 0"
+        v-if="query.length"
         :aria-label="$gettext('Clear search query')"
         class="oc-search-clear oc-position-small oc-position-center-right oc-mt-rm"
         appearance="raw"
@@ -46,6 +46,15 @@
         {{ buttonLabel }}
       </oc-button>
     </div>
+    <oc-button
+      v-if="showCancelButton"
+      :variation="cancelButtonVariation"
+      class="oc-ml-m"
+      appearance="raw"
+      @click="onCancel"
+    >
+      <span v-text="$gettext('Cancel')" />
+    </oc-button>
   </oc-grid>
 </template>
 
@@ -175,6 +184,33 @@ export default {
       required: false,
       default: "",
     },
+    /**
+     * Show a "cancel" button next to the search bar.
+     */
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Variation of the cancel button
+     */
+    cancelButtonVariation: {
+      type: String,
+      required: false,
+      default: "primary",
+      validator: value => {
+        return value.match(/(passive|primary|danger|success|warning|inverse)/)
+      },
+    },
+    /**
+     * Handler function for when the cancel button is clicked.
+     */
+    cancelHandler: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
   },
   data: () => ({
     query: "",
@@ -237,6 +273,12 @@ export default {
        */
       this.$emit("clear")
     },
+    onCancel() {
+      this.query = ""
+      this.onType("")
+      this.onSearch()
+      this.cancelHandler()
+    },
   },
 }
 </script>
@@ -346,6 +388,12 @@ export default {
       <oc-search-bar :isFilter="true" label="Search files" placeholder="Filter Files ..." :type-ahead="true" @search="onFilter" button="Filter" icon="" />
       <div v-if="filterQuery" class="oc-m">Filter query: {{ filterQuery }}</div>
     </section>
+    <section>
+      <h3 class="oc-heading-divider">
+        Search with cancel button
+      </h3>
+      <oc-search-bar label="Search files" placeholder="Enter search term" :type-ahead="true" :show-cancel-button="true" />
+    </section>
   </div>
 </template>
 <script>