diff --git a/src/components/TextInput/Adornment/TextInputIcon.tsx b/src/components/TextInput/Adornment/TextInputIcon.tsx index f0331fa2e0..ed7a216d4b 100644 --- a/src/components/TextInput/Adornment/TextInputIcon.tsx +++ b/src/components/TextInput/Adornment/TextInputIcon.tsx @@ -17,7 +17,7 @@ import { getIconColor } from './utils'; export type Props = $Omit< React.ComponentProps, - 'icon' | 'theme' | 'color' + 'icon' | 'theme' | 'color' | 'iconColor' > & { /** * @renamed Renamed from 'name' to 'icon` in v5.x @@ -131,7 +131,7 @@ const TextInputIcon = ({ icon, onPress, forceTextInputFocus, - color, + color: customColor, theme: themeOverrides, ...rest }: Props) => { @@ -151,7 +151,12 @@ const TextInputIcon = ({ const theme = useInternalTheme(themeOverrides); - const iconColor = getIconColor({ theme, disabled }); + const iconColor = getIconColor({ + theme, + disabled, + isTextInputFocused, + customColor, + }); return ( @@ -160,9 +165,7 @@ const TextInputIcon = ({ style={styles.iconButton} size={ICON_SIZE} onPress={onPressWithFocusControl} - iconColor={ - typeof color === 'function' ? color(isTextInputFocused) : iconColor - } + iconColor={iconColor} testID={testID} theme={themeOverrides} {...rest} diff --git a/src/components/TextInput/Adornment/utils.ts b/src/components/TextInput/Adornment/utils.ts index 632d22e60d..e7dae2b487 100644 --- a/src/components/TextInput/Adornment/utils.ts +++ b/src/components/TextInput/Adornment/utils.ts @@ -20,7 +20,22 @@ export function getTextColor({ theme, disabled }: BaseProps) { .string(); } -export function getIconColor({ theme, disabled }: BaseProps) { +export function getIconColor({ + theme, + isTextInputFocused, + disabled, + customColor, +}: BaseProps & { + isTextInputFocused: boolean; + customColor?: ((isTextInputFocused: boolean) => string | undefined) | string; +}) { + if (typeof customColor === 'function') { + return customColor(isTextInputFocused); + } + if (customColor) { + return customColor; + } + if (!theme.isV3) { return theme.colors.text; }