Remove Settings-Icon from Search Bar (#9858)

* Remove Settings-Icon from Search Bar * Fix unittests, changelog, add spinner, make icon small * Remove unused class
owncloud · Oct 26, 2023 · 66967bd · 66967bd
1 parent 0b3c36f
commit 66967bd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 41 deletions.
diff --git a/changelog/unreleased/enhancement-remove-settings-icon-from-search-bar b/changelog/unreleased/enhancement-remove-settings-icon-from-search-bar
@@ -0,0 +1,6 @@
+Enhancement: Remove settings icon from searchbar
+
+We removed the settings icon from the searchbar.
+
+https://github.com/owncloud/web/pull/9858
+https://github.com/owncloud/web/issues/9664
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
@@ -4,7 +4,6 @@ import OcSearchBar from './OcSearchBar.vue'
 describe('OcSearchBar', () => {
   const selectors = {
     searchButton: '.oc-search-button',
-    advancedSearchButton: '.oc-advanced-search',
     searchInput: '.oc-search-input',
     searchButtonWrapper: '.oc-search-button-wrapper',
     searchClearButton: '.oc-search-clear'
@@ -42,10 +41,6 @@ describe('OcSearchBar', () => {
   describe('icon prop', () => {
     describe('when icon prop is not false', () => {
       const wrapper = getWrapper({ icon: 'mdi-icon' })
-      it('should add icon class to search input', () => {
-        const searchInput = wrapper.find(selectors.searchInput)
-        expect(searchInput.attributes('class')).toContain('oc-search-input-icon')
-      })
       it('should render icon', () => {
         const iconStub = wrapper.find('oc-icon-stub[name="mdi-icon"]')
         expect(iconStub.exists()).toBeTruthy()
@@ -185,21 +180,6 @@ describe('OcSearchBar', () => {
       expect(wrapper.emitted('search')).toBeFalsy()
     })
   })
-  describe('advanced search button', () => {
-    it('should be visible', () => {
-      const wrapper = getWrapper()
-      expect(wrapper.find(selectors.advancedSearchButton).exists()).toBeTruthy()
-    })
-    it('should not be visible if disabled', () => {
-      const wrapper = getWrapper({ showAdvancedSearchButton: false })
-      expect(wrapper.find(selectors.advancedSearchButton).exists()).toBeFalsy()
-    })
-    it('should trigger the "advancedSearch"-event on click', async () => {
-      const wrapper = getWrapper()
-      await wrapper.find(selectors.advancedSearchButton).trigger('click')
-      expect(wrapper.emitted('advancedSearch').length).toBeGreaterThan(0)
-    })
-  })
 })
 
 function getWrapper(props = {}) {

diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -6,14 +6,6 @@
     :class="{ 'oc-search-small': small }"
   >
     <div class="oc-width-expand oc-position-relative">
-      <span v-if="icon" class="oc-search-icon" @click="focusSearchInput">
-        <oc-icon v-show="!loading" :name="icon" fill-type="line" />
-        <oc-spinner
-          v-show="loading"
-          :size="spinnerSize"
-          :aria-label="loadingAccessibleLabelValue"
-        />
-      </span>
       <input
         ref="searchInput"
         :class="inputClass"
@@ -27,14 +19,19 @@
       />
       <slot name="locationFilter" />
       <oc-button
-        v-if="showAdvancedSearchButton"
-        v-oc-tooltip="$gettext('Open advanced search')"
-        :aria-label="$gettext('Open advanced search')"
-        class="oc-advanced-search oc-position-small oc-position-center-right oc-mt-rm"
+        v-if="icon"
+        v-oc-tooltip="$gettext('Search')"
+        :aria-label="$gettext('Search')"
+        class="oc-position-small oc-position-center-right oc-mt-rm"
         appearance="raw"
         @click.prevent.stop="$emit('advancedSearch', $event)"
       >
-        <oc-icon name="equalizer" size="small" variation="passive" />
+        <oc-icon v-show="!loading" :name="icon" size="small" fill-type="line" variation="passive" />
+        <oc-spinner
+          v-show="loading"
+          :size="spinnerSize"
+          :aria-label="loadingAccessibleLabelValue"
+        />
       </oc-button>
     </div>
     <div class="oc-search-button-wrapper" :class="{ 'oc-invisible-sr': buttonHidden }">
@@ -197,13 +194,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    /**
-     * Show a "Advanced search button.
-     */
-    showAdvancedSearchButton: {
-      type: Boolean,
-      default: true
-    },
     /**
      * Variation of the cancel button
      */
@@ -263,7 +253,6 @@ export default defineComponent({
     inputClass() {
       const classes = ['oc-search-input', 'oc-input']
 
-      this.icon && classes.push('oc-search-input-icon')
       !this.buttonHidden && classes.push('oc-search-input-button')
 
       return classes
@@ -333,6 +322,7 @@ export default defineComponent({
   &-input {
     border-radius: 25px !important;
     border: none;
+    padding: var(--oc-space-medium);
     color: var(--oc-color-input-text-muted) !important;
 
     &:focus {