Merge pull request #4255 from narekcat/hot-fix-x-button-to-clear-search

Add X button to clear the challenge search.

Author: skyhit

__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeFilters.jsx.snap

@@ -9,6 +9,7 @@ exports[`Matches shallow shapshot shapshot 1`] = `
   >
     <ChallengeSearchBar
       label="Search Challenges:"
+      onClearSearch={[Function]}
       onSearch={[Function]}
       placeholder="Type the challenge name here"
       query=""
@@ -100,6 +101,7 @@ exports[`Matches shallow shapshot shapshot 2`] = `
   >
     <ChallengeSearchBar
       label="Search Challenges:"
+      onClearSearch={[Function]}
       onSearch={[Function]}
       placeholder="Type the challenge name here"
       query=""

__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeSearchBar.jsx.snap

@@ -17,6 +17,13 @@ exports[`Matches shallow shapshot 1`] = `
       type="text"
       value="query"
     />
+    <span
+      className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__ClearButton___u_e0r src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__active___8LjMb"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+    >
+      ⨯
+    </span>
     <span
       className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__SearchButton___3GzR0 src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__active___8LjMb"
       onClick={[Function]}
@@ -53,6 +60,13 @@ exports[`Matches shallow shapshot 2`] = `
       type="text"
       value=""
     />
+    <span
+      className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__ClearButton___u_e0r"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+    >
+      ⨯
+    </span>
     <span
       className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__SearchButton___3GzR0"
       onClick={[Function]}

src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx

@@ -57,11 +57,17 @@ export default function ChallengeFilters({
     setFilterState(filterObj);
   };
 
+  const clearSearch = () => {
+    setFilterState(Filter.setText(filterState, ''));
+    setSearchText('');
+  };
+
   return (
     <div styleName="challenge-filters">
       <div styleName="filter-header">
         <ChallengeSearchBar
           onSearch={text => setFilterState(Filter.setText(filterState, text))}
+          onClearSearch={() => clearSearch()}
           label={isReviewOpportunitiesBucket ? 'Search Review Opportunities:' : 'Search Challenges:'}
           placeholder={isReviewOpportunitiesBucket ? 'Search Review Opportunities' : 'Type the challenge name here'}
           query={searchText}

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx

@@ -19,6 +19,7 @@ import ZoomIcon from './ui-zoom.svg';
 
 export default function ChallengeSearchBar({
   onSearch,
+  onClearSearch,
   placeholder,
   query,
   setQuery,
@@ -35,6 +36,13 @@ export default function ChallengeSearchBar({
           type="text"
           value={query}
         />
+        <span
+          styleName={`ClearButton ${query ? 'active' : ''}`}
+          onClick={() => onClearSearch()}
+          onKeyPress={() => onClearSearch()}
+        >
+          &#10799;
+        </span>
         <span
           styleName={`SearchButton ${query ? 'active' : ''}`}
           onClick={() => onSearch(query.trim())}
@@ -56,6 +64,7 @@ ChallengeSearchBar.defaultProps = {
 
 ChallengeSearchBar.propTypes = {
   onSearch: PT.func.isRequired,
+  onClearSearch: PT.func.isRequired,
   label: PT.string,
   placeholder: PT.string,
   query: PT.string.isRequired,

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss

@@ -4,6 +4,7 @@ $challenge-space-15: $base-unit * 3;
 $challenge-space-20: $base-unit * 4;
 $challenge-space-30: $base-unit * 6;
 $challenge-space-40: $base-unit * 8;
+$challenge-space-60: $base-unit * 12;
 $challenge-radius-1: $corner-radius / 2;
 $challenge-radius-4: $corner-radius * 2;
 
@@ -77,4 +78,24 @@ $search-input-width: '100% - 56px';
       width: 16px;
     }
   }
+
+  .ClearButton {
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    right: $challenge-space-60 - 4;
+    padding: $base-unit;
+    border-radius: 0 $challenge-radius-4 $challenge-radius-4 0;
+    vertical-align: middle;
+    height: 40px;
+    font-size: 25px;
+
+    &.active {
+      display: inline-block;
+    }
+
+    &:hover {
+      color: $tc-red-110;
+    }
+  }
 }