From e2f4dda057a0b2b20cff71dc75427469f3eed756 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 27 Jun 2025 14:26:21 +0530 Subject: [PATCH 01/12] fix: Android & iOS - Text is cut off in the search field when device font size is minimum. Signed-off-by: krishna2323 --- src/styles/index.ts | 14 +++++++------- src/styles/variables.ts | 2 ++ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 4128b65b8fb7a..336ff29794621 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1363,8 +1363,8 @@ const styles = (theme: ThemeColors) => fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightXLarge, color: theme.text, - paddingTop: 15, - paddingBottom: 8, + paddingTop: variables.inputPaddingTop, + paddingBottom: variables.inputPaddingBottom, paddingLeft: 0, borderWidth: 0, }, @@ -1375,7 +1375,7 @@ const styles = (theme: ThemeColors) => textInputMultilineContainer: { height: '100%', - paddingTop: 15, + paddingTop: variables.inputPaddingTop, }, textInputAndIconContainer: (isMarkdownEnabled: boolean) => { @@ -1424,8 +1424,8 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 15, - paddingBottom: 8, + paddingTop: variables.inputPaddingTop, + paddingBottom: variables.inputPaddingBottom, height: '100%', }, @@ -1436,8 +1436,8 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 15, - paddingBottom: 8, + paddingTop: variables.inputPaddingTop, + paddingBottom: variables.inputPaddingBottom, }, textInputPrefix: { diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 9fce8c472a600..d0d65828732d2 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -121,6 +121,8 @@ export default { lineHeighTaskTitle: getValueUsingPixelRatio(26, 30), lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37), inputHeight: getValueUsingPixelRatio(52, 72), + inputPaddingTop: getValueUsingPixelRatio(15, 21), + inputPaddingBottom: getValueUsingPixelRatio(8, 11), inputHeightSmall: 28, formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), From b8c80e329cfa2606c31d965525dcfe1d945ef705 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 1 Jul 2025 04:55:10 +0530 Subject: [PATCH 02/12] fix input alignment. Signed-off-by: krishna2323 --- src/components/CurrencySymbolButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CurrencySymbolButton.tsx b/src/components/CurrencySymbolButton.tsx index 2b736c2ef5275..4d8d3fb4417c8 100644 --- a/src/components/CurrencySymbolButton.tsx +++ b/src/components/CurrencySymbolButton.tsx @@ -38,12 +38,12 @@ function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol, isCurrency src={Expensicons.DownArrow} fill={theme.icon} /> - {currencySymbol} + {currencySymbol} ) : ( - {currencySymbol} + {currencySymbol} ); } From 4373ddd320fd0d17ee45bc45e3ee47d34a173137 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 1 Jul 2025 06:13:57 +0530 Subject: [PATCH 03/12] fix multiline input. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 41da14d6a3f12..f261d3eda551a 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -300,7 +300,7 @@ function BaseTextInput( variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, ), - isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, + isAutoGrowHeightMarkdown && {minHeight: variables.inputHeight}, !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, ]} From 936a8f83bf8ffcdf16f8209859dde3d52a609996 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 1 Jul 2025 06:39:54 +0530 Subject: [PATCH 04/12] fix prefix and suffix characters alignment. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index f261d3eda551a..b6a445bd2d918 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -345,7 +345,7 @@ function BaseTextInput( )} {!!prefixCharacter && ( - + { if (event.nativeEvent.layout.width === 0 && event.nativeEvent.layout.height === 0) { @@ -357,6 +357,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') && !shouldApplyHeight} > {prefixCharacter} @@ -423,6 +424,7 @@ function BaseTextInput( tabIndex={-1} style={[styles.textInputSuffix, !hasLabel && styles.pv0, styles.pointerEventsNone, suffixStyle]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} + shouldUseDefaultLineHeight={!Object.keys(StyleSheet.flatten(suffixStyle)).includes('lineHeight') && !shouldApplyHeight} > {suffixCharacter} From a2fda2ba45ac4fd4b3ac611a3232816dea50efbb Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 4 Jul 2025 22:54:05 +0530 Subject: [PATCH 05/12] add prop for using default line height for prefix character. Signed-off-by: krishna2323 --- src/components/MoneyRequestAmountInput.tsx | 4 +++- src/components/MoneyRequestConfirmationList.tsx | 1 + src/components/SelectionList/SplitListItem.tsx | 1 + .../TextInput/BaseTextInput/implementation/index.native.tsx | 4 ++-- .../TextInput/BaseTextInput/implementation/index.tsx | 3 ++- src/components/TextInput/BaseTextInput/types.ts | 3 +++ src/components/TextInputWithCurrencySymbol/types.ts | 2 +- 7 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 1b00728fe2cf3..6261abde8002a 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -96,7 +96,7 @@ type MoneyRequestAmountInputProps = { /** The testID of the input. Used to locate this view in end-to-end tests. */ testID?: string; -} & Pick; +} & Pick; type Selection = { start: number; @@ -136,6 +136,7 @@ function MoneyRequestAmountInput( testID, submitBehavior, shouldApplyPaddingToContainer = false, + shouldPrefixUseDefaultLineHeight = true, ...props }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, @@ -348,6 +349,7 @@ function MoneyRequestAmountInput( testID={testID} submitBehavior={submitBehavior} shouldApplyPaddingToContainer={shouldApplyPaddingToContainer} + shouldPrefixUseDefaultLineHeight={shouldPrefixUseDefaultLineHeight} /> ); } diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index a2a34e5e88e44..196c5c548812d 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -677,6 +677,7 @@ function MoneyRequestConfirmationList({ maxLength={formattedTotalAmount.length + 1} contentWidth={(formattedTotalAmount.length + 1) * 8} shouldApplyPaddingToContainer + shouldPrefixUseDefaultLineHeight={false} /> ), })); diff --git a/src/components/SelectionList/SplitListItem.tsx b/src/components/SelectionList/SplitListItem.tsx index 4d1516f090f7d..941358a34d5dd 100644 --- a/src/components/SelectionList/SplitListItem.tsx +++ b/src/components/SelectionList/SplitListItem.tsx @@ -143,6 +143,7 @@ function SplitListItem({ maxLength={formattedOriginalAmount.length + 1} contentWidth={(formattedOriginalAmount.length + 1) * 8} shouldApplyPaddingToContainer + shouldPrefixUseDefaultLineHeight={false} /> diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index b6a445bd2d918..0d04f46bbe4f1 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -78,6 +78,7 @@ function BaseTextInput( placeholderTextColor, onClearInput, iconContainerStyle, + shouldPrefixUseDefaultLineHeight = true, ...props }: BaseTextInputProps, ref: ForwardedRef, @@ -357,7 +358,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') && !shouldApplyHeight} + shouldUseDefaultLineHeight={!!shouldPrefixUseDefaultLineHeight && !shouldApplyHeight} > {prefixCharacter} @@ -424,7 +425,6 @@ function BaseTextInput( tabIndex={-1} style={[styles.textInputSuffix, !hasLabel && styles.pv0, styles.pointerEventsNone, suffixStyle]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} - shouldUseDefaultLineHeight={!Object.keys(StyleSheet.flatten(suffixStyle)).includes('lineHeight') && !shouldApplyHeight} > {suffixCharacter} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 03d88aaa07aca..f8b4f3e841712 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -80,6 +80,7 @@ function BaseTextInput( placeholderTextColor, onClearInput, iconContainerStyle, + shouldPrefixUseDefaultLineHeight = true, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, @@ -367,7 +368,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={shouldPrefixUseDefaultLineHeight} > {prefixCharacter} diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index f59c56fec61b0..36d4acb95da82 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -183,6 +183,9 @@ type CustomBaseTextInputProps = { /** Whether the input should be enforced to take full height of container. Default is `false` */ shouldUseFullInputHeight?: boolean; + + /** Whether the input prefix should use the default text line height */ + shouldPrefixUseDefaultLineHeight?: boolean; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index f38ad1f07a373..d5baa9e9056c7 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -83,7 +83,7 @@ type BaseTextInputWithCurrencySymbolProps = { /** The test ID of TextInput. Used to locate the view in end-to-end tests. */ testID?: string; -} & Pick; +} & Pick; type TextInputWithCurrencySymbolProps = Omit & { onSelectionChange?: (start: number, end: number) => void; From da4df37c8979a2b574ad7ea3075148733986fe39 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 16 Jul 2025 20:06:05 +0530 Subject: [PATCH 06/12] fix prop name, icon alignment, and comment. Signed-off-by: krishna2323 --- src/components/MoneyRequestAmountInput.tsx | 6 +++--- .../TextInput/BaseTextInput/implementation/index.native.tsx | 4 ++-- .../TextInput/BaseTextInput/implementation/index.tsx | 4 ++-- src/components/TextInput/BaseTextInput/types.ts | 4 ++-- src/components/TextInputWithCurrencySymbol/types.ts | 2 +- src/styles/utils/index.ts | 2 +- src/styles/variables.ts | 2 ++ 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/MoneyRequestAmountInput.tsx b/src/components/MoneyRequestAmountInput.tsx index 6261abde8002a..aaeca047757a4 100644 --- a/src/components/MoneyRequestAmountInput.tsx +++ b/src/components/MoneyRequestAmountInput.tsx @@ -96,7 +96,7 @@ type MoneyRequestAmountInputProps = { /** The testID of the input. Used to locate this view in end-to-end tests. */ testID?: string; -} & Pick; +} & Pick; type Selection = { start: number; @@ -136,7 +136,7 @@ function MoneyRequestAmountInput( testID, submitBehavior, shouldApplyPaddingToContainer = false, - shouldPrefixUseDefaultLineHeight = true, + shouldUseDefaultLineHeightForPrefix = true, ...props }: MoneyRequestAmountInputProps, forwardedRef: ForwardedRef, @@ -349,7 +349,7 @@ function MoneyRequestAmountInput( testID={testID} submitBehavior={submitBehavior} shouldApplyPaddingToContainer={shouldApplyPaddingToContainer} - shouldPrefixUseDefaultLineHeight={shouldPrefixUseDefaultLineHeight} + shouldUseDefaultLineHeightForPrefix={shouldUseDefaultLineHeightForPrefix} /> ); } diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 807a6221a9bf0..d5bd6d84e6cb8 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -78,7 +78,7 @@ function BaseTextInput( placeholderTextColor, onClearInput, iconContainerStyle, - shouldPrefixUseDefaultLineHeight = true, + shouldUseDefaultLineHeightForPrefix = true, ...props }: BaseTextInputProps, ref: ForwardedRef, @@ -359,7 +359,7 @@ function BaseTextInput( tabIndex={-1} style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} - shouldUseDefaultLineHeight={!!shouldPrefixUseDefaultLineHeight && !shouldApplyHeight} + shouldUseDefaultLineHeight={!!shouldUseDefaultLineHeightForPrefix && !shouldApplyHeight} > {prefixCharacter} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index d6430c771db10..9237be402018e 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -80,7 +80,7 @@ function BaseTextInput( placeholderTextColor, onClearInput, iconContainerStyle, - shouldPrefixUseDefaultLineHeight = true, + shouldUseDefaultLineHeightForPrefix = true, ...inputProps }: BaseTextInputProps, ref: ForwardedRef, @@ -369,7 +369,7 @@ function BaseTextInput( tabIndex={-1} style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} - shouldUseDefaultLineHeight={shouldPrefixUseDefaultLineHeight} + shouldUseDefaultLineHeight={shouldUseDefaultLineHeightForPrefix} > {prefixCharacter} diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index f10c764768776..b29a70b8eab49 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -187,8 +187,8 @@ type CustomBaseTextInputProps = { /** Whether the input should be enforced to take full height of container. Default is `false` */ shouldUseFullInputHeight?: boolean; - /** Whether the input prefix should use the default text line height */ - shouldPrefixUseDefaultLineHeight?: boolean; + /** Whether the input prefix should use the default `Text` line height fallback. Disable this if you intentionally want the prefix to have `lineHeight: undefined` */ + shouldUseDefaultLineHeightForPrefix?: boolean; }; type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef; diff --git a/src/components/TextInputWithCurrencySymbol/types.ts b/src/components/TextInputWithCurrencySymbol/types.ts index d5baa9e9056c7..1d75cbbf476f5 100644 --- a/src/components/TextInputWithCurrencySymbol/types.ts +++ b/src/components/TextInputWithCurrencySymbol/types.ts @@ -83,7 +83,7 @@ type BaseTextInputWithCurrencySymbolProps = { /** The test ID of TextInput. Used to locate the view in end-to-end tests. */ testID?: string; -} & Pick; +} & Pick; type TextInputWithCurrencySymbolProps = Omit & { onSelectionChange?: (start: number, end: number) => void; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index df52b0c094166..c16c039220294 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1385,7 +1385,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ const paddingStyle = includePadding ? {paddingHorizontal: 11} : {}; return { ...paddingStyle, - marginTop: hasLabel ? 8 : 16, + marginTop: hasLabel ? variables.inputIconMarginTopSmall : variables.inputIconMarginTopLarge, }; }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f4f53475e41a9..3626a173a5c1c 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -124,6 +124,8 @@ export default { inputPaddingTop: getValueUsingPixelRatio(15, 21), inputPaddingBottom: getValueUsingPixelRatio(8, 11), inputHeightSmall: 28, + inputIconMarginTopSmall: getValueUsingPixelRatio(8, 11), + inputIconMarginTopLarge: getValueUsingPixelRatio(16, 21), formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), alternateTextHeight: getValueUsingPixelRatio(20, 24), From d4d936128718acbc0d081b0fdd6e8efd73a5b582 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 16 Jul 2025 20:11:35 +0530 Subject: [PATCH 07/12] fix ESLint. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 2 +- src/components/SelectionList/SplitListItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 19fa15fa2e18d..d2cd2e6fb1e4b 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -685,7 +685,7 @@ function MoneyRequestConfirmationList({ maxLength={formattedTotalAmount.length + 1} contentWidth={(formattedTotalAmount.length + 1) * 8} shouldApplyPaddingToContainer - shouldPrefixUseDefaultLineHeight={false} + shouldUseDefaultLineHeightForPrefix={false} /> ), })); diff --git a/src/components/SelectionList/SplitListItem.tsx b/src/components/SelectionList/SplitListItem.tsx index 941358a34d5dd..680545a287dc2 100644 --- a/src/components/SelectionList/SplitListItem.tsx +++ b/src/components/SelectionList/SplitListItem.tsx @@ -143,7 +143,7 @@ function SplitListItem({ maxLength={formattedOriginalAmount.length + 1} contentWidth={(formattedOriginalAmount.length + 1) * 8} shouldApplyPaddingToContainer - shouldPrefixUseDefaultLineHeight={false} + shouldUseDefaultLineHeightForPrefix={false} /> From 2b728731993b5ee15fa9c8a5b9b718ba06c81352 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sat, 26 Jul 2025 00:00:00 +0530 Subject: [PATCH 08/12] fix tax amount picker alignment. Signed-off-by: krishna2323 --- src/pages/workspace/taxes/ValuePage.tsx | 2 +- src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/taxes/ValuePage.tsx b/src/pages/workspace/taxes/ValuePage.tsx index 1120750ec4f06..17e3a3b312a80 100644 --- a/src/pages/workspace/taxes/ValuePage.tsx +++ b/src/pages/workspace/taxes/ValuePage.tsx @@ -95,7 +95,7 @@ function ValuePage({ extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2} // We increase the amount max length to support the extra decimals. amountMaxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES} - extraSymbol={%} + extraSymbol={%} ref={inputCallbackRef} autoGrowExtraSpace={variables.w80} autoGrowMarginSide="left" diff --git a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx index 384f75cc55a1f..f9f772f47cf83 100644 --- a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx @@ -117,7 +117,7 @@ function WorkspaceCreateTaxPage({ extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2} // We increase the amount max length to support the extra decimals. amountMaxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES} - extraSymbol={%} + extraSymbol={%} autoGrowExtraSpace={variables.w80} autoGrowMarginSide="left" style={[styles.iouAmountTextInput, styles.textAlignRight]} From c20b236e6153ff78b1a4c02c1dbb6153e3ee8425 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 29 Jul 2025 01:12:16 +0530 Subject: [PATCH 09/12] fix input icon alignment. Signed-off-by: krishna2323 --- .../implementation/index.native.tsx | 15 ++++++++--- .../BaseTextInput/implementation/index.tsx | 16 ++++++++---- src/styles/utils/index.ts | 26 ++++++++++++++++--- 3 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index d5bd6d84e6cb8..1698978c99e65 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -276,6 +276,7 @@ function BaseTextInput( shouldAddPaddingBottom && styles.pb1, ]); + const inputVerticalPadding = StyleUtils.getPaddingVerticalFromStyle(newTextInputContainerStyles); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); @@ -433,7 +434,7 @@ function BaseTextInput( )} {((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && ( { setValue(''); onClearInput?.(); @@ -445,7 +446,7 @@ function BaseTextInput( size="small" color={theme.iconSuccessFill} style={[ - StyleUtils.getTextInputIconContainerStyles(hasLabel, false), + StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding), styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, @@ -455,7 +456,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { event.preventDefault(); @@ -469,7 +470,13 @@ function BaseTextInput( )} {!inputProps.secureTextEntry && !!icon && ( - + { setValue(''); onClearInput?.(); @@ -467,7 +467,7 @@ function BaseTextInput( size="small" color={theme.iconSuccessFill} style={[ - StyleUtils.getTextInputIconContainerStyles(hasLabel, false), + StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding), styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, @@ -477,7 +477,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { e.preventDefault(); @@ -491,7 +491,13 @@ function BaseTextInput( )} {!inputProps.secureTextEntry && !!icon && ( - + { + return typeof paddingValue === 'number' ? paddingValue : 0; + }; + + const paddingTop = getNumericPadding(flatStyle?.paddingTop ?? flatStyle.padding); + const paddingBottom = getNumericPadding(flatStyle?.paddingBottom ?? flatStyle.padding); + return paddingTop + paddingBottom; +} + /** * Checks to see if the iOS device has safe areas or not */ @@ -1237,6 +1254,7 @@ const staticStyleUtils = { getPaddingLeft, getPaddingRight, getPaddingBottom, + getPaddingVerticalFromStyle, hasSafeAreas, getHeight, getMinimumHeight, @@ -1381,11 +1399,13 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ * 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) => { + getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true, inputPaddingTop = styles.textInputContainer?.padding): ViewStyle => { const paddingStyle = includePadding ? {paddingHorizontal: 11} : {}; return { ...paddingStyle, - marginTop: hasLabel ? variables.inputIconMarginTopSmall : variables.inputIconMarginTopLarge, + marginTop: -(inputPaddingTop / 2), + height: '100%', + justifyContent: 'center', }; }, From 8273b1e8f91f433f97a4c6547e06a5ed8e7734a3 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 29 Jul 2025 01:18:42 +0530 Subject: [PATCH 10/12] fix activity indicator alignment. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 1 - src/components/TextInput/BaseTextInput/implementation/index.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 1698978c99e65..4d5097536f7f1 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -448,7 +448,6 @@ function BaseTextInput( style={[ StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding), styles.ml1, - styles.justifyContentStart, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0), ]} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index a689a1cf44991..fcdf5c1868d7d 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -469,7 +469,6 @@ function BaseTextInput( style={[ StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding), styles.ml1, - styles.justifyContentStart, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0), ]} From 24472609bd7c79fc987b61464f81885f8950a5ce Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 29 Jul 2025 12:33:12 +0530 Subject: [PATCH 11/12] centre icon based on input vertical padding diff. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 10 +++++----- .../BaseTextInput/implementation/index.tsx | 10 +++++----- src/styles/utils/index.ts | 14 +++++++------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 4d5097536f7f1..00de2eaabb6ce 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -276,7 +276,7 @@ function BaseTextInput( shouldAddPaddingBottom && styles.pb1, ]); - const inputVerticalPadding = StyleUtils.getPaddingVerticalFromStyle(newTextInputContainerStyles); + const verticalPaddingDiff = StyleUtils.getVeritcalPaddingDiffFromStyle(newTextInputContainerStyles); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); @@ -434,7 +434,7 @@ function BaseTextInput( )} {((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && ( { setValue(''); onClearInput?.(); @@ -446,7 +446,7 @@ function BaseTextInput( size="small" color={theme.iconSuccessFill} style={[ - StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding), + StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), styles.ml1, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0), @@ -455,7 +455,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { event.preventDefault(); @@ -471,7 +471,7 @@ function BaseTextInput( {!inputProps.secureTextEntry && !!icon && ( { setValue(''); onClearInput?.(); @@ -467,7 +467,7 @@ function BaseTextInput( size="small" color={theme.iconSuccessFill} style={[ - StyleUtils.getTextInputIconContainerStyles(hasLabel, false, inputVerticalPadding), + StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), styles.ml1, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0), @@ -476,7 +476,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { e.preventDefault(); @@ -492,7 +492,7 @@ function BaseTextInput( {!inputProps.secureTextEntry && !!icon && ( ({ /** * 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. + * Applies horizontal padding if requested, and sets the top margin based on padding difference. */ - getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true, inputPaddingTop = styles.textInputContainer?.padding): ViewStyle => { + getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true, verticalPaddingDiff = 0): ViewStyle => { const paddingStyle = includePadding ? {paddingHorizontal: 11} : {}; return { ...paddingStyle, - marginTop: -(inputPaddingTop / 2), + marginTop: -(verticalPaddingDiff / 2), height: '100%', justifyContent: 'center', }; From 01181e76aa00fe2d2056e11cbf8cabeba0a30a63 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 30 Jul 2025 03:23:13 +0530 Subject: [PATCH 12/12] fix spell check. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.tsx | 2 +- src/styles/utils/index.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 00de2eaabb6ce..c2a221110764f 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -276,7 +276,7 @@ function BaseTextInput( shouldAddPaddingBottom && styles.pb1, ]); - const verticalPaddingDiff = StyleUtils.getVeritcalPaddingDiffFromStyle(newTextInputContainerStyles); + const verticalPaddingDiff = StyleUtils.getVerticalPaddingDiffFromStyle(newTextInputContainerStyles); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index d94904c8eb590..8fbc29981fddc 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -281,7 +281,7 @@ function BaseTextInput( shouldAddPaddingBottom && styles.pb1, ]); - const verticalPaddingDiff = StyleUtils.getVeritcalPaddingDiffFromStyle(newTextInputContainerStyles); + const verticalPaddingDiff = StyleUtils.getVerticalPaddingDiffFromStyle(newTextInputContainerStyles); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight); // This is workaround for https://github.com/Expensify/App/issues/47939: in case when user is using Chrome on Android we set inputMode to 'search' to disable autocomplete bar above the keyboard. diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 899eba1a226a6..1cec935f323e7 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -731,7 +731,7 @@ function getPaddingBottom(paddingBottom: number): ViewStyle { /** * Get vertical padding diff from provided styles (paddingTop - paddingBottom) */ -function getVeritcalPaddingDiffFromStyle(textInputContainerStyles: ViewStyle): number { +function getVerticalPaddingDiffFromStyle(textInputContainerStyles: ViewStyle): number { const flatStyle = StyleSheet.flatten(textInputContainerStyles); // Safely extract padding values only if they are numbers @@ -1254,7 +1254,7 @@ const staticStyleUtils = { getPaddingLeft, getPaddingRight, getPaddingBottom, - getVeritcalPaddingDiffFromStyle, + getVerticalPaddingDiffFromStyle, hasSafeAreas, getHeight, getMinimumHeight,