Dang-1761/search input no x when no text (#363)

* do not show clear button if there is not a search term

* update package

* pr feedback changes

* update tests for searchBar

* remove outdated test

* update test to check for disabled

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.0-beta.7
+
+### Features
+
+Do not show clear button in `SearchBar` unless there is a search term
+
 ## v2.0.0-beta.6
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/SearchBar/SearchBar.vue

@@ -16,7 +16,10 @@
       </template>
       <template #iconRight>
         <button
-          class="block"
+          :class="[
+            'block',
+            searchTerm ? 'opacity-100 cursor-pointer' : 'opacity-0'
+          ]"
           :aria-label="t('search.closeLabel')"
           :disabled="disabled"
           data-testid="clearSearchButton"
@@ -150,8 +153,10 @@ export default {
       });
     },
     clearSearch () {
-      this.searchTerm = '';
-      this.searchResults = [];
+      if (this.searchTerm) {
+        this.searchTerm = '';
+        this.searchResults = [];
+      }
     },
     onClickOutside ($event) {
       if (this.$refs.searchBar) {

src/components/SearchBar/__tests__/SearchBar.spec.js

@@ -40,17 +40,6 @@ const renderComponent = (options) => render(SearchBar, { ...options, global: { m
 
 describe('SearchBar', () => {
 
-  it('has the x button disabled when no text was entered', () => {
-    const props = {
-      ...initialProps
-    };
-
-    const { queryByTestId } = renderComponent({ props });
-
-    const button = queryByTestId('clearSearchButton');
-    expect(button).toBeDisabled();
-  });
-
   it('clears entered searchTerm when x button is clicked', async () => {
     const searchTerm = 'something';
     const props = {
@@ -68,6 +57,18 @@ describe('SearchBar', () => {
     expect(input.value).toBe('');
   });
 
+  it('does not show the clear button if there is no search term present', async () => {
+    const props = {
+      ...initialProps
+    };
+
+    const { queryByTestId } = renderComponent({ props });
+
+    const button = queryByTestId('clearSearchButton');
+    expect(button).toHaveClass('opacity-0');
+    expect(button).toBeDisabled();
+  });
+
   it('executes the search function when the user types', async () => {
     const searchTerm = 'baseball';
     const props = {