From 3aec5ca64944abd4325462924701ab8f911cd0c1 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 29 May 2025 16:33:03 +0530 Subject: [PATCH 01/22] fix: Update visual style of our text inputs for better consistency. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 5 +- src/components/MagicCodeInput.tsx | 1 + .../MoneyRequestConfirmationList.tsx | 9 ++- .../Search/SearchAutocompleteInput.tsx | 2 +- .../SearchPageHeaderInput.tsx | 2 +- .../implementation/index.native.tsx | 41 +++++++++--- .../BaseTextInput/implementation/index.tsx | 39 +++++++++-- .../TextInput/BaseTextInput/types.ts | 3 + .../TextInput/TextInputClearButton/index.tsx | 2 +- .../TextInput/TextInputLabel/index.native.tsx | 15 +++-- .../TextInput/TextInputLabel/index.tsx | 2 +- src/components/TextInput/index.native.tsx | 1 + src/components/TextInput/styleConst.ts | 2 +- src/styles/index.ts | 65 +++++++++++++------ src/styles/utils/index.ts | 6 +- src/styles/variables.ts | 2 +- 16 files changed, 142 insertions(+), 55 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 256d95ba8419..501a92a0bcdd 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -1,6 +1,7 @@ import React from 'react'; import type {ForwardedRef} from 'react'; import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {TextSelection} from './Composer/types'; import TextInput from './TextInput'; @@ -58,6 +59,7 @@ function AmountTextInput( }: AmountTextInputProps, ref: ForwardedRef, ) { + const styles = useThemeStyles(); return ( diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index e989e515c62b..9f1b6811a1f8 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -437,6 +437,7 @@ function MagicCodeInput( StyleUtils.getHeightOfMagicCodeInput(), hasError || errorText ? styles.borderColorDanger : {}, focusedIndex === index ? styles.borderColorFocus : {}, + styles.pt0, ]} > {decomposeString(value, maxLength).at(index) ?? ''} diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index be8497884831..c1720a677c8e 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -649,9 +649,9 @@ function MoneyRequestConfirmationList({ hideFocusedState={false} hideCurrencySymbol formatAmountOnBlur - prefixContainerStyle={[styles.pv0]} - inputStyle={[styles.optionRowAmountInput]} - containerStyle={[styles.textInputContainer]} + prefixContainerStyle={[styles.pv0, styles.h100]} + inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]} + containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} onFormatAmount={convertToDisplayStringWithoutCurrency} onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))} @@ -670,8 +670,11 @@ function MoneyRequestConfirmationList({ selectedParticipants, styles.flexWrap, styles.pl2, + styles.pr1, + styles.h100, styles.textLabel, styles.pv0, + styles.lineHeightUndefined, styles.optionRowAmountInput, styles.textInputContainer, styles.ml3, diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index 17fbea76e3f8..83e4a9996dd6 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -207,7 +207,7 @@ function SearchAutocompleteInput( onSubmitEditing={onSubmit} shouldUseDisabledStyles={false} textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]} - inputStyle={[inputWidth, {lineHeight: undefined}]} + inputStyle={[inputWidth]} placeholderTextColor={theme.textSupporting} onFocus={() => { onFocus?.(); diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 16dcb0177e9d..fb6be633638a 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -271,7 +271,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo }} autoFocus={false} onFocus={onFocus} - wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}} + wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.border}} wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} rightComponent={inputRightComponent} autocompleteListRef={listRef} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index e67de89eb0f2..c97cd5981855 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -3,7 +3,7 @@ import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native'; import {ActivityIndicator, StyleSheet, View} from 'react-native'; -import {useSharedValue, withSpring} from 'react-native-reanimated'; +import {Easing, useSharedValue, withTiming} from 'react-native-reanimated'; import Checkbox from '@components/Checkbox'; import FormHelpMessage from '@components/FormHelpMessage'; import Icon from '@components/Icon'; @@ -46,6 +46,7 @@ function BaseTextInput( touchableInputWrapperStyle, containerStyles, inputStyle, + shouldUseFullInputHeight = false, forceActiveLabel = false, disableKeyboard = false, autoGrow = false, @@ -115,8 +116,18 @@ function BaseTextInput( const animateLabel = useCallback( (translateY: number, scale: number) => { - labelScale.set(withSpring(scale, {overshootClamping: false})); - labelTranslateY.set(withSpring(translateY, {overshootClamping: false})); + labelScale.set( + withTiming(scale, { + duration: 200, + easing: Easing.inOut(Easing.ease), + }), + ); + labelTranslateY.set( + withTiming(translateY, { + duration: 200, + easing: Easing.inOut(Easing.ease), + }), + ); }, [labelScale, labelTranslateY], ); @@ -177,9 +188,11 @@ function BaseTextInput( const heightToFitEmojis = 1; setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth)); - setHeight((prevHeight: number) => (!multiline ? layout.height + heightToFitEmojis : prevHeight)); + setHeight((prevHeight: number) => + !multiline ? layout.height + heightToFitEmojis - (styles.textInputContainer.padding + styles.textInputContainer.borderWidth * 2) : prevHeight, + ); }, - [autoGrowHeight, multiline], + [autoGrowHeight, multiline, styles.textInputContainer], ); // The ref is needed when the component is uncontrolled and we don't have a value prop @@ -239,6 +252,7 @@ function BaseTextInput( setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden); }, []); + const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; const hasLabel = !!label?.length; const isReadOnly = inputProps.readOnly ?? inputProps.disabled; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string @@ -248,19 +262,22 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - !!contentWidth && StyleUtils.getWidthStyle(textInputWidth), + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2), autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, + inputProps.disabled && styles.textInputDisabledContainer, + !hasLabel && styles.pt0, + shouldAddPaddingBottom && styles.pb1, ]); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); // Height fix is needed only for Text single line inputs - const shouldApplyHeight = !isMultiline && !isMarkdownEnabled; + const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled; return ( <> @@ -276,7 +293,11 @@ function BaseTextInput( style={[ autoGrowHeight && !isAutoGrowHeightMarkdown && - styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), + styles.autoGrowHeightInputContainer( + textInputHeight + (shouldAddPaddingBottom ? styles.textInputContainer.padding : 0), + variables.componentSizeLarge, + typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, + ), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, @@ -294,7 +315,7 @@ function BaseTextInput( <> {/* Adding this background to the label only for multiline text input, to prevent text overlapping with label when scrolling */} - {isMultiline && } + {isMultiline && } )} {!!inputProps.secureTextEntry && ( diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index b2b859118954..09610b5d78f9 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -3,7 +3,7 @@ import type {ForwardedRef, MutableRefObject} from 'react'; import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native'; import {ActivityIndicator, StyleSheet, View} from 'react-native'; -import {useSharedValue, withSpring} from 'react-native-reanimated'; +import {Easing, useSharedValue, withTiming} from 'react-native-reanimated'; import Checkbox from '@components/Checkbox'; import FormHelpMessage from '@components/FormHelpMessage'; import Icon from '@components/Icon'; @@ -130,8 +130,18 @@ function BaseTextInput( const animateLabel = useCallback( (translateY: number, scale: number) => { - labelScale.set(withSpring(scale, {overshootClamping: false})); - labelTranslateY.set(withSpring(translateY, {overshootClamping: false})); + labelScale.set( + withTiming(scale, { + duration: 200, + easing: Easing.inOut(Easing.ease), + }), + ); + labelTranslateY.set( + withTiming(translateY, { + duration: 200, + easing: Easing.inOut(Easing.ease), + }), + ); }, [labelScale, labelTranslateY], ); @@ -247,6 +257,7 @@ function BaseTextInput( setPasswordHidden((prevPasswordHidden: boolean | undefined) => !prevPasswordHidden); }, []); + const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; const hasLabel = !!label?.length; const isReadOnly = inputProps.readOnly ?? inputProps.disabled; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string @@ -256,11 +267,13 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), + (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, + inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer, + !hasLabel && styles.pt0, ]); const isMultiline = multiline || autoGrowHeight; @@ -288,7 +301,11 @@ function BaseTextInput( style={[ autoGrowHeight && !isAutoGrowHeightMarkdown && - styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), + styles.autoGrowHeightInputContainer( + textInputHeight + (shouldAddPaddingBottom ? styles.textInputContainer.padding : 0), + variables.componentSizeLarge, + typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, + ), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, @@ -306,7 +323,15 @@ function BaseTextInput( <> {/* Adding this background to the label only for multiline text input, to prevent text overlapping with label when scrolling */} - {isMultiline && } + {isMultiline && ( + + )} )} {!!inputProps.secureTextEntry && ( diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 674144bec74a..21b82ffd7e2a 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -177,6 +177,9 @@ type CustomBaseTextInputProps = { /** Callback when the input is cleared using the clear button */ onClearInput?: () => void; + + /** Whether the input should be enforced to take full height of conatiner. Default is `false` */ + shouldUseFullInputHeight?: boolean; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index 106ae4439b8d..68fda83713f2 100644 --- a/src/components/TextInput/TextInputClearButton/index.tsx +++ b/src/components/TextInput/TextInputClearButton/index.tsx @@ -19,7 +19,7 @@ function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { return ( { diff --git a/src/components/TextInput/TextInputLabel/index.native.tsx b/src/components/TextInput/TextInputLabel/index.native.tsx index f332ba6ffa4d..c3fa2b876e12 100644 --- a/src/components/TextInput/TextInputLabel/index.native.tsx +++ b/src/components/TextInput/TextInputLabel/index.native.tsx @@ -7,14 +7,17 @@ function TextInputLabel({label, labelScale, labelTranslateY}: TextInputLabelProp const styles = useThemeStyles(); const animatedStyle = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale)); + const animatedStyleForText = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale, true)); return ( - - {label} - + + + {label} + + ); } diff --git a/src/components/TextInput/TextInputLabel/index.tsx b/src/components/TextInput/TextInputLabel/index.tsx index 110193bbc653..dd645476526e 100644 --- a/src/components/TextInput/TextInputLabel/index.tsx +++ b/src/components/TextInput/TextInputLabel/index.tsx @@ -26,7 +26,7 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale}: // eslint-disable-next-line react-compiler/react-compiler ref={textRef(labelRef)} role={CONST.ROLE.PRESENTATION} - style={[styles.textInputLabel, animatedStyle, styles.pointerEventsNone]} + style={[styles.textInputLabelContainer, styles.textInputLabel, animatedStyle, styles.pointerEventsNone]} > {label} diff --git a/src/components/TextInput/index.native.tsx b/src/components/TextInput/index.native.tsx index acc40295d575..2da80b13859c 100644 --- a/src/components/TextInput/index.native.tsx +++ b/src/components/TextInput/index.native.tsx @@ -35,6 +35,7 @@ function TextInput(props: BaseTextInputProps, ref: ForwardedRef ); } diff --git a/src/components/TextInput/styleConst.ts b/src/components/TextInput/styleConst.ts index 7d2f3021e3be..f6c3fc9b48b3 100644 --- a/src/components/TextInput/styleConst.ts +++ b/src/components/TextInput/styleConst.ts @@ -1,6 +1,6 @@ import variables from '@styles/variables'; -const ACTIVE_LABEL_TRANSLATE_Y = 4; +const ACTIVE_LABEL_TRANSLATE_Y = 7; const ACTIVE_LABEL_SCALE = 0.8668; const INACTIVE_LABEL_TRANSLATE_Y = variables.INACTIVE_LABEL_TRANSLATE_Y; diff --git a/src/styles/index.ts b/src/styles/index.ts index 546276a20006..954234b3f19a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -405,12 +405,19 @@ const styles = (theme: ThemeColors) => verticalAlignTop: { verticalAlign: 'top', }, + + lineHeightUndefined: { + lineHeight: undefined, + }, + lineHeightLarge: { lineHeight: variables.lineHeightLarge, }, + lineHeightXLarge: { lineHeight: variables.lineHeightXLarge, }, + label: { fontSize: variables.fontSizeLabel, lineHeight: variables.lineHeightLarge, @@ -1087,10 +1094,9 @@ const styles = (theme: ThemeColors) => borderColor: theme.danger, }, - textInputDisabled: { + textInputDisabledContainer: { // Adding disabled color theme to indicate user that the field is not editable. backgroundColor: theme.highlightBG, - borderBottomWidth: 2, borderColor: theme.borderLighter, // Adding browser specific style to bring consistency between Safari and other platforms. // Applying the Webkit styles only to browsers as it is not available in native. @@ -1103,6 +1109,18 @@ const styles = (theme: ThemeColors) => color: theme.textSupporting, }, + textInputDisabled: { + // Adding browser specific style to bring consistency between Safari and other platforms. + // Applying the Webkit styles only to browsers as it is not available in native. + ...(getBrowser() + ? { + WebkitTextFillColor: theme.textSupporting, + WebkitOpacity: 1, + } + : {}), + color: theme.textSupporting, + }, + uploadFileView: (isSmallScreenWidth: boolean) => ({ borderRadius: variables.componentBorderRadiusLarge, @@ -1293,7 +1311,10 @@ const styles = (theme: ThemeColors) => height: '100%', backgroundColor: 'transparent', overflow: 'hidden', - borderBottomWidth: 2, + borderWidth: 1, + padding: 8, + paddingBottom: 0, + borderRadius: 8, borderColor: theme.border, }, @@ -1307,18 +1328,22 @@ const styles = (theme: ThemeColors) => textAlign: 'right', }, - textInputLabel: { + textInputLabelContainer: { position: 'absolute', - left: 0, + left: 8, + paddingRight: 16, top: 0, - fontSize: variables.fontSizeNormal, - color: theme.textSupporting, - ...FontUtils.fontFamily.platform.EXP_NEUE, width: '100%', zIndex: 1, transformOrigin: 'left center', }, + textInputLabel: { + fontSize: variables.fontSizeNormal, + color: theme.textSupporting, + ...FontUtils.fontFamily.platform.EXP_NEUE, + }, + textInputLabelBackground: { position: 'absolute', top: 0, @@ -1327,9 +1352,15 @@ const styles = (theme: ThemeColors) => backgroundColor: theme.componentBG, }, - textInputLabelTransformation: (translateY: SharedValue, scale: SharedValue) => { + textInputLabelTransformation: (translateY: SharedValue, scale: SharedValue, isForTextComponent?: boolean) => { 'worklet'; + if (isForTextComponent) { + return { + fontSize: interpolate(scale.get(), [0, ACTIVE_LABEL_SCALE], [0, variables.fontSizeLabel]), + } satisfies TextStyle; + } + return { transform: [{translateY: translateY.get()}], fontSize: interpolate(scale.get(), [0, ACTIVE_LABEL_SCALE], [0, variables.fontSizeLabel]), @@ -1341,7 +1372,7 @@ const styles = (theme: ThemeColors) => fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightXLarge, color: theme.text, - paddingTop: 23, + paddingTop: 15, paddingBottom: 8, paddingLeft: 0, borderWidth: 0, @@ -1353,7 +1384,7 @@ const styles = (theme: ThemeColors) => textInputMultilineContainer: { height: '100%', - paddingTop: 23, + paddingTop: 15, }, textInputAndIconContainer: (isMarkdownEnabled: boolean) => { @@ -1371,7 +1402,7 @@ const styles = (theme: ThemeColors) => textInputIconContainer: { paddingHorizontal: 11, - justifyContent: 'center', + marginTop: 8, }, textInputLeftIconContainer: { @@ -1404,11 +1435,10 @@ const styles = (theme: ThemeColors) => position: 'absolute', left: 0, top: 0, - height: variables.inputHeight, display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 23, + paddingTop: 15, paddingBottom: 8, }, @@ -1416,11 +1446,10 @@ const styles = (theme: ThemeColors) => position: 'absolute', right: 0, top: 0, - height: variables.inputHeight, display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 23, + paddingTop: 15, paddingBottom: 8, }, @@ -3336,7 +3365,7 @@ const styles = (theme: ThemeColors) => magicCodeInputContainer: { flexDirection: 'row', justifyContent: 'space-between', - minHeight: variables.inputHeight, + height: variables.inputHeight, }, magicCodeInput: { @@ -3821,13 +3850,11 @@ const styles = (theme: ThemeColors) => searchAutocompleteInputResults: { backgroundColor: theme.sidebarHover, borderWidth: 1, - borderColor: theme.sidebarHover, }, searchAutocompleteInputResultsFocused: { borderWidth: 1, borderColor: theme.success, - backgroundColor: theme.appBG, }, searchTableHeaderActive: { diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index a0040935b576..d7e69d3651a0 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1315,7 +1315,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ ...styles.overflowHidden, // maxHeight is not of the input only but the of the whole input container // which also includes the top padding and bottom border - height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth, + height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2, }; }, @@ -1336,7 +1336,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ getMarkdownMaxHeight: (maxAutoGrowHeight: number | undefined): TextStyle => { // maxHeight is not of the input only but the of the whole input container // which also includes the top padding and bottom border - return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth} : {}; + return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {}; }, /** @@ -1519,7 +1519,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Return the height of magic code input container */ - getHeightOfMagicCodeInput: (): ViewStyle => ({height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth}), + getHeightOfMagicCodeInput: (): ViewStyle => ({height: styles.magicCodeInputContainer.height - styles.textInputContainer.borderWidth * 2}), /** * Generate fill color of an icon based on its state. diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 3a0495d37c7b..f2388d1353b1 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -123,7 +123,7 @@ export default { formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), alternateTextHeight: getValueUsingPixelRatio(20, 24), - INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21), + INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(17, 22), sliderBarHeight: 8, sliderKnobSize: 26, checkboxLabelActiveOpacity: 0.7, From fa403559f8387e2304ea08623924928035c71424 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 29 May 2025 16:45:16 +0530 Subject: [PATCH 02/22] minor fixes. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.tsx | 1 + src/styles/index.ts | 9 --------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 09610b5d78f9..e9b7bb7d2b13 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -274,6 +274,7 @@ function BaseTextInput( isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer, !hasLabel && styles.pt0, + shouldAddPaddingBottom && styles.pb1, ]); const isMultiline = multiline || autoGrowHeight; diff --git a/src/styles/index.ts b/src/styles/index.ts index 954234b3f19a..4958e8595f21 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1098,15 +1098,6 @@ const styles = (theme: ThemeColors) => // Adding disabled color theme to indicate user that the field is not editable. backgroundColor: theme.highlightBG, borderColor: theme.borderLighter, - // Adding browser specific style to bring consistency between Safari and other platforms. - // Applying the Webkit styles only to browsers as it is not available in native. - ...(getBrowser() - ? { - WebkitTextFillColor: theme.textSupporting, - WebkitOpacity: 1, - } - : {}), - color: theme.textSupporting, }, textInputDisabled: { From b037e9ea0bdb2219f611a9d52ec84f24e00449f4 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 30 May 2025 04:11:02 +0530 Subject: [PATCH 03/22] fix: regressions. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 5 ++-- .../Search/SearchAutocompleteInput.tsx | 2 +- .../implementation/index.native.tsx | 27 ++++++++++++------- .../BaseTextInput/implementation/index.tsx | 17 +++++++++--- .../TextInput/BaseTextInput/types.ts | 3 +++ .../TextInput/TextInputClearButton/index.tsx | 6 +++-- .../BaseOnboardingPrivateDomain.tsx | 2 +- src/styles/index.ts | 5 ---- src/styles/utils/index.ts | 12 +++++++++ 9 files changed, 54 insertions(+), 25 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 501a92a0bcdd..e5b107c053a5 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type {ForwardedRef} from 'react'; import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native'; -import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {TextSelection} from './Composer/types'; import TextInput from './TextInput'; @@ -59,7 +58,6 @@ function AmountTextInput( }: AmountTextInputProps, ref: ForwardedRef, ) { - const styles = useThemeStyles(); return ( { onFocus?.(); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index c97cd5981855..c4c558efa53d 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -43,6 +43,7 @@ function BaseTextInput( iconLeft = null, icon = null, textInputContainerStyles, + shouldApplyPaddingToContainer = true, touchableInputWrapperStyle, containerStyles, inputStyle, @@ -111,6 +112,7 @@ function BaseTextInput( const labelTranslateY = useSharedValue(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y); const input = useRef(null); const isLabelActive = useRef(initialActiveLabel); + const hasLabel = !!label?.length; useHtmlPaste(input, undefined, isMarkdownEnabled); @@ -188,11 +190,11 @@ function BaseTextInput( const heightToFitEmojis = 1; setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth)); - setHeight((prevHeight: number) => - !multiline ? layout.height + heightToFitEmojis - (styles.textInputContainer.padding + styles.textInputContainer.borderWidth * 2) : prevHeight, - ); + const borderWidth = styles.textInputContainer.borderWidth * 2; + const labelPadding = hasLabel ? styles.textInputContainer.padding : 0; + setHeight((prevHeight: number) => (!multiline ? layout.height + heightToFitEmojis - (labelPadding + borderWidth) : prevHeight)); }, - [autoGrowHeight, multiline, styles.textInputContainer], + [autoGrowHeight, multiline, styles.textInputContainer, hasLabel], ); // The ref is needed when the component is uncontrolled and we don't have a value prop @@ -253,7 +255,6 @@ function BaseTextInput( }, []); const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; - const hasLabel = !!label?.length; const isReadOnly = inputProps.readOnly ?? inputProps.disabled; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -262,7 +263,8 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2), + !shouldApplyPaddingToContainer && styles.p0, + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)), autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, @@ -421,6 +423,7 @@ function BaseTextInput( )} {((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && ( { setValue(''); onClearInput?.(); @@ -431,12 +434,18 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { event.preventDefault(); @@ -450,7 +459,7 @@ function BaseTextInput( )} {!inputProps.secureTextEntry && !!icon && ( - + = StyleSheet.flatten([ styles.textInputContainer, + !shouldApplyPaddingToContainer && styles.p0, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2), + (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, @@ -449,6 +451,7 @@ function BaseTextInput( }} > { setValue(''); onClearInput?.(); @@ -460,12 +463,18 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { e.preventDefault(); @@ -479,7 +488,7 @@ function BaseTextInput( )} {!inputProps.secureTextEntry && !!icon && ( - + ; + /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input */ + shouldApplyPaddingToContainer?: boolean; + /** Customizes the touchable wrapper of the TextInput component */ touchableInputWrapperStyle?: StyleProp; diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index 68fda83713f2..537d832becdf 100644 --- a/src/components/TextInput/TextInputClearButton/index.tsx +++ b/src/components/TextInput/TextInputClearButton/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type {ViewStyle} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithoutFeedback} from '@components/Pressable'; @@ -10,16 +11,17 @@ import CONST from '@src/CONST'; type TextInputClearButtonProps = { onPressButton: () => void; + containerStyles?: ViewStyle[]; }; -function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { +function TextInputClearButton({onPressButton, containerStyles}: TextInputClearButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); return ( { diff --git a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx index be15bf44326a..797f89df8ab1 100644 --- a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx +++ b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx @@ -73,7 +73,7 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard {translate('onboarding.peopleYouMayKnow')} - {translate('onboarding.workspaceYouMayJoin', {domain, email})} + {translate('onboarding.workspaceYouMayJoin', {domain, email})} { diff --git a/src/styles/index.ts b/src/styles/index.ts index 4958e8595f21..69f0ea57167f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1391,11 +1391,6 @@ const styles = (theme: ThemeColors) => textInputDesktop: addOutlineWidth(theme, {}, 0), - textInputIconContainer: { - paddingHorizontal: 11, - marginTop: 8, - }, - textInputLeftIconContainer: { justifyContent: 'center', paddingRight: 8, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index d7e69d3651a0..8904466ac739 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1339,6 +1339,18 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {}; }, + /** + * Computes styles for the text input icon container. + * Applies horizontal padding if requested, and sets the top margin based on the presence of a label. + */ + getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true) => { + const paddingStyle = includePadding ? {paddingHorizontal: 11} : {}; + return { + ...paddingStyle, + marginTop: hasLabel ? 8 : 16, + }; + }, + /** * Return the style from an avatar size constant */ From 63578d8e0feca153937b8041c7960509885a8433 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 30 May 2025 05:55:45 +0530 Subject: [PATCH 04/22] fix: reports page search input focused state styles. Signed-off-by: krishna2323 --- src/styles/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index 97a4e931ec87..50ea10cbb3f3 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3836,11 +3836,13 @@ const styles = (theme: ThemeColors) => searchAutocompleteInputResults: { backgroundColor: theme.sidebarHover, borderWidth: 1, + borderColor: theme.appBG, }, searchAutocompleteInputResultsFocused: { borderWidth: 1, borderColor: theme.success, + backgroundColor: theme.appBG, }, searchTableHeaderActive: { From ead787285d26ed122c5c5bda95f1e57ca19be441 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 30 May 2025 06:02:03 +0530 Subject: [PATCH 05/22] fix search header input. Signed-off-by: krishna2323 --- .../Search/SearchPageHeader/SearchPageHeaderInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index fb6be633638a..16dcb0177e9d 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -271,7 +271,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo }} autoFocus={false} onFocus={onFocus} - wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.border}} + wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}} wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} rightComponent={inputRightComponent} autocompleteListRef={listRef} From bee3cbef2cc9d0f1f2b5e7d2150c36a9a0456be8 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sat, 31 May 2025 01:26:02 +0530 Subject: [PATCH 06/22] fix: emoji picker, reports page input & eslint. Signed-off-by: krishna2323 --- src/components/EmojiPicker/EmojiPickerMenu/index.tsx | 2 +- src/components/TextInput/TextInputClearButton/index.tsx | 1 - src/styles/index.ts | 4 +--- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index e79863c7a527..971d846cf1f7 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -320,7 +320,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r arePointerEventsDisabled ? styles.pointerEventsNone : styles.pointerEventsAuto, ]} > - + ; onPressButton: () => void; - containerStyles?: ViewStyle[]; }; function TextInputClearButton({style, onPressButton}: TextInputClearButtonProps) { diff --git a/src/styles/index.ts b/src/styles/index.ts index a150fcf40f19..4a694d8c46d8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3839,15 +3839,13 @@ const styles = (theme: ThemeColors) => }, searchAutocompleteInputResults: { - backgroundColor: theme.sidebarHover, borderWidth: 1, - borderColor: theme.appBG, + borderColor: theme.border, }, searchAutocompleteInputResultsFocused: { borderWidth: 1, borderColor: theme.success, - backgroundColor: theme.appBG, }, searchTableHeaderActive: { From f4a8353115ddd37e29b0bcad16c500c0e22f91bd Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sat, 31 May 2025 01:29:43 +0530 Subject: [PATCH 07/22] fix eslint Namespace imports. Signed-off-by: krishna2323 --- .../EmojiPicker/EmojiPickerMenu/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index 971d846cf1f7..4cf116d6bbee 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -16,18 +16,19 @@ import useSingleExecution from '@hooks/useSingleExecution'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import * as Browser from '@libs/Browser'; +import {isMobile} from '@libs/Browser'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; -import * as EmojiUtils from '@libs/EmojiUtils'; +import {getRemovedSkinToneEmoji} from '@libs/EmojiUtils'; +import type {EmojiPickerListItem} from '@libs/EmojiUtils'; import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition'; -import * as ReportUtils from '@libs/ReportUtils'; +import {shouldAutoFocusOnKeyPress} from '@libs/ReportUtils'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import BaseEmojiPickerMenu from './BaseEmojiPickerMenu'; import type EmojiPickerMenuProps from './types'; import useEmojiPickerMenu from './useEmojiPickerMenu'; -const throttleTime = Browser.isMobile() ? 200 : 50; +const throttleTime = isMobile() ? 200 : 50; function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, ref: ForwardedRef) { const styles = useThemeStyles(); @@ -148,7 +149,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r } // We allow typing in the search box if any key is pressed apart from Arrow keys. - if (searchInputRef.current && !isTextInputFocused(searchInputRef) && ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) { + if (searchInputRef.current && !isTextInputFocused(searchInputRef) && shouldAutoFocusOnKeyPress(keyBoardEvent)) { searchInputRef.current.focus(); } }, @@ -247,7 +248,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r * so that the sticky headers function properly. * */ - const renderItem: ListRenderItem = useCallback( + const renderItem: ListRenderItem = useCallback( ({item, index, target}) => { const code = item.code; const types = 'types' in item ? item.types : undefined; @@ -267,8 +268,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r const emojiCode = typeof preferredSkinTone === 'number' && types?.at(preferredSkinTone) && preferredSkinTone !== -1 ? types.at(preferredSkinTone) : code; const isEmojiFocused = index === focusedIndex && isUsingKeyboardMovement; - const shouldEmojiBeHighlighted = - (index === focusedIndex && highlightEmoji) || (!!activeEmoji && EmojiUtils.getRemovedSkinToneEmoji(emojiCode) === EmojiUtils.getRemovedSkinToneEmoji(activeEmoji)); + const shouldEmojiBeHighlighted = (index === focusedIndex && highlightEmoji) || (!!activeEmoji && getRemovedSkinToneEmoji(emojiCode) === getRemovedSkinToneEmoji(activeEmoji)); const shouldFirstEmojiBeHighlighted = index === 0 && highlightFirstEmoji; return ( From 359679bdb6d1a54cc49d5403ff1eeee7b1e8290b Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 1 Jun 2025 00:32:19 +0530 Subject: [PATCH 08/22] minor update. Signed-off-by: krishna2323 --- src/components/EmojiPicker/EmojiPickerMenu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx index 4cf116d6bbee..9ac6e8e32937 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx @@ -320,7 +320,7 @@ function EmojiPickerMenu({onEmojiSelected, activeEmoji}: EmojiPickerMenuProps, r arePointerEventsDisabled ? styles.pointerEventsNone : styles.pointerEventsAuto, ]} > - + Date: Sun, 8 Jun 2025 15:21:05 +0530 Subject: [PATCH 09/22] fix split input padding. Signed-off-by: krishna2323 --- src/components/SelectionList/SplitListItem.tsx | 6 +++--- .../USD/BusinessInfo/subSteps/IncorporationCode.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionList/SplitListItem.tsx b/src/components/SelectionList/SplitListItem.tsx index 6e4aedd6b6f6..0a402b3e31ac 100644 --- a/src/components/SelectionList/SplitListItem.tsx +++ b/src/components/SelectionList/SplitListItem.tsx @@ -135,9 +135,9 @@ function SplitListItem({ submitBehavior="blurAndSubmit" formatAmountOnBlur onAmountChange={onSplitExpenseAmountChange} - prefixContainerStyle={[styles.pv0]} - inputStyle={[styles.optionRowAmountInput]} - containerStyle={[styles.textInputContainer]} + prefixContainerStyle={[styles.pv0, styles.h100]} + inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]} + containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} maxLength={formattedOriginalAmount.length} contentWidth={formattedOriginalAmount.length * 8} diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx index fd2a0f53e0bb..f45da0cb7864 100644 --- a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx +++ b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx @@ -49,7 +49,7 @@ function IncorporationCode({onNext, isEditing}: SubStepProps) { submitButtonStyles={[styles.ph5, styles.mb0]} shouldHideFixErrorsAlert > - {translate('companyStep.industryClassification')} + {translate('companyStep.industryClassification')} Date: Sun, 8 Jun 2025 16:24:27 +0530 Subject: [PATCH 10/22] fix: no vertical padding on DebugReportActionCreatePage. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.tsx | 2 +- src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx | 3 ++- .../DebugTransactionViolationCreatePage.tsx | 3 ++- src/pages/settings/AboutPage/ConsolePage.tsx | 1 + 5 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index b70ee776271b..f73e4320445a 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -262,6 +262,7 @@ function BaseTextInput( const placeholderValue = !!prefixCharacter || !!suffixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined; const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, + !hasLabel && styles.pt0, textInputContainerStyles, !shouldApplyPaddingToContainer && styles.p0, !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)), @@ -271,7 +272,6 @@ function BaseTextInput( autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && styles.textInputDisabledContainer, - !hasLabel && styles.pt0, shouldAddPaddingBottom && styles.pb1, ]); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index fd41c5e1de1f..59af99bf2e22 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -268,6 +268,7 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, !shouldApplyPaddingToContainer && styles.p0, + !hasLabel && styles.pt0, textInputContainerStyles, (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)), !hideFocusedState && isFocused && styles.borderColorFocus, @@ -275,7 +276,6 @@ function BaseTextInput( autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer, - !hasLabel && styles.pt0, shouldAddPaddingBottom && styles.pb1, ]); const isMultiline = multiline || autoGrowHeight; diff --git a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx index 1162146b8f4d..ed8ceb2f11a4 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx +++ b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx @@ -98,7 +98,8 @@ function DebugReportActionCreatePage({ multiline value={draftReportAction} onChangeText={editJSON} - textInputContainerStyles={[styles.border, styles.borderBottom, styles.p5]} + // We need to explicitly add styles.pt5 and styles.pb5 to override the default top and bottom padding of the text input + textInputContainerStyles={[styles.border, styles.borderBottom, styles.ph5, styles.pt5, styles.pb5]} /> diff --git a/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx b/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx index 93c6d26597dc..3d3ac18a2103 100644 --- a/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx +++ b/src/pages/Debug/TransactionViolation/DebugTransactionViolationCreatePage.tsx @@ -115,7 +115,8 @@ function DebugTransactionViolationCreatePage({ multiline value={draftTransactionViolation} onChangeText={editJSON} - textInputContainerStyles={[styles.border, styles.borderBottom, styles.p5]} + // We need to explicitly add styles.pt5 and styles.pb5 to override the default top and bottom padding of the text input + textInputContainerStyles={[styles.border, styles.borderBottom, styles.ph5, styles.pt5, styles.pb5]} /> {translate('debug.hint')} diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx index a4e842c9f30d..bdb8c2c02ed5 100644 --- a/src/pages/settings/AboutPage/ConsolePage.tsx +++ b/src/pages/settings/AboutPage/ConsolePage.tsx @@ -28,6 +28,7 @@ import localFileDownload from '@libs/localFileDownload'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; From 5f79ab4433f66ffc04fa953c27e118c09a092e5a Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 8 Jun 2025 23:24:01 +0530 Subject: [PATCH 11/22] fix: Multiline inputs in debug page do not have bottom padding. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index f73e4320445a..60c48df42897 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -254,7 +254,7 @@ function BaseTextInput( setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden); }, []); - const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; + const shouldAddPaddingBottom = isMultiline || (autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge); const isReadOnly = inputProps.readOnly ?? inputProps.disabled; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 59af99bf2e22..0c584a25920c 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -257,8 +257,9 @@ function BaseTextInput( const togglePasswordVisibility = useCallback(() => { setPasswordHidden((prevPasswordHidden: boolean | undefined) => !prevPasswordHidden); }, []); + const isMultiline = multiline || autoGrowHeight; - const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; + const shouldAddPaddingBottom = isMultiline || (autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge); const hasLabel = !!label?.length; const isReadOnly = inputProps.readOnly ?? inputProps.disabled; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string @@ -278,7 +279,6 @@ function BaseTextInput( inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer, shouldAddPaddingBottom && styles.pb1, ]); - const isMultiline = multiline || autoGrowHeight; const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); From 377cf85081197aa8a9bd464f9b8c9d01d7525286 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 8 Jun 2025 23:29:17 +0530 Subject: [PATCH 12/22] fix ESLint. Signed-off-by: krishna2323 --- .../ReportAction/DebugReportActionCreatePage.tsx | 12 ++++++------ .../USD/BusinessInfo/subSteps/IncorporationCode.tsx | 2 +- src/pages/settings/AboutPage/ConsolePage.tsx | 1 - 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx index ed8ceb2f11a4..b70df84f6eb8 100644 --- a/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx +++ b/src/pages/Debug/ReportAction/DebugReportActionCreatePage.tsx @@ -12,11 +12,11 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import DateUtils from '@libs/DateUtils'; import DebugUtils from '@libs/DebugUtils'; -import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {DebugParamList} from '@libs/Navigation/types'; -import * as NumberUtils from '@libs/NumberUtils'; +import {rand64} from '@libs/NumberUtils'; import ReportActionItem from '@pages/home/report/ReportActionItem'; import Debug from '@userActions/Debug'; import CONST from '@src/CONST'; @@ -32,7 +32,7 @@ const getInitialReportAction = (reportID: string, session: OnyxEntry, p DebugUtils.stringifyJSON({ actionName: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT, reportID, - reportActionID: NumberUtils.rand64(), + reportActionID: rand64(), created: DateUtils.getDBTime(), actorAccountID: session?.accountID, avatar: (session?.accountID && personalDetailsList?.[session.accountID]?.avatar) ?? '', @@ -46,8 +46,8 @@ function DebugReportActionCreatePage({ }: DebugReportActionCreatePageProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [session] = useOnyx(ONYXKEYS.SESSION); - const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false}); + const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}); const [draftReportAction, setDraftReportAction] = useState(() => getInitialReportAction(reportID, session, personalDetailsList)); const [error, setError] = useState(); @@ -78,7 +78,7 @@ function DebugReportActionCreatePage({ {({safeAreaPaddingBottomStyle}) => ( diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx index f45da0cb7864..7416d3ab9059 100644 --- a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx +++ b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx @@ -19,7 +19,7 @@ const STEP_FIELDS = [COMPANY_INCORPORATION_CODE_KEY]; function IncorporationCode({onNext, isEditing}: SubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false}); const handleSubmit = useReimbursementAccountStepFormSubmit({ fieldIds: STEP_FIELDS, diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx index bdb8c2c02ed5..a4e842c9f30d 100644 --- a/src/pages/settings/AboutPage/ConsolePage.tsx +++ b/src/pages/settings/AboutPage/ConsolePage.tsx @@ -28,7 +28,6 @@ import localFileDownload from '@libs/localFileDownload'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@navigation/types'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; From ad0eb14c084ebe32ef62618ac26b164bb6ff53e4 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 9 Jun 2025 07:48:59 +0530 Subject: [PATCH 13/22] fix split input padding. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 1 - src/components/MoneyRequestAmountInput.tsx | 5 +++++ src/components/MoneyRequestConfirmationList.tsx | 1 + src/components/SelectionList/SplitListItem.tsx | 1 + src/components/TextInput/BaseTextInput/types.ts | 2 +- src/components/TextInputWithCurrencySymbol/types.ts | 3 +++ 6 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 0f9f9b576e08..2b673107e313 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -66,7 +66,6 @@ function AmountTextInput( disableKeyboard={disableKeyboard} inputStyle={style} textInputContainerStyles={containerStyle} - shouldApplyPaddingToContainer={false} onChangeText={onChangeAmount} ref={ref} value={formattedAmount} diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 234b3a21d336..ab726c5cf1d0 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -92,6 +92,9 @@ type MoneyRequestAmountInputProps = { /** The width of inner content */ contentWidth?: number; + /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input in money request flow */ + shouldApplyPaddingToContainer?: boolean; + /** The testID of the input. Used to locate this view in end-to-end tests. */ testID?: string; } & Pick; @@ -133,6 +136,7 @@ function MoneyRequestAmountInput( contentWidth, testID, submitBehavior, + shouldApplyPaddingToContainer = false, ...props }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, @@ -345,6 +349,7 @@ function MoneyRequestAmountInput( contentWidth={contentWidth} testID={testID} submitBehavior={submitBehavior} + shouldApplyPaddingToContainer={shouldApplyPaddingToContainer} /> ); } diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index f25e7d08d989..7d4064efe957 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -657,6 +657,7 @@ function MoneyRequestConfirmationList({ onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))} maxLength={formattedTotalAmount.length} contentWidth={formattedTotalAmount.length * 8} + shouldApplyPaddingToContainer /> ), })); diff --git a/src/components/SelectionList/SplitListItem.tsx b/src/components/SelectionList/SplitListItem.tsx index 0a402b3e31ac..f005e1684382 100644 --- a/src/components/SelectionList/SplitListItem.tsx +++ b/src/components/SelectionList/SplitListItem.tsx @@ -141,6 +141,7 @@ function SplitListItem({ touchableInputWrapperStyle={[styles.ml3]} maxLength={formattedOriginalAmount.length} contentWidth={formattedOriginalAmount.length * 8} + shouldApplyPaddingToContainer /> diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 5ab8a65233e9..5a81337bed4d 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -33,7 +33,7 @@ type CustomBaseTextInputProps = { /** Customize the TextInput container */ textInputContainerStyles?: StyleProp; - /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input */ + /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input in money request flow */ shouldApplyPaddingToContainer?: boolean; /** Customizes the touchable wrapper of the TextInput component */ diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index b0c59971cdcb..f38ad1f07a37 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -78,6 +78,9 @@ type BaseTextInputWithCurrencySymbolProps = { /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; + /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input in money request flow */ + shouldApplyPaddingToContainer?: boolean; + /** The test ID of TextInput. Used to locate the view in end-to-end tests. */ testID?: string; } & Pick; From b2512ce0fcf08925b621801071ba2e1b15dc2d99 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 10 Jun 2025 11:17:28 +0530 Subject: [PATCH 14/22] fix bank info steps margin. Signed-off-by: krishna2323 --- src/components/TextInput/BaseTextInput/types.ts | 2 +- .../USD/BusinessInfo/subSteps/IncorporationCode.tsx | 2 +- .../USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 5a81337bed4d..f59c56fec61b 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -181,7 +181,7 @@ type CustomBaseTextInputProps = { /** Callback when the input is cleared using the clear button */ onClearInput?: () => void; - /** Whether the input should be enforced to take full height of conatiner. Default is `false` */ + /** Whether the input should be enforced to take full height of container. Default is `false` */ shouldUseFullInputHeight?: boolean; }; diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx index 7416d3ab9059..cc79e63da719 100644 --- a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx +++ b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationCode.tsx @@ -49,7 +49,7 @@ function IncorporationCode({onNext, isEditing}: SubStepProps) { submitButtonStyles={[styles.ph5, styles.mb0]} shouldHideFixErrorsAlert > - {translate('companyStep.industryClassification')} + {translate('companyStep.industryClassification')} - {translate('businessInfoStep.selectYourCompanyIncorporationDate')} + {translate('businessInfoStep.selectYourCompanyIncorporationDate')} Date: Tue, 10 Jun 2025 11:38:18 +0530 Subject: [PATCH 15/22] fix amount input padding. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 2b673107e313..326c04e52b07 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -37,6 +37,9 @@ type AmountTextInputProps = { /** Style for the TextInput container */ containerStyle?: StyleProp; + /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input in money request flow */ + shouldApplyPaddingToContainer?: boolean; + /** Hide the focus styles on TextInput */ hideFocusedState?: boolean; } & Pick; @@ -54,6 +57,7 @@ function AmountTextInput( containerStyle, disableKeyboard = true, hideFocusedState = true, + shouldApplyPaddingToContainer = false, ...rest }: AmountTextInputProps, ref: ForwardedRef, @@ -86,6 +90,7 @@ function AmountTextInput( spellCheck={false} disableKeyboardShortcuts shouldUseFullInputHeight + shouldApplyPaddingToContainer={shouldApplyPaddingToContainer} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} /> From 865e66fe55be1320eb7c88bb4930a92e0f626a7d Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 10 Jun 2025 11:44:36 +0530 Subject: [PATCH 16/22] fix ESLint. Signed-off-by: krishna2323 --- .../USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx index f0d16b1b8bd7..1b387f41f28a 100644 --- a/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx +++ b/src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx @@ -22,9 +22,9 @@ function IncorporationDateBusiness({onNext, isEditing}: SubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [reimbursementAccount, reimbursementAccountResult] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccount, reimbursementAccountResult] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: true}); const isLoadingReimbursementAccount = isLoadingOnyxValue(reimbursementAccountResult); - const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: true}); const validate = useCallback( (values: FormOnyxValues): FormInputErrors => { From d49a847b94014ea59b9a680b4ecd5ec0789a533e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 12 Jun 2025 18:05:01 +0530 Subject: [PATCH 17/22] fix split input alignment. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 1 + src/components/SelectionList/SplitListItem.tsx | 1 + src/components/Text.tsx | 10 ++++++++-- .../TextInput/BaseTextInput/implementation/index.tsx | 1 + 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 7d4064efe957..41e682c9c0ca 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -650,6 +650,7 @@ function MoneyRequestConfirmationList({ hideCurrencySymbol formatAmountOnBlur prefixContainerStyle={[styles.pv0, styles.h100]} + prefixStyle={styles.lineHeightUndefined} inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} diff --git a/src/components/SelectionList/SplitListItem.tsx b/src/components/SelectionList/SplitListItem.tsx index f005e1684382..74a5f6fb92b5 100644 --- a/src/components/SelectionList/SplitListItem.tsx +++ b/src/components/SelectionList/SplitListItem.tsx @@ -136,6 +136,7 @@ function SplitListItem({ formatAmountOnBlur onAmountChange={onSplitExpenseAmountChange} prefixContainerStyle={[styles.pv0, styles.h100]} + prefixStyle={styles.lineHeightUndefined} inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 16aaf9a708c3..763f9ee3fb22 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -26,9 +26,15 @@ type TextProps = RNTextProps & /** The family of the font to use */ family?: keyof FontUtilsType['fontFamily']['platform']; + + /** Should apply default line height */ + shouldUseDefaultLineHeight?: boolean; }; -function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { +function Text( + {color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, shouldUseDefaultLineHeight = true, ...props}: TextProps, + ref: ForwardedRef, +) { const theme = useTheme(); const customStyle = useContext(CustomStylesForChildrenContext); @@ -41,7 +47,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c ...StyleSheet.flatten(customStyle), }; - if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) { + if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal && shouldUseDefaultLineHeight) { componentStyle.lineHeight = variables.fontSizeNormalHeight; } diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 0c584a25920c..d986c984c4ae 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -367,6 +367,7 @@ function BaseTextInput( tabIndex={-1} style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} + shouldUseDefaultLineHeight={Object.keys(StyleSheet.flatten(prefixStyle)).includes('lineHeight')} > {prefixCharacter} From c86f71bc46394c761b82c8959c64959b6c90e655 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 12 Jun 2025 18:06:03 +0530 Subject: [PATCH 18/22] minor fix. Signed-off-by: krishna2323 --- src/components/TextInput/BaseTextInput/implementation/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index d986c984c4ae..83627cb118cb 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -367,7 +367,7 @@ function BaseTextInput( tabIndex={-1} style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} - shouldUseDefaultLineHeight={Object.keys(StyleSheet.flatten(prefixStyle)).includes('lineHeight')} + shouldUseDefaultLineHeight={!Object.keys(StyleSheet.flatten(prefixStyle)).includes('lineHeight')} > {prefixCharacter} From b8085f59c705ade504f8a7c5ac0ebedb9a70fcf3 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 19 Jun 2025 18:00:01 +0530 Subject: [PATCH 19/22] fix: NetSuiteTokenInputForm title margin bottom. Signed-off-by: krishna2323 --- .../NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx b/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx index 2233f8fca7ac..87d50efc70f8 100644 --- a/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx +++ b/src/pages/workspace/accounting/netsuite/NetSuiteTokenInput/substeps/NetSuiteTokenInputForm.tsx @@ -53,7 +53,7 @@ function NetSuiteTokenInputForm({onNext, policyID}: SubStepWithPolicy) { return ( - {translate(`workspace.netsuite.tokenInput.formSteps.enterCredentials.title`)} + {translate(`workspace.netsuite.tokenInput.formSteps.enterCredentials.title`)} Date: Tue, 24 Jun 2025 01:49:17 +0530 Subject: [PATCH 20/22] fix prefix alignment. Signed-off-by: krishna2323 --- src/components/AmountForm.tsx | 1 - src/components/MoneyRequestAmountInput.tsx | 4 +--- src/styles/index.ts | 1 + 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index f895c8e6b553..860af5a3d719 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -257,7 +257,6 @@ function AmountForm( textInput.current = ref; }} prefixCharacter={currency} - prefixContainerStyle={styles.pb2half} prefixStyle={styles.colorMuted} keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 34d04bb976e8..682b940b6f35 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -3,7 +3,6 @@ import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} fr import type {NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import {useMouseContext} from '@hooks/useMouseContext'; -import useThemeStyles from '@hooks/useThemeStyles'; import {isMobileSafari} from '@libs/Browser'; import {convertToFrontendAmountAsString, getCurrencyDecimals} from '@libs/CurrencyUtils'; import getOperatingSystem from '@libs/getOperatingSystem'; @@ -157,7 +156,6 @@ function MoneyRequestAmountInput( }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, ) { - const styles = useThemeStyles(); const {toLocaleDigit, numberFormat} = useLocalize(); const textInput = useRef(null); @@ -365,7 +363,7 @@ function MoneyRequestAmountInput( style={props.inputStyle} containerStyle={props.containerStyle} prefixStyle={props.prefixStyle} - prefixContainerStyle={[styles.pb2half, props.prefixContainerStyle]} + prefixContainerStyle={[props.prefixContainerStyle]} touchableInputWrapperStyle={props.touchableInputWrapperStyle} maxLength={maxLength} hideFocusedState={hideFocusedState} diff --git a/src/styles/index.ts b/src/styles/index.ts index 70f149d3064b..619097b63223 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1426,6 +1426,7 @@ const styles = (theme: ThemeColors) => alignItems: 'center', paddingTop: 15, paddingBottom: 8, + height: '100%', }, textInputSuffixWrapper: { From 73fcfc51e2931746eefeb07bd968bdd7aff84473 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 24 Jun 2025 02:43:53 +0530 Subject: [PATCH 21/22] minor update. Signed-off-by: krishna2323 --- src/components/MoneyRequestAmountInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 682b940b6f35..5361eefc49d9 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -363,7 +363,7 @@ function MoneyRequestAmountInput( style={props.inputStyle} containerStyle={props.containerStyle} prefixStyle={props.prefixStyle} - prefixContainerStyle={[props.prefixContainerStyle]} + prefixContainerStyle={props.prefixContainerStyle} touchableInputWrapperStyle={props.touchableInputWrapperStyle} maxLength={maxLength} hideFocusedState={hideFocusedState} From ca8855e258bd218908aa866b760d8e0a1ca89fc2 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 24 Jun 2025 03:37:14 +0530 Subject: [PATCH 22/22] fix ESLint. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 83627cb118cb..b26ba2f9e570 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -1,5 +1,5 @@ import {Str} from 'expensify-common'; -import type {ForwardedRef, MutableRefObject} from 'react'; +import type {ForwardedRef, RefObject} from 'react'; import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native'; import {ActivityIndicator, StyleSheet, View} from 'react-native'; @@ -115,7 +115,7 @@ function BaseTextInput( const isLabelActive = useRef(initialActiveLabel); const didScrollToEndRef = useRef(false); - useHtmlPaste(input as MutableRefObject, undefined, isMarkdownEnabled); + useHtmlPaste(input as RefObject, undefined, isMarkdownEnabled); // AutoFocus which only works on mount: useEffect(() => {