From c47f7149d8b4b7894329ae702ef464315314f99d Mon Sep 17 00:00:00 2001 From: Nevyana Angelova Date: Thu, 7 Jan 2021 16:42:44 +0200 Subject: [PATCH 1/3] Fix regressions in RHS and Status menu --- components/search/search.tsx | 40 +++++++++---------- components/search_bar/search_bar.tsx | 14 +++---- components/search_results/search_results.tsx | 2 +- components/sidebar_right/sidebar_right.jsx | 16 +++++--- .../widgets/menu/menu_items/menu_item.scss | 1 - components/widgets/separator/separator.scss | 2 - 6 files changed, 38 insertions(+), 37 deletions(-) diff --git a/components/search/search.tsx b/components/search/search.tsx index 41a3b6aa3d6f..5f9f8c3e78ca 100644 --- a/components/search/search.tsx +++ b/components/search/search.tsx @@ -64,8 +64,8 @@ const Search: React.FC = (props: Props): JSX.Element => { const intl = useIntl(); // generate intial component state and setters - const [focussed, setFocussed] = useState(false); - const [keepInputFocussed, setKeepInputFocussed] = useState(false); + const [focused, setFocused] = useState(false); + const [keepInputFocused, setKeepInputFocused] = useState(false); const [indexChangedViaKeyPress, setIndexChangedViaKeyPress] = useState(false); const [highlightedSearchHintIndex, setHighlightedSearchHintIndex] = useState(-1); const [visibleSearchHintOptions, setVisibleSearchHintOptions] = useState( @@ -85,13 +85,13 @@ const Search: React.FC = (props: Props): JSX.Element => { }, [searchTerms]); useEffect((): void => { - if (!Utils.isMobile() && focussed && keepInputFocussed) { + if (!Utils.isMobile() && focused && keepInputFocused) { handleBlur(); } }, [searchTerms]); useEffect((): void => { - if (props.isFocus) { + if (props.isFocus && !props.isRhsOpen) { handleFocus(); } else { handleBlur(); @@ -102,19 +102,19 @@ const Search: React.FC = (props: Props): JSX.Element => { const handleClose = (): void => actions.closeRightHandSide(); // focus the search input - const handleFocus = (): void => setFocussed(true); + const handleFocus = (): void => setFocused(true); - // release focus from the search input or unset `keepInputFocussed` value - // `keepInputFocussed` is used to keep the search input focussed when a + // release focus from the search input or unset `keepInputFocused` value + // `keepInputFocused` is used to keep the search input focused when a // user selects a suggestion from `SearchHint` with a click const handleBlur = (): void => { // add time out so that the pinned and member buttons are clickable // when focus is released from the search box. setTimeout((): void => { - if (keepInputFocussed) { - setKeepInputFocussed(false); + if (keepInputFocused) { + setKeepInputFocused(false); } else { - setFocussed(false); + setFocused(false); } }, 0); @@ -122,10 +122,10 @@ const Search: React.FC = (props: Props): JSX.Element => { }; const handleSearchHintSelection = (): void => { - if (focussed) { - setKeepInputFocussed(true); + if (focused) { + setKeepInputFocused(true); } else { - setFocussed(true); + setFocused(true); } }; @@ -177,7 +177,7 @@ const Search: React.FC = (props: Props): JSX.Element => { // `handleSubmit` function called from the `form` if (indexChangedViaKeyPress) { e.preventDefault(); - setKeepInputFocussed(true); + setKeepInputFocused(true); handleAddSearchTerm(visibleSearchHintOptions[highlightedSearchHintIndex].searchTerm); } @@ -191,8 +191,8 @@ const Search: React.FC = (props: Props): JSX.Element => { e.preventDefault(); handleSearch().then(() => { - setKeepInputFocussed(false); - setFocussed(false); + setKeepInputFocused(false); + setFocused(false); }); }; @@ -218,7 +218,7 @@ const Search: React.FC = (props: Props): JSX.Element => { const handleClear = (): void => { if (props.isMentionSearch) { - setFocussed(false); + setFocused(false); actions.updateRhsState(RHSStates.SEARCH); } actions.updateSearchTerms(''); @@ -301,7 +301,7 @@ const Search: React.FC = (props: Props): JSX.Element => { return <>; } - const helpClass = `search-help-popover${(focussed && termsUsed <= 2) ? ' visible' : ''}`; + const helpClass = `search-help-popover${(focused && termsUsed <= 2) ? ' visible' : ''}`; return ( = (props: Props): JSX.Element => { handleSubmit={handleSubmit} handleFocus={handleFocus} handleBlur={handleBlur} - keepFocussed={keepInputFocussed} - isFocussed={focussed} + keepFocused={keepInputFocused} + isFocused={focused} suggestionProviders={suggestionProviders.current} isSideBarRight={props.isSideBarRight} isSearchingTerm={props.isSearchingTerm} diff --git a/components/search_bar/search_bar.tsx b/components/search_bar/search_bar.tsx index 068fb7303bc1..889bf59fc943 100644 --- a/components/search_bar/search_bar.tsx +++ b/components/search_bar/search_bar.tsx @@ -28,8 +28,8 @@ type Props = { handleClear: () => void; handleFocus: () => void; handleBlur: () => void; - keepFocussed: boolean; - isFocussed: boolean; + keepFocused: boolean; + isFocused: boolean; suggestionProviders: Provider[]; isSearchingTerm: boolean; isFocus: boolean; @@ -45,23 +45,23 @@ const defaultProps: Partial = { }; const SearchBar: React.FunctionComponent = (props: Props): JSX.Element => { - const {isFocussed, keepFocussed, searchTerms, suggestionProviders} = props; + const {isFocused, keepFocused, searchTerms, suggestionProviders} = props; const searchRef = useRef(); const intl = useIntl(); useEffect((): void => { - const shouldFocus = isFocussed || keepFocussed; + const shouldFocus = isFocused || keepFocused; if (shouldFocus) { // let redux handle changes before focussing the input setTimeout(() => searchRef.current?.focus(), 0); } else { setTimeout(() => searchRef.current?.blur(), 0); } - }, [isFocussed, keepFocussed]); + }, [isFocused, keepFocused]); useEffect((): void => { - if (isFocussed && !keepFocussed && searchTerms.endsWith('""')) { + if (isFocused && !keepFocused && searchTerms.endsWith('""')) { setTimeout(() => searchRef.current?.focus(), 0); } }, [searchTerms]); @@ -102,7 +102,7 @@ const SearchBar: React.FunctionComponent = (props: Props): JSX.Element => >
= (props: Props): JSX.Element => { ); break; - case (noResults && !searchTerms && !isMentionSearch): + case (noResults && !searchTerms && !isMentionSearch && !isPinnedPosts && !isFlaggedPosts): contentItems = (
+
+ + +
); break; case postCardVisible: diff --git a/components/widgets/menu/menu_items/menu_item.scss b/components/widgets/menu/menu_items/menu_item.scss index fc6e522c88ce..c91c19f93717 100644 --- a/components/widgets/menu/menu_items/menu_item.scss +++ b/components/widgets/menu/menu_items/menu_item.scss @@ -83,7 +83,6 @@ &.MenuItem__with-help { height: auto; - padding: 0 24px; .MenuItem__primary-text { padding: 7px 0 3px; diff --git a/components/widgets/separator/separator.scss b/components/widgets/separator/separator.scss index 6c6bd537a0cb..982b7a685fc9 100644 --- a/components/widgets/separator/separator.scss +++ b/components/widgets/separator/separator.scss @@ -11,9 +11,7 @@ text-align: center; z-index: 0; pointer-events: none; - z-index: 1; - height: 1px; margin-bottom: 1em; margin-top: -1em; From 7c82ae86b7e45d5e1a853d5f10a8ccf4c64a0827 Mon Sep 17 00:00:00 2001 From: Nevyana Angelova Date: Thu, 7 Jan 2021 16:57:22 +0200 Subject: [PATCH 2/3] update tests --- .../__snapshots__/search_bar.test.jsx.snap | 14 ++++++++------ components/search_bar/search_bar.test.jsx | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/components/search_bar/__snapshots__/search_bar.test.jsx.snap b/components/search_bar/__snapshots__/search_bar.test.jsx.snap index 353f39a69195..3451427c2300 100644 --- a/components/search_bar/__snapshots__/search_bar.test.jsx.snap +++ b/components/search_bar/__snapshots__/search_bar.test.jsx.snap @@ -45,10 +45,10 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] = handleFocus={[MockFunction]} handleSubmit={[MockFunction]} isFocus={false} - isFocussed={false} + isFocused={false} isSearchingTerm={false} isSideBarRight={false} - keepFocussed={false} + keepFocused={false} searchTerms="test" suggestionProviders={ Array [ @@ -124,10 +124,10 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1` handleFocus={[MockFunction]} handleSubmit={[MockFunction]} isFocus={false} - isFocussed={false} + isFocused={false} isSearchingTerm={false} isSideBarRight={false} - keepFocussed={false} + keepFocused={false} searchTerms="" suggestionProviders={ Array [ @@ -203,10 +203,11 @@ exports[`components/search_bar/SearchBar should match snapshot without search on handleFocus={[MockFunction]} handleSubmit={[MockFunction]} isFocus={false} + isFocused={false} isFocussed={true} isSearchingTerm={false} isSideBarRight={false} - keepFocussed={false} + keepFocused={false} searchTerms="" suggestionProviders={ Array [ @@ -282,10 +283,11 @@ exports[`components/search_bar/SearchBar should match snapshot without search on handleFocus={[MockFunction]} handleSubmit={[MockFunction]} isFocus={false} + isFocused={false} isFocussed={true} isSearchingTerm={false} isSideBarRight={false} - keepFocussed={false} + keepFocused={false} searchTerms="" suggestionProviders={ Array [ diff --git a/components/search_bar/search_bar.test.jsx b/components/search_bar/search_bar.test.jsx index cde1d93cfa91..f1803b961957 100644 --- a/components/search_bar/search_bar.test.jsx +++ b/components/search_bar/search_bar.test.jsx @@ -39,8 +39,8 @@ describe('components/search_bar/SearchBar', () => { const baseProps = { suggestionProviders, searchTerms: '', - keepFocussed: false, - isFocussed: false, + keepFocused: false, + isFocused: false, isSideBarRight: false, isSearchingTerm: false, isFocus: false, From 38a7ea4e9f6e47e14fdc34fb6b987f4d0c0a6ad7 Mon Sep 17 00:00:00 2001 From: Nevyana Angelova Date: Thu, 7 Jan 2021 18:24:44 +0200 Subject: [PATCH 3/3] Fix separator margins --- components/widgets/separator/separator.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/widgets/separator/separator.scss b/components/widgets/separator/separator.scss index 982b7a685fc9..4e7ce4e6fa66 100644 --- a/components/widgets/separator/separator.scss +++ b/components/widgets/separator/separator.scss @@ -5,7 +5,7 @@ @import 'utils/module'; .Separator { - height: 2em; + height: 1px; margin: 0; position: relative; text-align: center;