diff --git a/.circleci/config.yml b/.circleci/config.yml index b789da1770..278b9c21ba 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -182,6 +182,7 @@ workflows: filters: branches: only: + - develop - feature-contentful # This is beta env for production soft releases - "build-prod-beta": diff --git a/__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeFilters.jsx.snap b/__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeFilters.jsx.snap index 477faa6ee6..5a29b8846c 100644 --- a/__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeFilters.jsx.snap +++ b/__tests__/shared/components/challenge-listing/Filters/__snapshots__/ChallengeFilters.jsx.snap @@ -9,6 +9,7 @@ exports[`Matches shallow shapshot shapshot 1`] = ` > + + ⨯ + + + ⨯ + { + setFilterState(Filter.setText(filterState, '')); + setSearchText(''); + }; + return (
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} diff --git a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx index 13f9756f50..986e987144 100644 --- a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx +++ b/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} /> + onClearSearch()} + onKeyPress={() => onClearSearch()} + > + ⨯ + 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, diff --git a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss index 0c295c25cf..08cfe39428 100644 --- a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss +++ b/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; @@ -43,6 +44,7 @@ $search-input-width: '100% - 56px'; margin-bottom: 0; margin-left: 10px; vertical-align: middle; + padding-right: 28px; @include placeholder { @include roboto-light; @@ -77,4 +79,24 @@ $search-input-width: '100% - 56px'; width: 16px; } } + + .ClearButton { + display: none; + cursor: pointer; + position: absolute; + right: $challenge-space-60 - 3; + padding: $base-unit; + border-radius: 0 $challenge-radius-4 $challenge-radius-4 0; + vertical-align: middle; + height: 38px; + font-size: 25px; + + &.active { + display: inline-block; + } + + &:hover { + color: $tc-red-110; + } + } }