diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index cca795cfa5e53..27d94b3bfc3a2 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -124,7 +124,8 @@ function Badge({ !isStrong && !success && !error && styles.badgeDefaultText, !isStrong && success && styles.badgeSuccessText, !isStrong && error && styles.badgeDangerText, - isStrong && (success || error) && styles.badgeStrongText, + isStrong && success && styles.buttonSuccessText, + isStrong && error && styles.buttonDangerText, textStyles, isDeleted ? styles.offlineFeedbackDeleted : {}, ]} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 2280563fa3225..721ca77940528 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -26,7 +26,7 @@ import TextInput from './components/TextInput'; import useSearchFocusSync from './hooks/useSearchFocusSync'; import useSelectedItemFocusSync from './hooks/useSelectedItemFocusSync'; import ListItemRenderer from './ListItem/ListItemRenderer'; -import type {ButtonOrCheckBoxRoles, DataDetailsType, ListItem, SelectionListProps} from './types'; +import type {DataDetailsType, InteractiveElementRoles, ListItem, SelectionListProps} from './types'; import {getListboxRole} from './utils/getListboxRole'; const ANIMATED_HIGHLIGHT_DURATION = @@ -263,8 +263,8 @@ function BaseSelectionList({ selectRow(focusedOption); }; - // Disable `Enter` shortcut if the active element is a button or checkbox - const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElementRole as ButtonOrCheckBoxRoles); + // Disable `Enter` shortcut if the active element is a button, checkbox, or switch + const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX, CONST.ROLE.SWITCH].includes(activeElementRole as InteractiveElementRoles); useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { captureOnInputs: true, diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 29dc9f607c478..7a9e915f8e223 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -12,7 +12,7 @@ import useFlattenedSections, {isItemSelected, shouldTreatItemAsDisabled} from '@ import useSearchFocusSync from '@components/SelectionList/hooks/useSearchFocusSync'; import useSelectedItemFocusSync from '@components/SelectionList/hooks/useSelectedItemFocusSync'; import ListItemRenderer from '@components/SelectionList/ListItem/ListItemRenderer'; -import type {ButtonOrCheckBoxRoles} from '@components/SelectionList/types'; +import type {InteractiveElementRoles} from '@components/SelectionList/types'; import {getListboxRole} from '@components/SelectionList/utils/getListboxRole'; import Text from '@components/Text'; import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types'; @@ -225,8 +225,8 @@ function BaseSelectionListWithSections({ [focusTextInput, scrollToIndex, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, getFocusedItem], ); - // Disable `Enter` shortcut if the active element is a button or checkbox - const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElementRole as ButtonOrCheckBoxRoles); + // Disable `Enter` shortcut if the active element is a button, checkbox, or switch + const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX, CONST.ROLE.SWITCH].includes(activeElementRole as InteractiveElementRoles); useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedItem, { captureOnInputs: true, diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 8b6b8eca5300c..64f08c700b8ca 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -284,7 +284,7 @@ type ConfirmButtonOptions = { isDisabled?: boolean; }; -type ButtonOrCheckBoxRoles = 'button' | 'checkbox'; +type InteractiveElementRoles = 'button' | 'checkbox' | 'switch'; type SelectionListHandle = { /** Scrolls to and highlights the specified items */ @@ -331,7 +331,7 @@ export type { TextInputOptions, ConfirmButtonOptions, ListItem, - ButtonOrCheckBoxRoles, + InteractiveElementRoles, SelectionListStyle, SelectionListWithSectionsHandle, SelectionListWithSectionsProps, diff --git a/src/styles/index.ts b/src/styles/index.ts index cd1c0b096ead3..9f9425085d719 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1076,10 +1076,6 @@ const staticStyles = (theme: ThemeColors) => color: theme.badgeDangerText, }, - badgeStrongText: { - color: colors.white, - }, - badgeText: { color: theme.text, fontSize: variables.fontSizeSmall, diff --git a/src/styles/theme/themes/dark-contrast.ts b/src/styles/theme/themes/dark-contrast.ts index d54754dcded59..725971457960e 100644 --- a/src/styles/theme/themes/dark-contrast.ts +++ b/src/styles/theme/themes/dark-contrast.ts @@ -10,9 +10,12 @@ const darkContrastTheme = { buttonSuccessText: colors.productLight900, bordersBold: colors.productDark700, buttonIcon: colors.productDark900, - mentionText: colors.blue600, + mentionText: colors.blue700, textLight: colors.productLight900, iconColorfulBackground: colors.yellow800, + mentionBG: colors.blue100, + ourMentionBG: colors.green100, + ourMentionText: colors.green700, } satisfies ThemeColors; export default darkContrastTheme;