From bc43d39ab9efaa056d9d34c450a7770c60a04987 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 4 Nov 2024 14:03:57 +0700 Subject: [PATCH 1/3] change focus background color of element --- src/components/AttachmentPicker/index.native.tsx | 5 +++++ .../EmojiPicker/EmojiPickerMenuItem/index.tsx | 3 +-- src/components/MenuItem.tsx | 6 +++++- src/components/PopoverMenu.tsx | 5 ++++- src/components/SelectionList/BaseListItem.tsx | 6 ++++-- src/components/SelectionList/CardListItem.tsx | 2 +- src/components/SelectionList/ChatListItem.tsx | 4 +--- .../SelectionList/InviteMemberListItem.tsx | 2 +- src/components/SelectionList/RadioListItem.tsx | 2 +- .../SelectionList/Search/ReportListItem.tsx | 1 - .../SelectionList/Search/SearchQueryListItem.tsx | 2 +- .../SelectionList/Search/TransactionListItem.tsx | 1 - .../SelectionList/SelectableListItem.tsx | 2 +- src/components/SelectionList/TableListItem.tsx | 2 +- src/components/SelectionList/UserListItem.tsx | 2 +- .../categories/SpendCategorySelectorListItem.tsx | 1 - src/styles/utils/index.ts | 14 ++++++++++++++ 17 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx index bc4467e82f01..5305155ae495 100644 --- a/src/components/AttachmentPicker/index.native.tsx +++ b/src/components/AttachmentPicker/index.native.tsx @@ -16,6 +16,8 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as FileUtils from '@libs/fileDownload/FileUtils'; import CONST from '@src/CONST'; @@ -117,6 +119,8 @@ function AttachmentPicker({ }: AttachmentPickerProps) { const styles = useThemeStyles(); const [isVisible, setIsVisible] = useState(false); + const StyleUtils = useStyleUtils(); + const theme = useTheme(); const completeAttachmentSelection = useRef<(data: FileObject[]) => void>(() => {}); const onModalHide = useRef<() => void>(); @@ -444,6 +448,7 @@ function AttachmentPicker({ title={translate(item.textTranslationKey)} onPress={() => selectItem(item)} focused={focusedIndex === menuIndex} + wrapperStyle={StyleUtils.getItemBackgroundColorStyle(false, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)} /> ))} diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx index 8aaf4a14e560..1629089dace5 100644 --- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.tsx @@ -68,8 +68,7 @@ function EmojiPickerMenuItem({ ref.current = el ?? null; }} style={({pressed}) => [ - isFocused ? themeStyles.emojiItemKeyboardHighlighted : {}, - isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {}, + isFocused || isHovered || isHighlighted ? themeStyles.emojiItemHighlighted : {}, Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), themeStyles.emojiItem, ]} diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 303a51d064d9..7fb5533fd172 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -251,6 +251,9 @@ type MenuItemBaseProps = { /** Should we remove the background color of the menu item */ shouldRemoveBackground?: boolean; + /** Should we remove the hover background color of the menu item */ + shouldRemoveHoverBackground?: boolean; + /** Should we use default cursor for disabled content */ shouldUseDefaultCursorWhenDisabled?: boolean; @@ -411,6 +414,7 @@ function MenuItem( shouldEscapeText = undefined, shouldGreyOutWhenDisabled = true, shouldRemoveBackground = false, + shouldRemoveHoverBackground = false, shouldUseDefaultCursorWhenDisabled = false, shouldShowLoadingSpinnerIcon = false, isAnonymousAction = false, @@ -594,7 +598,7 @@ function MenuItem( StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true), ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]), shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled, - isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && styles.hoveredComponentBG, + isHovered && interactive && !focused && !pressed && !shouldRemoveBackground && !shouldRemoveHoverBackground && styles.hoveredComponentBG, ] as StyleProp } disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]} diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 21d0aa516d86..2f5537be6145 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -8,6 +8,7 @@ import type {ModalProps} from 'react-native-modal'; import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -168,6 +169,7 @@ function PopoverMenu({ }: PopoverMenuProps) { const styles = useThemeStyles(); const theme = useTheme(); + const StyleUtils = useStyleUtils(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct popover styles // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); @@ -262,7 +264,8 @@ function PopoverMenu({ } setFocusedIndex(menuIndex); }} - style={{backgroundColor: item.isSelected ? theme.activeComponentBG : undefined}} + wrapperStyle={StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, focusedIndex === menuIndex, theme.activeComponentBG, theme.hoverComponentBG)} + shouldRemoveHoverBackground={item.isSelected} titleStyle={StyleSheet.flatten([styles.flex1, item.titleStyle])} // Spread other props dynamically {...menuItemProps} diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index dc216b51e291..15a82e327b9a 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -6,6 +6,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useHover from '@hooks/useHover'; import {useMouseContext} from '@hooks/useMouseContext'; +import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -38,6 +39,7 @@ function BaseListItem({ }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const {hovered, bind} = useHover(); const {isMouseDownOnInput, setMouseUp} = useMouseContext(); @@ -96,13 +98,13 @@ function BaseListItem({ dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: true}} onMouseDown={(e) => e.preventDefault()} id={keyForList ?? ''} - style={pressableStyle} + style={[pressableStyle, isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, theme.activeComponentBG, theme.hoverComponentBG)]} onFocus={onFocus} onMouseLeave={handleMouseLeave} tabIndex={item.tabIndex} wrapperStyle={pressableWrapperStyle} > - + {typeof children === 'function' ? children(hovered) : children} {!canSelectMultiple && !!item.isSelected && !rightHandSideComponent && ( diff --git a/src/components/SelectionList/CardListItem.tsx b/src/components/SelectionList/CardListItem.tsx index 7f40d3165501..0e887d1d30db 100644 --- a/src/components/SelectionList/CardListItem.tsx +++ b/src/components/SelectionList/CardListItem.tsx @@ -46,7 +46,7 @@ function CardListItem({ return ( ({ return ( ({ ({ return ( ({ // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, - isFocused && styles.sidebarLinkActive, styles.mh0, ]; diff --git a/src/components/SelectionList/Search/SearchQueryListItem.tsx b/src/components/SelectionList/Search/SearchQueryListItem.tsx index f1636be0d88c..bba574fa3ac7 100644 --- a/src/components/SelectionList/Search/SearchQueryListItem.tsx +++ b/src/components/SelectionList/Search/SearchQueryListItem.tsx @@ -32,7 +32,7 @@ function SearchQueryListItem({item, isFocused, showTooltip, onSelectRow, onFocus return ( ({ // Removing background style because they are added to the parent OpacityView via animatedHighlightStyle styles.bgTransparent, item.isSelected && styles.activeComponentBG, - isFocused && styles.sidebarLinkActive, styles.mh0, ]; diff --git a/src/components/SelectionList/SelectableListItem.tsx b/src/components/SelectionList/SelectableListItem.tsx index b1b242737623..e3c2a36ea7ed 100644 --- a/src/components/SelectionList/SelectableListItem.tsx +++ b/src/components/SelectionList/SelectableListItem.tsx @@ -32,7 +32,7 @@ function SelectableListItem({ return ( ({ return ( ({ rightHandSideComponent={rightHandSideComponent} errors={item.errors} pendingAction={item.pendingAction} - pressableStyle={[isFocused && styles.sidebarLinkActive, pressableStyle]} + pressableStyle={pressableStyle} FooterComponent={ item.invitedSecondaryLogin ? ( diff --git a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx index dd7e2e2bd751..691a66918797 100644 --- a/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx +++ b/src/pages/workspace/categories/SpendCategorySelectorListItem.tsx @@ -15,7 +15,6 @@ function SpendCategorySelectorListItem({item, onSelectRo return ( ({ From a384558adb48021f7ff54e7f9154b9d64a1ba49a Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 4 Nov 2024 14:09:32 +0700 Subject: [PATCH 2/3] fix test --- tests/unit/DateUtilsTest.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/DateUtilsTest.ts b/tests/unit/DateUtilsTest.ts index 19acf86a77ca..d1617be86fc0 100644 --- a/tests/unit/DateUtilsTest.ts +++ b/tests/unit/DateUtilsTest.ts @@ -178,7 +178,7 @@ describe('DateUtils', () => { expect(DateUtils.isTomorrow(yesterdayInTimezone, timezone)).toBe(false); }); - it('isYesterday should correctly identify yesterday', () => { + it('isYesterday should correctly identify yesterday', () => { expect(DateUtils.isYesterday(yesterdayInTimezone, timezone)).toBe(true); expect(DateUtils.isYesterday(todayInTimezone, timezone)).toBe(false); expect(DateUtils.isYesterday(tomorrowInTimezone, timezone)).toBe(false); From 8ba8ef9d866f794e0a972635831843fa5d3d0282 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 4 Nov 2024 14:09:43 +0700 Subject: [PATCH 3/3] fix lint --- tests/unit/DateUtilsTest.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/DateUtilsTest.ts b/tests/unit/DateUtilsTest.ts index d1617be86fc0..19acf86a77ca 100644 --- a/tests/unit/DateUtilsTest.ts +++ b/tests/unit/DateUtilsTest.ts @@ -178,7 +178,7 @@ describe('DateUtils', () => { expect(DateUtils.isTomorrow(yesterdayInTimezone, timezone)).toBe(false); }); - it('isYesterday should correctly identify yesterday', () => { + it('isYesterday should correctly identify yesterday', () => { expect(DateUtils.isYesterday(yesterdayInTimezone, timezone)).toBe(true); expect(DateUtils.isYesterday(todayInTimezone, timezone)).toBe(false); expect(DateUtils.isYesterday(tomorrowInTimezone, timezone)).toBe(false);