From a615a6c2e5a58f4616cc366e1753041a0afbd98f Mon Sep 17 00:00:00 2001 From: Narek Vardzelyan Date: Wed, 15 Apr 2020 23:59:37 +0400 Subject: [PATCH 1/4] Add X button to clear the challenge search. --- .../Filters/ChallengeFilters.jsx | 6 ++++++ .../Filters/ChallengeSearchBar/index.jsx | 9 ++++++++ .../Filters/ChallengeSearchBar/style.scss | 21 +++++++++++++++++++ 3 files changed, 36 insertions(+) diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx index c32da2cc94..521441e08d 100644 --- a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx +++ b/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 (
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..a65fb234ea 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; @@ -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; + } + } } From 1dcf3b7e297451caf5c387b3dac1ac7cec14dcc4 Mon Sep 17 00:00:00 2001 From: Narek Vardzelyan Date: Thu, 16 Apr 2020 12:31:08 +0400 Subject: [PATCH 2/4] Update shanged files snapshots. --- .../__snapshots__/ChallengeFilters.jsx.snap | 2 ++ .../__snapshots__/ChallengeSearchBar.jsx.snap | 14 ++++++++++++++ 2 files changed, 16 insertions(+) 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`] = ` > + + ⨯ + + + ⨯ + Date: Thu, 16 Apr 2020 18:30:51 +0530 Subject: [PATCH 3/4] ci: deploying on test env for QA --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5c9cd08cf3..40ed119dd8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -183,7 +183,7 @@ workflows: branches: only: - develop - - feature-contentful + - hot-fix-x-button-to-clear-search # This is beta env for production soft releases - "build-prod-beta": context : org-global From ec6a29e914200b09cf1acbe9c794547fb08ea77c Mon Sep 17 00:00:00 2001 From: Narek Vardzelyan Date: Fri, 17 Apr 2020 12:07:37 +0400 Subject: [PATCH 4/4] Fix a bug due to which the 'x' button overlapped with the text. --- .../challenge-listing/Filters/ChallengeSearchBar/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss index a65fb234ea..08cfe39428 100644 --- a/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss +++ b/src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss @@ -44,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; @@ -83,11 +84,11 @@ $search-input-width: '100% - 56px'; display: none; cursor: pointer; position: absolute; - right: $challenge-space-60 - 4; + right: $challenge-space-60 - 3; padding: $base-unit; border-radius: 0 $challenge-radius-4 $challenge-radius-4 0; vertical-align: middle; - height: 40px; + height: 38px; font-size: 25px; &.active {