From cd4d0475738644467f94be8231194f570276fda0 Mon Sep 17 00:00:00 2001
From: Shanna Murry <shanna.murry84@gmail.com>
Date: Wed, 23 Nov 2022 11:27:33 -0500
Subject: [PATCH] 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                                  |  6 +++++
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 src/components/SearchBar/SearchBar.vue        | 11 ++++++---
 .../SearchBar/__tests__/SearchBar.spec.js     | 23 ++++++++++---------
 5 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 071efb924..3b913699a 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 6d6ae3b0a..e7414cff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.0-beta.6",
+      "version": "2.0.0-beta.7",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index e104c4478..e1e148b54 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 4297cdf6c..b48f204ce 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/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) {
diff --git a/src/components/SearchBar/__tests__/SearchBar.spec.js b/src/components/SearchBar/__tests__/SearchBar.spec.js
index 75d535363..4df777470 100644
--- a/src/components/SearchBar/__tests__/SearchBar.spec.js
+++ b/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 = {