refactor and use base-button in SearchableInput

webapp/components/generic/SearchHeading/SearchHeading.vue

@@ -1,9 +1,7 @@
 <template>
-  <ds-flex-item class="search-heading">
-    <ds-heading soft size="h5">
+  <ds-heading soft size="h5" class="search-heading">
     {{ $t(`search.heading.${resourceType}`) }}
   </ds-heading>
-  </ds-flex-item>
 </template>
 <script>
 export default {
@@ -14,13 +12,16 @@ export default {
 }
 </script>
 <style lang="scss">
-.search-heading {
-  display: flex;
-  flex-wrap: wrap;
-  font-weight: bold;
+.search-heading.ds-heading {
+  margin: -$space-x-small;
+  padding: $space-x-small;
+  background-color: $color-neutral-100;
+  font-weight: $font-weight-bold;
   cursor: default;
-  background-color: white;
-  margin: -8px;
-  padding: 8px;
+}
+
+// override styleguide styles
+.search-heading.ds-heading:first-child {
+  margin-top: -8px;
 }
 </style>

webapp/components/generic/SearchableInput/SearchableInput.spec.js

@@ -32,8 +32,7 @@ describe('SearchableInput.vue', () => {
   }
 
   describe('mount', () => {
-    describe('testing custom functions', () => {
-      let select
+    let select, dropdown
 
     beforeEach(() => {
       select = wrapper.find('.ds-select')
@@ -41,19 +40,19 @@ describe('SearchableInput.vue', () => {
       select.element.value = 'abcd'
     })
 
-      it('opens the select dropdown when focused on', () => {
-        expect(wrapper.find('.is-open').exists()).toBe(true)
+    it('opens the dropdown when focused', () => {
+      expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true)
     })
 
-      it('opens the select dropdown and blurs after focused on', () => {
+    it('closes the dropdown when blurred', () => {
       select.trigger('blur')
-        expect(wrapper.find('.is-open').exists()).toBe(false)
+      expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
     })
 
-      it('is clearable', () => {
+    it('closes the dropdown when cleared with esc key', () => {
       select.trigger('input')
       select.trigger('keyup.esc')
-        expect(wrapper.find('.is-open').exists()).toBe(false)
+      expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
     })
 
     it('changes the unprocessedSearchInput as the value changes', () => {
@@ -111,5 +110,4 @@ describe('SearchableInput.vue', () => {
       })
     })
   })
-  })
 })

webapp/components/generic/SearchableInput/SearchableInput.vue

@@ -3,28 +3,20 @@
     class="searchable-input"
     aria-label="search"
     role="search"
-    :class="{
-      'is-active': isActive,
-      'is-open': isOpen,
-    }"
   >
-    <div class="field">
-      <div class="control">
-        <ds-button v-if="isActive" icon="close" ghost class="search-clear-btn" @click="clear" />
     <ds-select
       type="search"
       icon="search"
       v-model="searchValue"
       :id="id"
       label-prop="id"
-          :icon-right="isActive ? 'close' : null"
+      :icon-right="null"
       :options="options"
       :loading="loading"
       :filter="item => item"
       :no-options-available="emptyText"
       :auto-reset-search="!searchValue"
       :placeholder="$t('search.placeholder')"
-          @click.capture.native="isOpen = true"
       @focus.capture.native="onFocus"
       @input.native="handleInput"
       @keyup.enter.native="onEnter"
@@ -34,27 +26,25 @@
       @input.exact="onSelect"
     >
       <template #option="{ option }">
-            <span v-if="isFirstOfType(option)" class="search-heading">
-              <search-heading :resource-type="option.__typename" />
-            </span>
-            <span
+        <search-heading v-if="isFirstOfType(option)" :resource-type="option.__typename" />
+        <p
           v-if="option.__typename === 'User'"
-              :class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
+          :class="{ 'option-with-heading': isFirstOfType(option) }"
         >
           <hc-user :user="option" :showPopover="false" />
-            </span>
-            <span
+        </p>
+        <p
           v-if="option.__typename === 'Post'"
-              :class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
+          :class="{ 'option-with-heading': isFirstOfType(option) }"
         >
           <search-post :option="option" />
-            </span>
+        </p>
       </template>
     </ds-select>
-      </div>
-    </div>
+    <base-button v-if="isActive" icon="close" circle ghost size="small" @click="clear" />
   </div>
 </template>
+
 <script>
 import { isEmpty } from 'lodash'
 import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
@@ -75,7 +65,6 @@ export default {
   },
   data() {
     return {
-      isOpen: false,
       searchValue: '',
       value: '',
       unprocessedSearchInput: '',
@@ -101,12 +90,10 @@ export default {
     },
     onFocus(event) {
       clearTimeout(this.searchProcess)
-      this.isOpen = true
     },
     handleInput(event) {
       clearTimeout(this.searchProcess)
       this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
-      this.isOpen = true
       this.unprocessedSearchInput = this.value
       if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
         return
@@ -120,7 +107,6 @@ export default {
      * TODO: on enter we should go to a dedicated search page!?
      */
     onEnter(event) {
-      this.isOpen = false
       clearTimeout(this.searchProcess)
       if (!this.pending) {
         this.previousSearchTerm = this.unprocessedSearchInput
@@ -137,7 +123,6 @@ export default {
       }
     },
     clear() {
-      this.isOpen = false
       this.unprocessedSearchInput = ''
       this.previousSearchTerm = ''
       this.searchValue = ''
@@ -146,11 +131,9 @@ export default {
     },
     onBlur(event) {
       this.searchValue = this.previousSearchTerm
-      this.isOpen = false
       clearTimeout(this.searchProcess)
     },
     onSelect(item) {
-      this.isOpen = false
       this.goToResource(item)
       this.$nextTick(() => {
         this.searchValue = this.previousSearchTerm
@@ -170,58 +153,32 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 .searchable-input {
-  display: flex;
-  align-self: center;
-  width: 100%;
   position: relative;
-  $padding-left: $space-x-small;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .ds-form-item {
+    flex-basis: 100%;
+    margin-bottom: 0;
+  }
+
+  .ds-select-dropdown {
+    max-height: 70vh;
+    box-shadow: $box-shadow-x-large;
+  }
+
   .option-with-heading {
     margin-top: $space-x-small;
     padding-top: $space-xx-small;
   }
-  .flex-span {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .ds-select-dropdown {
-    transition: box-shadow 100ms;
-    max-height: 70vh;
-  }
-  &.is-open {
-    .ds-select-dropdown {
-      box-shadow: $box-shadow-x-large;
-    }
-  }
-  .ds-select-dropdown-message {
-    opacity: 0.5;
-    padding-left: $padding-left;
-  }
-  .search-clear-btn {
-    right: 0;
-    z-index: 10;
+
+  .base-button {
     position: absolute;
-    height: 100%;
-    width: 36px;
-    cursor: pointer;
-  }
-  .ds-select {
-    z-index: $z-index-dropdown + 1;
-  }
-  .ds-select-option-hover {
-    .ds-text-size-small,
-    .ds-text-size-small-x {
-      color: $text-color-soft;
-    }
-  }
-  .field {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-  .control {
-    width: 100%;
+    right: $space-xx-small;
   }
 }
 </style>