diff --git a/src/search-manager/FilterBy.scss b/src/search-manager/FilterBy.scss index 189f31f11c..3caccac691 100644 --- a/src/search-manager/FilterBy.scss +++ b/src/search-manager/FilterBy.scss @@ -5,3 +5,7 @@ width: 100%; } } + +.clear-filter-button:hover { + color: $info-900 !important; +} diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx index 2c0c506422..dc65c7ca86 100644 --- a/src/search-manager/FilterByBlockType.tsx +++ b/src/search-manager/FilterByBlockType.tsx @@ -70,9 +70,10 @@ const FilterByBlockType: React.FC> = () => { ({ label: }))} label={} + clearFilter={() => setBlockTypesFilter([])} icon={FilterList} > - + > = () => { const intl = useIntl(); - const { tagsFilter } = useSearchContext(); + const { tagsFilter, setTagsFilter } = useSearchContext(); const [tagSearchKeywords, setTagSearchKeywords] = React.useState(''); // e.g. {"Location", "Location > North America"} if those two paths of the tag tree are expanded @@ -186,9 +186,10 @@ const FilterByTags: React.FC> = () => { ({ label: tf.split(TAG_SEP).pop() }))} label={} + clearFilter={() => setTagsFilter([])} icon={Tag} > - + void, icon?: React.ReactNode; // eslint-disable-line react/require-default-props }> = ({ appliedFilters, ...props }) => { + const intl = useIntl(); const [isOpen, open, close] = useToggle(false); const [target, setTarget] = React.useState(null); + const clearAndClose = React.useCallback(() => { + props.clearFilter(); + close(); + }, [props.clearFilter]); + return ( <>
@@ -53,6 +63,21 @@ const SearchFilterWidget: React.FC<{ style={{ textAlign: 'start' }} > {props.children} + + { + !!appliedFilters.length + && ( +
+ +
+ ) + }
diff --git a/src/search-manager/messages.ts b/src/search-manager/messages.ts index 507013497a..7336878470 100644 --- a/src/search-manager/messages.ts +++ b/src/search-manager/messages.ts @@ -70,6 +70,11 @@ const messages = defineMessages({ defaultMessage: '{numResults, plural, one {# result} other {# results}} found', description: 'This count displays how many matching results were found from the user\'s search', }, + clearFilter: { + id: 'course-authoring.search-manager.searchFilterWidget.clearFilter', + defaultMessage: 'Clear Filter', + description: 'Label for the button that removes applied search filters in a specific widget', + }, }); export default messages;