From 45cbe1c2381a0e35c70a37d3505042cb45e76413 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 10 Apr 2025 00:13:03 +0530 Subject: [PATCH 01/41] fix: Update visual style of our text inputs for better consistency. Signed-off-by: krishna2323 --- src/styles/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index e1d4c210c421..b28d4c4046bd 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1039,7 +1039,7 @@ const styles = (theme: ThemeColors) => textInputDisabled: { // Adding disabled color theme to indicate user that the field is not editable. backgroundColor: theme.highlightBG, - borderBottomWidth: 2, + borderBottomWidth: 1, borderColor: theme.borderLighter, // Adding browser specefic style to bring consistency between Safari and other platforms. // Applying the Webkit styles only to browsers as it is not available in native. @@ -1237,7 +1237,7 @@ const styles = (theme: ThemeColors) => height: '100%', backgroundColor: 'transparent', overflow: 'hidden', - borderBottomWidth: 2, + borderBottomWidth: 1, borderColor: theme.border, }, From 68a75d4f078e9fb7740c6eb1dc6a53d8fd25111e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 11 Apr 2025 14:42:25 +0530 Subject: [PATCH 02/41] udpate: add full border to inputs. Signed-off-by: krishna2323 --- src/styles/index.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index e32f87e19c32..c2e72d5ec725 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1039,7 +1039,9 @@ const styles = (theme: ThemeColors) => textInputDisabled: { // Adding disabled color theme to indicate user that the field is not editable. backgroundColor: theme.highlightBG, - borderBottomWidth: 1, + borderWidth: 1, + padding: 8, + borderRadius: 8, borderColor: theme.borderLighter, // Adding browser specefic style to bring consistency between Safari and other platforms. // Applying the Webkit styles only to browsers as it is not available in native. @@ -1237,7 +1239,9 @@ const styles = (theme: ThemeColors) => height: '100%', backgroundColor: 'transparent', overflow: 'hidden', - borderBottomWidth: 1, + borderWidth: 1, + padding: 8, + borderRadius: 8, borderColor: theme.border, }, @@ -1247,7 +1251,7 @@ const styles = (theme: ThemeColors) => textInputLabel: { position: 'absolute', - left: 0, + left: 8, top: 0, fontSize: variables.fontSizeNormal, color: theme.textSupporting, From 4d7e604e2729403edb297065f3b5775dc764bff4 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 11 Apr 2025 14:50:59 +0530 Subject: [PATCH 03/41] fix ESLint. Signed-off-by: krishna2323 --- src/styles/utils/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index e97f78f667cc..7986384b73f7 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1313,7 +1313,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, }; }, @@ -1333,7 +1333,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} : {}; }, /** @@ -1516,7 +1516,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.minHeight - styles.textInputContainer.borderWidth}), /** * Generate fill color of an icon based on its state. From 59dca52ac8e811c3cfef94edca7b7cfe97456a56 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sat, 12 Apr 2025 19:22:06 +0530 Subject: [PATCH 04/41] fix: amount input. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 256d95ba8419..d488800d16db 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 ( Date: Wed, 16 Apr 2025 02:14:56 +0530 Subject: [PATCH 05/41] fix height of regular inputs. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 5 ++++- .../TextInput/BaseTextInput/implementation/index.tsx | 2 +- src/styles/index.ts | 6 ++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index a28e26b406e2..a95917a71afc 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -65,6 +65,7 @@ function BaseTextInput( type = 'default', excludedMarkdownStyles = [], shouldShowClearButton = false, + shouldHideClearButton = true, prefixContainerStyle = [], prefixStyle = [], suffixContainerStyle = [], @@ -73,6 +74,8 @@ function BaseTextInput( loadingSpinnerStyle, uncontrolled, placeholderTextColor, + onClearInput, + iconContainerStyle, ...props }: BaseTextInputProps, ref: ForwardedRef, @@ -284,7 +287,7 @@ function BaseTextInput( !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, - !isMultiline && styles.componentHeightLarge, + !isMultiline && styles.componentMinHeightLarge, touchableInputWrapperStyle, ]} > diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 2e7a5709fd18..5b39e21e8f69 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -290,7 +290,7 @@ function BaseTextInput( !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, - !isMultiline && styles.componentHeightLarge, + !isMultiline && styles.componentMinHeightLarge, touchableInputWrapperStyle, ]} > diff --git a/src/styles/index.ts b/src/styles/index.ts index c2e72d5ec725..304270ac348c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1041,6 +1041,7 @@ const styles = (theme: ThemeColors) => backgroundColor: theme.highlightBG, borderWidth: 1, padding: 8, + paddingBottom: 0, borderRadius: 8, borderColor: theme.borderLighter, // Adding browser specefic style to bring consistency between Safari and other platforms. @@ -1181,8 +1182,8 @@ const styles = (theme: ThemeColors) => borderRadius: 20, }, - componentHeightLarge: { - height: variables.inputHeight, + componentMinHeightLarge: { + minHeight: variables.inputHeight, }, calendarHeader: { @@ -1241,6 +1242,7 @@ const styles = (theme: ThemeColors) => overflow: 'hidden', borderWidth: 1, padding: 8, + paddingBottom: 0, borderRadius: 8, borderColor: theme.border, }, From f907ad09d2a9a0f88688101e764eb0be7e799ecc Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 16 Apr 2025 02:17:20 +0530 Subject: [PATCH 06/41] fix merge conflicts. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index a95917a71afc..9cc69dfb073c 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -65,7 +65,6 @@ function BaseTextInput( type = 'default', excludedMarkdownStyles = [], shouldShowClearButton = false, - shouldHideClearButton = true, prefixContainerStyle = [], prefixStyle = [], suffixContainerStyle = [], @@ -74,8 +73,6 @@ function BaseTextInput( loadingSpinnerStyle, uncontrolled, placeholderTextColor, - onClearInput, - iconContainerStyle, ...props }: BaseTextInputProps, ref: ForwardedRef, From fb56d1bde329868ee1c0af4a05383ed3a6128508 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 22 Apr 2025 11:53:48 +0530 Subject: [PATCH 07/41] fix: input height, label position, and spacing. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.tsx | 2 +- src/components/TextInput/styleConst.ts | 2 +- src/styles/index.ts | 11 ++++++----- src/styles/variables.ts | 4 ++-- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 45aab702b6dd..1392077986e1 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -285,7 +285,7 @@ function BaseTextInput( !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, - !isMultiline && styles.componentMinHeightLarge, + !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, ]} > diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 5c162e833f29..9d6e858b2551 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -290,7 +290,7 @@ function BaseTextInput( !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, - !isMultiline && styles.componentMinHeightLarge, + !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, ]} > 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 05ed84c991f0..fccc501a4abd 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1207,8 +1207,8 @@ const styles = (theme: ThemeColors) => borderRadius: 20, }, - componentMinHeightLarge: { - minHeight: variables.inputHeight, + componentHeightLarge: { + height: variables.inputHeight, }, calendarHeader: { @@ -1290,6 +1290,7 @@ const styles = (theme: ThemeColors) => textInputLabel: { position: 'absolute', left: 8, + paddingRight: 16, top: 0, fontSize: variables.fontSizeNormal, color: theme.textSupporting, @@ -1321,7 +1322,7 @@ const styles = (theme: ThemeColors) => fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightXLarge, color: theme.text, - paddingTop: 23, + paddingTop: 17, paddingBottom: 8, paddingLeft: 0, borderWidth: 0, @@ -1333,7 +1334,7 @@ const styles = (theme: ThemeColors) => textInputMultilineContainer: { height: '100%', - paddingTop: 23, + paddingTop: 17, }, textInputAndIconContainer: (isMarkdownEnabled: boolean) => { @@ -1388,7 +1389,7 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 23, + paddingTop: 17, paddingBottom: 8, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index e7728ead0670..02b7b39c05fd 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -117,12 +117,12 @@ export default { lineHeightSizeh2: getValueUsingPixelRatio(24, 28), lineHeighTaskTitle: getValueUsingPixelRatio(26, 30), lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37), - inputHeight: getValueUsingPixelRatio(52, 72), + inputHeight: getValueUsingPixelRatio(54, 76), inputHeightSmall: 28, formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), alternateTextHeight: getValueUsingPixelRatio(20, 24), - INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21), + INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(18, 23), sliderBarHeight: 8, sliderKnobSize: 26, checkboxLabelActiveOpacity: 0.7, From 2bf49b1fd05e639bf33150d2e17e1ea6831f08f4 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 22 Apr 2025 12:27:31 +0530 Subject: [PATCH 08/41] fix: amount input padding. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 4 ++-- src/styles/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index de53f5cae4c1..e2fb0b243a6e 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -645,12 +645,12 @@ function MoneyRequestConfirmationList({ formatAmountOnBlur prefixContainerStyle={[styles.pv0]} inputStyle={[styles.optionRowAmountInput]} - containerStyle={[styles.textInputContainer]} + containerStyle={[styles.textInputContainer, styles.pl2]} touchableInputWrapperStyle={[styles.ml3]} onFormatAmount={convertToDisplayStringWithoutCurrency} onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))} maxLength={formattedTotalAmount.length} - contentWidth={formattedTotalAmount.length * 8} + contentWidth={formattedTotalAmount.length * 8 + 8} /> ), })); diff --git a/src/styles/index.ts b/src/styles/index.ts index fccc501a4abd..50092a014e5e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1389,7 +1389,7 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 17, + paddingTop: 9, paddingBottom: 8, }, From 05b256a98472af909904fc0556aaef89f7eef3c2 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 22 Apr 2025 12:41:07 +0530 Subject: [PATCH 09/41] fix ESLint. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index e2fb0b243a6e..688410c46c3a 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -226,16 +226,17 @@ function MoneyRequestConfirmationList({ onPDFPassword, }: MoneyRequestConfirmationListProps) { const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); - const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`); - const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); - const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`); + const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {canBeMissing: true}); + const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true}); + const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, {canBeMissing: true}); const [defaultMileageRate] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, { selector: (selectedPolicy) => DistanceRequestUtils.getDefaultMileageRate(selectedPolicy), + canBeMissing: true, }); - const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`); - const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES); - const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST); - const [betas] = useOnyx(ONYXKEYS.BETAS); + const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`, {canBeMissing: true}); + const [lastSelectedDistanceRates] = useOnyx(ONYXKEYS.NVP_LAST_SELECTED_DISTANCE_RATES, {canBeMissing: true}); + const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: true}); + const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: true}); const isTestReceipt = useMemo(() => { return transaction?.receipt?.isTestReceipt ?? false; From 7eeb88e1813518555267549fc83d2b724e7ddf0f Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 22 Apr 2025 12:47:31 +0530 Subject: [PATCH 10/41] minor style adjustments. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 2 +- src/styles/index.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 688410c46c3a..8f2c8bf05031 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -225,7 +225,7 @@ function MoneyRequestConfirmationList({ onPDFLoadError, onPDFPassword, }: MoneyRequestConfirmationListProps) { - const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); + const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: true}); const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {canBeMissing: true}); const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true}); const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`, {canBeMissing: true}); diff --git a/src/styles/index.ts b/src/styles/index.ts index 50092a014e5e..bc2f1f3d7b32 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1401,8 +1401,8 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 23, - paddingBottom: 8, + paddingTop: 9, + paddingBottom: 10, }, textInputPrefix: { From 0a3430fc26d75375186203be04da0d7428889e62 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 23 Apr 2025 00:46:50 +0530 Subject: [PATCH 11/41] fix magic code input alignment. Signed-off-by: krishna2323 --- src/components/MagicCodeInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index 8d0d2a6c89a3..28e0bddec89d 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -433,6 +433,7 @@ function MagicCodeInput( StyleUtils.getHeightOfMagicCodeInput(), hasError || errorText ? styles.borderColorDanger : {}, focusedIndex === index ? styles.borderColorFocus : {}, + styles.pt1, ]} > {decomposeString(value, maxLength).at(index) ?? ''} From 892f8eb1acbd0d0ab4eba992b35d38ea28c6a842 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 23 Apr 2025 01:00:10 +0530 Subject: [PATCH 12/41] fix search page header input bg. Signed-off-by: krishna2323 --- src/components/Search/SearchAutocompleteInput.tsx | 2 +- src/styles/index.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index 00d77f62ce2d..2a0b4a816e0d 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -208,7 +208,7 @@ function SearchAutocompleteInput( maxLength={CONST.SEARCH_QUERY_LIMIT} onSubmitEditing={onSubmit} shouldUseDisabledStyles={false} - textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]} + textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3, styles.pt1]} inputStyle={[inputWidth, {lineHeight: undefined}]} placeholderTextColor={theme.textSupporting} onFocus={() => { diff --git a/src/styles/index.ts b/src/styles/index.ts index bc2f1f3d7b32..69d89cb8c6f8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3825,7 +3825,6 @@ const styles = (theme: ThemeColors) => }, searchAutocompleteInputResults: { - backgroundColor: theme.sidebarHover, borderWidth: 1, borderColor: theme.sidebarHover, }, @@ -3833,7 +3832,6 @@ const styles = (theme: ThemeColors) => searchAutocompleteInputResultsFocused: { borderWidth: 1, borderColor: theme.success, - backgroundColor: theme.appBG, }, searchTableHeaderActive: { From 9f5e7fe25e4ae7c3638b76991d7f76c94ed92d99 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 23 Apr 2025 01:43:00 +0530 Subject: [PATCH 13/41] fix label animation easing. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.tsx | 16 +++++++++++++--- src/styles/index.ts | 1 + 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 9d6e858b2551..0859d9583322 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], ); diff --git a/src/styles/index.ts b/src/styles/index.ts index 69d89cb8c6f8..6458598917a1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1314,6 +1314,7 @@ const styles = (theme: ThemeColors) => return { transform: [{translateY: translateY.get()}], fontSize: interpolate(scale.get(), [0, ACTIVE_LABEL_SCALE], [0, variables.fontSizeLabel]), + transition: 'ease', } satisfies TextStyle; }, From 9614c3f809be02e72c5c2eb2538f9336942dd4f1 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 23 Apr 2025 01:55:40 +0530 Subject: [PATCH 14/41] fix: report page input border color. Signed-off-by: krishna2323 --- .../Search/SearchPageHeader/SearchPageHeaderInput.tsx | 2 +- src/styles/index.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 0be5ef0ae02c..6123413647a4 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -343,7 +343,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo autoFocus={false} onFocus={showAutocompleteList} onBlur={hideAutocompleteList} - wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}} + wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.border}} wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]} rightComponent={inputRightComponent} diff --git a/src/styles/index.ts b/src/styles/index.ts index 6458598917a1..69d89cb8c6f8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1314,7 +1314,6 @@ const styles = (theme: ThemeColors) => return { transform: [{translateY: translateY.get()}], fontSize: interpolate(scale.get(), [0, ACTIVE_LABEL_SCALE], [0, variables.fontSizeLabel]), - transition: 'ease', } satisfies TextStyle; }, From e3858c2e80a4ac8a15fe59ea62d299e25a468aa8 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 23 Apr 2025 02:04:45 +0530 Subject: [PATCH 15/41] fix ESLint. Signed-off-by: krishna2323 --- .../Search/SearchPageHeader/SearchPageHeaderInput.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 6123413647a4..86394f3a3af2 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -68,11 +68,11 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo const theme = useTheme(); const {shouldUseNarrowLayout: displayNarrowHeader} = useResponsiveLayout(); const personalDetails = usePersonalDetails(); - const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); - const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true}); const taxRates = useMemo(() => getAllTaxRates(), []); - const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST); - const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST); + const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); + const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]); const cardFeedNamesWithType = useMemo(() => { return getCardFeedNamesWithType({workspaceCardFeeds, translate}); From 3f6dae19da783712cc45a4c735afa31b5da49431 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 24 Apr 2025 15:10:42 +0530 Subject: [PATCH 16/41] fix: clear button alignment and split amount input padding. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 5 +++-- src/components/TextInput/TextInputClearButton/index.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 8f2c8bf05031..573526b4e07f 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -646,12 +646,12 @@ function MoneyRequestConfirmationList({ formatAmountOnBlur prefixContainerStyle={[styles.pv0]} inputStyle={[styles.optionRowAmountInput]} - containerStyle={[styles.textInputContainer, styles.pl2]} + containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} onFormatAmount={convertToDisplayStringWithoutCurrency} onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))} maxLength={formattedTotalAmount.length} - contentWidth={formattedTotalAmount.length * 8 + 8} + contentWidth={formattedTotalAmount.length * 8 + 12} /> ), })); @@ -665,6 +665,7 @@ function MoneyRequestConfirmationList({ selectedParticipants, styles.flexWrap, styles.pl2, + styles.pr1, styles.textLabel, styles.pv0, styles.optionRowAmountInput, diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index 106ae4439b8d..d41af6b9ca0a 100644 --- a/src/components/TextInput/TextInputClearButton/index.tsx +++ b/src/components/TextInput/TextInputClearButton/index.tsx @@ -19,7 +19,7 @@ function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { return ( { From 888db4c8174e8ce4175ee43bf3db9ecd7ad17084 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 24 Apr 2025 15:34:56 +0530 Subject: [PATCH 17/41] fix: padding bottom of multiline inputs. Signed-off-by: krishna2323 --- src/styles/index.ts | 4 ++-- src/styles/utils/index.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 409b7ca61cfb..c6fe45f02c65 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1253,14 +1253,14 @@ const styles = (theme: ThemeColors) => autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) => ({ - height: lodashClamp(textInputHeight, minHeight, maxHeight), + height: lodashClamp(textInputHeight, minHeight, maxHeight) + 8, minHeight, } satisfies ViewStyle), autoGrowHeightHiddenInput: (maxWidth: number, maxHeight?: number) => ({ maxWidth, - maxHeight: maxHeight && maxHeight + 1, + maxHeight: maxHeight && maxHeight + 1 + 8, overflow: 'hidden', } satisfies TextStyle), diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ebb38908581d..60e04bf40ae2 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1314,7 +1314,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.borderWidth, + height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth + 8, }; }, @@ -1334,7 +1334,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.borderWidth} : {}; + return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth + 8} : {}; }, /** From b4cfbe026b7f0c35c6ec0d7bd48c4073d8d05734 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 24 Apr 2025 15:51:36 +0530 Subject: [PATCH 18/41] fix: split input alignment. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 573526b4e07f..ae2832912c8d 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -644,7 +644,7 @@ function MoneyRequestConfirmationList({ hideFocusedState={false} hideCurrencySymbol formatAmountOnBlur - prefixContainerStyle={[styles.pv0]} + prefixContainerStyle={[styles.pv0, styles.h100]} inputStyle={[styles.optionRowAmountInput]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} @@ -666,6 +666,7 @@ function MoneyRequestConfirmationList({ styles.flexWrap, styles.pl2, styles.pr1, + styles.h100, styles.textLabel, styles.pv0, styles.optionRowAmountInput, From d88f979504e7a3fa8ce3fd531845f88ede2cf87c Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 25 Apr 2025 14:10:35 +0530 Subject: [PATCH 19/41] remove extra top padding from search page input. Signed-off-by: krishna2323 --- src/components/Search/SearchAutocompleteInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index 2a0b4a816e0d..f8364f95e4b8 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -208,7 +208,7 @@ function SearchAutocompleteInput( maxLength={CONST.SEARCH_QUERY_LIMIT} onSubmitEditing={onSubmit} shouldUseDisabledStyles={false} - textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3, styles.pt1]} + textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3, styles.pt0]} inputStyle={[inputWidth, {lineHeight: undefined}]} placeholderTextColor={theme.textSupporting} onFocus={() => { From cd50229f1865e0d7ee9cd974be6dbc994d4736d5 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 28 Apr 2025 21:58:59 +0530 Subject: [PATCH 20/41] align text input icon to center. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 8 +++++++- .../TextInput/BaseTextInput/implementation/index.tsx | 8 +++++++- src/components/TextInput/TextInputClearButton/index.tsx | 2 +- src/styles/index.ts | 6 +++++- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 435490399004..c38520f13c99 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -411,7 +411,13 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 0859d9583322..528364d74d70 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -441,7 +441,13 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index d41af6b9ca0a..778bfb2b9685 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/styles/index.ts b/src/styles/index.ts index 1d3f6f08e23a..6371008f6aeb 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1353,9 +1353,13 @@ const styles = (theme: ThemeColors) => textInputDesktop: addOutlineWidth(theme, {}, 0), + textInputIconContainerPaddingTop: { + paddingTop: 9, + }, + textInputIconContainer: { paddingHorizontal: 11, - justifyContent: 'center', + paddingTop: 9, }, textInputLeftIconContainer: { From c6c9806a27a1a6416e34b5681038a897a03e485d Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 28 Apr 2025 23:39:53 +0530 Subject: [PATCH 21/41] fix magic code input height and padding top. Signed-off-by: krishna2323 --- src/components/MagicCodeInput.tsx | 2 +- src/styles/index.ts | 2 +- src/styles/utils/index.ts | 2 +- src/styles/utils/spacing.ts | 4 ++++ 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index 29e1f0540497..f00189ff7c40 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -437,7 +437,7 @@ function MagicCodeInput( StyleUtils.getHeightOfMagicCodeInput(), hasError || errorText ? styles.borderColorDanger : {}, focusedIndex === index ? styles.borderColorFocus : {}, - styles.pt1, + styles.pt0half, ]} > {decomposeString(value, maxLength).at(index) ?? ''} diff --git a/src/styles/index.ts b/src/styles/index.ts index 6371008f6aeb..59d2cadd792f 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3345,7 +3345,7 @@ const styles = (theme: ThemeColors) => magicCodeInputContainer: { flexDirection: 'row', justifyContent: 'space-between', - minHeight: variables.inputHeight, + height: variables.inputHeight, }, magicCodeInput: { diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 0a0717eaeafb..07e695ccc95b 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1517,7 +1517,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Return the height of magic code input container */ - getHeightOfMagicCodeInput: (): ViewStyle => ({height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderWidth}), + getHeightOfMagicCodeInput: (): ViewStyle => ({height: styles.magicCodeInputContainer.height - styles.textInputContainer.borderWidth}), /** * Generate fill color of an icon based on its state. diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index 1dade5576a78..9916e2d6e8e0 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -611,6 +611,10 @@ export default { paddingTop: 0, }, + pt0half: { + paddingTop: 2, + }, + pt1: { paddingTop: 4, }, From 3271bf312feb67ce53cf19a31ca144b0f95089ef Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 29 Apr 2025 00:46:54 +0530 Subject: [PATCH 22/41] fix input height. Signed-off-by: krishna2323 --- src/components/MagicCodeInput.tsx | 2 +- src/styles/index.ts | 14 +++++++------- src/styles/utils/index.ts | 6 +++--- src/styles/variables.ts | 4 ++-- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/MagicCodeInput.tsx b/src/components/MagicCodeInput.tsx index f00189ff7c40..9f1b6811a1f8 100644 --- a/src/components/MagicCodeInput.tsx +++ b/src/components/MagicCodeInput.tsx @@ -437,7 +437,7 @@ function MagicCodeInput( StyleUtils.getHeightOfMagicCodeInput(), hasError || errorText ? styles.borderColorDanger : {}, focusedIndex === index ? styles.borderColorFocus : {}, - styles.pt0half, + styles.pt0, ]} > {decomposeString(value, maxLength).at(index) ?? ''} diff --git a/src/styles/index.ts b/src/styles/index.ts index 59d2cadd792f..a42203ae42c6 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1325,7 +1325,7 @@ const styles = (theme: ThemeColors) => fontSize: variables.fontSizeNormal, lineHeight: variables.lineHeightXLarge, color: theme.text, - paddingTop: 17, + paddingTop: 15, paddingBottom: 8, paddingLeft: 0, borderWidth: 0, @@ -1337,7 +1337,7 @@ const styles = (theme: ThemeColors) => textInputMultilineContainer: { height: '100%', - paddingTop: 17, + paddingTop: 15, }, textInputAndIconContainer: (isMarkdownEnabled: boolean) => { @@ -1354,12 +1354,12 @@ const styles = (theme: ThemeColors) => textInputDesktop: addOutlineWidth(theme, {}, 0), textInputIconContainerPaddingTop: { - paddingTop: 9, + paddingTop: 8, }, textInputIconContainer: { paddingHorizontal: 11, - paddingTop: 9, + paddingTop: 8, }, textInputLeftIconContainer: { @@ -1396,7 +1396,7 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 9, + paddingTop: 7, paddingBottom: 8, }, @@ -1408,8 +1408,8 @@ const styles = (theme: ThemeColors) => display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 9, - paddingBottom: 10, + paddingTop: 7, + paddingBottom: 8, }, textInputPrefix: { diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 07e695ccc95b..170644fc49a9 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1314,7 +1314,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.borderWidth + 8, + height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2 + 8, }; }, @@ -1334,7 +1334,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.borderWidth + 8} : {}; + return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2 + 8} : {}; }, /** @@ -1517,7 +1517,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Return the height of magic code input container */ - getHeightOfMagicCodeInput: (): ViewStyle => ({height: styles.magicCodeInputContainer.height - styles.textInputContainer.borderWidth}), + 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 2bed8f71b382..f2577c0bb80b 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -117,12 +117,12 @@ export default { lineHeightSizeh2: getValueUsingPixelRatio(24, 28), lineHeighTaskTitle: getValueUsingPixelRatio(26, 30), lineHeightSignInHeroXSmall: getValueUsingPixelRatio(32, 37), - inputHeight: getValueUsingPixelRatio(54, 76), + inputHeight: getValueUsingPixelRatio(52, 72), inputHeightSmall: 28, formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), alternateTextHeight: getValueUsingPixelRatio(20, 24), - INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(18, 23), + INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21), sliderBarHeight: 8, sliderKnobSize: 26, checkboxLabelActiveOpacity: 0.7, From acadc8517a728d93260921c017ce5ecea96c6255 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 29 Apr 2025 01:13:31 +0530 Subject: [PATCH 23/41] minor fix. Signed-off-by: krishna2323 --- src/styles/utils/spacing.ts | 4 ---- src/styles/variables.ts | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index 9916e2d6e8e0..1dade5576a78 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -611,10 +611,6 @@ export default { paddingTop: 0, }, - pt0half: { - paddingTop: 2, - }, - pt1: { paddingTop: 4, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f2577c0bb80b..194049f52387 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -122,7 +122,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 f2b0262496f93584f614ce46b1f0a1a82b952ddd Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 30 Apr 2025 01:30:20 +0530 Subject: [PATCH 24/41] fix prefix/suffix alignment and right icon hit area. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.tsx | 2 +- .../TextInput/TextInputClearButton/index.tsx | 2 +- src/styles/index.ts | 12 +++++------- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index c38520f13c99..6dcce839d9c7 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -412,7 +412,7 @@ function BaseTextInput( size="small" color={theme.iconSuccessFill} style={[ - styles.textInputIconContainerPaddingTop, + styles.textInputIconContainerMarginTop, styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 528364d74d70..c0f774781ac8 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -442,7 +442,7 @@ function BaseTextInput( size="small" color={theme.iconSuccessFill} style={[ - styles.textInputIconContainerPaddingTop, + styles.textInputIconContainerMarginTop, styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index 778bfb2b9685..b87b7c7c4b99 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/styles/index.ts b/src/styles/index.ts index a42203ae42c6..4a60616f53a2 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1353,13 +1353,13 @@ const styles = (theme: ThemeColors) => textInputDesktop: addOutlineWidth(theme, {}, 0), - textInputIconContainerPaddingTop: { - paddingTop: 8, + textInputIconContainerMarginTop: { + marginTop: 8, }, textInputIconContainer: { paddingHorizontal: 11, - paddingTop: 8, + marginTop: 8, }, textInputLeftIconContainer: { @@ -1392,11 +1392,10 @@ const styles = (theme: ThemeColors) => position: 'absolute', left: 0, top: 0, - height: variables.inputHeight, display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 7, + paddingTop: 15, paddingBottom: 8, }, @@ -1404,11 +1403,10 @@ const styles = (theme: ThemeColors) => position: 'absolute', right: 0, top: 0, - height: variables.inputHeight, display: 'flex', flexDirection: 'row', alignItems: 'center', - paddingTop: 7, + paddingTop: 15, paddingBottom: 8, }, From 7683c2754f705b7fe876a3b831724d791a8a362e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 1 May 2025 04:55:28 +0530 Subject: [PATCH 25/41] fix disabled input styles. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 3 ++- .../TextInput/BaseTextInput/implementation/index.tsx | 5 ++++- src/styles/index.ts | 5 ++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 171c20bf1424..ab5c5e0d8313 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -258,6 +258,7 @@ function BaseTextInput( (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, + inputProps.disabled && styles.textInputDisabledContainer, ]); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); @@ -298,7 +299,7 @@ function BaseTextInput( <> {/* Adding this background to the label only for multiline text input, to prevent text overlapping with label when scrolling */} - {isMultiline && } + {isMultiline && } {/* Adding this background to the label only for multiline text input, to prevent text overlapping with label when scrolling */} - {isMultiline && } + {isMultiline && ( + + )} borderColor: theme.danger, }, - textInputDisabled: { + textInputDisabledContainer: { // Adding disabled color theme to indicate user that the field is not editable. backgroundColor: theme.highlightBG, borderWidth: 1, @@ -1072,6 +1072,9 @@ const styles = (theme: ThemeColors) => paddingBottom: 0, borderRadius: 8, borderColor: theme.borderLighter, + }, + + textInputDisabled: { // Adding browser specefic style to bring consistency between Safari and other platforms. // Applying the Webkit styles only to browsers as it is not available in native. ...(getBrowser() From 2b2516f669f13cb47c0cc8f21ef15bd4aa4a5211 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 7 May 2025 05:08:13 +0530 Subject: [PATCH 26/41] update styles. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 8 +------- .../TextInput/BaseTextInput/implementation/index.tsx | 8 +------- src/components/TextInput/TextInputClearButton/index.tsx | 2 +- src/styles/index.ts | 4 ++-- src/styles/utils/index.ts | 4 ++-- 5 files changed, 7 insertions(+), 19 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index ab5c5e0d8313..e96b659010bf 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -415,13 +415,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 162a8104610e..a9a2c620b9e3 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -447,13 +447,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx index b87b7c7c4b99..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/styles/index.ts b/src/styles/index.ts index 0dc676c1e311..3dfaae37d035 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1270,14 +1270,14 @@ const styles = (theme: ThemeColors) => autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) => ({ - height: lodashClamp(textInputHeight, minHeight, maxHeight) + 8, + height: lodashClamp(textInputHeight, minHeight, maxHeight), minHeight, } satisfies ViewStyle), autoGrowHeightHiddenInput: (maxWidth: number, maxHeight?: number) => ({ maxWidth, - maxHeight: maxHeight && maxHeight + 1 + 8, + maxHeight: maxHeight && maxHeight + 1, overflow: 'hidden', } satisfies TextStyle), diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 942a51613206..76aee815fd3f 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1314,7 +1314,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.borderWidth * 2 + 8, + height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2, }; }, @@ -1334,7 +1334,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.borderWidth * 2 + 8} : {}; + return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {}; }, /** From 39e4c8fded9e8bac3d6807216ba7d34e85a66dbf Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 7 May 2025 05:31:02 +0530 Subject: [PATCH 27/41] remove padding top when input doesn't have label. Signed-off-by: krishna2323 --- src/components/Search/SearchAutocompleteInput.tsx | 2 +- src/components/TextInput/BaseTextInput/implementation/index.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index f8364f95e4b8..00d77f62ce2d 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -208,7 +208,7 @@ function SearchAutocompleteInput( maxLength={CONST.SEARCH_QUERY_LIMIT} onSubmitEditing={onSubmit} shouldUseDisabledStyles={false} - textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3, styles.pt0]} + textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]} inputStyle={[inputWidth, {lineHeight: undefined}]} placeholderTextColor={theme.textSupporting} onFocus={() => { diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index a9a2c620b9e3..06173620a210 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -272,6 +272,7 @@ function BaseTextInput( autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer, + !hasLabel && styles.pt0, ]); const isMultiline = multiline || autoGrowHeight; From e2fb5da731815812f8e4eae7c9a2ac21470154df Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 8 May 2025 05:44:13 +0530 Subject: [PATCH 28/41] fix: input label animation on native and line height. Signed-off-by: krishna2323 --- .../implementation/index.native.tsx | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index e96b659010bf..85b4595fedf6 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'; @@ -119,8 +119,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], ); @@ -181,9 +191,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 @@ -259,6 +271,7 @@ function BaseTextInput( autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && styles.textInputDisabledContainer, + !hasLabel && styles.pt0, ]); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); From 65af8da67813f85eee5bae9f2d701657446a5145 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 8 May 2025 10:04:54 +0530 Subject: [PATCH 29/41] fix: split amount input. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 1 + src/components/MoneyRequestConfirmationList.tsx | 4 +++- .../TextInput/BaseTextInput/implementation/index.native.tsx | 3 ++- src/components/TextInput/BaseTextInput/types.ts | 3 +++ 4 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index d488800d16db..501a92a0bcdd 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -87,6 +87,7 @@ function AmountTextInput( autoCorrect={false} spellCheck={false} disableKeyboardShortcuts + shouldUseFullInputHeight // eslint-disable-next-line react/jsx-props-no-spreading {...rest} /> diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index bffd5525423e..79aebd50c73e 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -27,6 +27,7 @@ import { } from '@libs/actions/IOU'; import {convertToBackendAmount, convertToDisplayString, convertToDisplayStringWithoutCurrency, getCurrencyDecimals} from '@libs/CurrencyUtils'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; +import getPlatform from '@libs/getPlatform'; import {calculateAmount, insertTagIntoTransactionTagsString, isMovingTransactionFromTrackExpense as isMovingTransactionFromTrackExpenseUtil} from '@libs/IOUUtils'; import Log from '@libs/Log'; import {validateAmount} from '@libs/MoneyRequestUtils'; @@ -629,6 +630,7 @@ function MoneyRequestConfirmationList({ const currencySymbol = currencyList?.[iouCurrencyCode ?? '']?.symbol ?? iouCurrencyCode; const formattedTotalAmount = convertToDisplayStringWithoutCurrency(iouAmount, iouCurrencyCode); + const isNativePlatform = getPlatform() === CONST.PLATFORM.IOS || getPlatform() === CONST.PLATFORM.ANDROID; return [payeeOption, ...selectedParticipants].map((participantOption: Participant) => ({ ...participantOption, @@ -646,7 +648,7 @@ function MoneyRequestConfirmationList({ hideFocusedState={false} hideCurrencySymbol formatAmountOnBlur - prefixContainerStyle={[styles.pv0, styles.h100]} + prefixContainerStyle={[!isNativePlatform && styles.pv0, styles.h100]} inputStyle={[styles.optionRowAmountInput]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 85b4595fedf6..42e902742a90 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -47,6 +47,7 @@ function BaseTextInput( touchableInputWrapperStyle, containerStyles, inputStyle, + shouldUseFullInputHeight = false, forceActiveLabel = false, disableKeyboard = false, autoGrow = false, @@ -278,7 +279,7 @@ function BaseTextInput( 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 ( <> diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index c70612c94b16..a721da0215da 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -171,6 +171,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; From 7d658a612989f3c5fd34c75ce2e14a362d90b578 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 12 May 2025 00:31:03 +0530 Subject: [PATCH 30/41] remove duplicate styles. Signed-off-by: krishna2323 --- src/styles/index.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 9d4de46de02e..648dd1f00a9a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1090,10 +1090,6 @@ const styles = (theme: ThemeColors) => textInputDisabledContainer: { // Adding disabled color theme to indicate user that the field is not editable. backgroundColor: theme.highlightBG, - borderWidth: 1, - padding: 8, - paddingBottom: 0, - borderRadius: 8, borderColor: theme.borderLighter, }, @@ -1379,10 +1375,6 @@ const styles = (theme: ThemeColors) => textInputDesktop: addOutlineWidth(theme, {}, 0), - textInputIconContainerMarginTop: { - marginTop: 8, - }, - textInputIconContainer: { paddingHorizontal: 11, marginTop: 8, From f6aedc393601f6da0a88134101685af49d6322c6 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 13 May 2025 12:59:19 +0530 Subject: [PATCH 31/41] fix split input padding. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.native.tsx | 2 +- src/components/TextInput/BaseTextInput/implementation/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index ed3d07a983f3..6cb980cc001a 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -655,7 +655,7 @@ function MoneyRequestConfirmationList({ onFormatAmount={convertToDisplayStringWithoutCurrency} onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))} maxLength={formattedTotalAmount.length} - contentWidth={formattedTotalAmount.length * 8 + 12} + contentWidth={formattedTotalAmount.length * 8} /> ), })); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 99a85eb90e2b..11dac3afa0ef 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -260,7 +260,7 @@ 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), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 06173620a210..fe6da94916fb 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -266,7 +266,7 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth), + (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, From 385fc15dab433683468b7e2cccaa75fb921e1288 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 13 May 2025 12:59:46 +0530 Subject: [PATCH 32/41] minor update. 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 fe6da94916fb..20441aee5928 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -266,7 +266,7 @@ function BaseTextInput( const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding), + (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}, From ddf7f93a687f0180ba8ec0b53878c2029f252ed5 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 16 May 2025 01:49:18 +0530 Subject: [PATCH 33/41] fix multipline input padding bottom. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 11dac3afa0ef..5bd4eba73905 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -275,6 +275,7 @@ function BaseTextInput( // Height fix is needed only for Text single line inputs const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled; + const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; return ( <> @@ -290,7 +291,11 @@ function BaseTextInput( style={[ autoGrowHeight && !isAutoGrowHeightMarkdown && - styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), + styles.autoGrowHeightInputContainer( + textInputHeight + (shouldAddPaddingBottom ? 8 : 0), + variables.componentSizeLarge, + typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, + ), isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge}, !isMultiline && styles.componentHeightLarge, touchableInputWrapperStyle, @@ -385,6 +390,7 @@ function BaseTextInput( // Add disabled color theme when field is not editable. inputProps.disabled && styles.textInputDisabled, styles.pointerEventsAuto, + shouldAddPaddingBottom && styles.pb1, ]} multiline={isMultiline} maxLength={maxLength} From 7c4363b7b0440102a668ce103db25c5677414753 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 20 May 2025 03:59:19 +0530 Subject: [PATCH 34/41] minor updates. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 2 +- .../TextInput/BaseTextInput/implementation/index.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index a9f0ed4834d4..2348f9146907 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -314,7 +314,7 @@ function BaseTextInput( <> {/* Adding this background to the label only for multiline text input, to prevent text overlapping with label when scrolling */} - {isMultiline && } + {isMultiline && } + )} Date: Wed, 21 May 2025 15:06:06 +0530 Subject: [PATCH 35/41] fix input label position in for native devices. Signed-off-by: krishna2323 --- .../TextInput/TextInputLabel/index.native.tsx | 15 +++++++++------ .../TextInput/TextInputLabel/index.tsx | 2 +- src/styles/index.ts | 18 +++++++++++++----- 3 files changed, 23 insertions(+), 12 deletions(-) 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/styles/index.ts b/src/styles/index.ts index 074eb24341e4..2703480da810 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1312,19 +1312,22 @@ const styles = (theme: ThemeColors) => textAlign: 'right', }, - textInputLabel: { + textInputLabelContainer: { position: 'absolute', 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, @@ -1333,9 +1336,14 @@ 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]), From 578cc522628da96a0bee82dbcfd1f8e603db059c Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 23 May 2025 01:09:16 +0530 Subject: [PATCH 36/41] fix merge conflicts. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.native.tsx | 2 +- src/components/TextInput/BaseTextInput/implementation/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 34d14589a074..c54f59d76b9f 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -421,7 +421,7 @@ function BaseTextInput( )} {((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && ( { setValue(''); onClearInput?.(); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 043d2bd096b9..d815a41dcb7a 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -443,7 +443,7 @@ function BaseTextInput( }} > { setValue(''); onClearInput?.(); From 8b3f3e0aa842c45badef8df2af26cb36e56a39ef Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 23 May 2025 14:52:48 +0530 Subject: [PATCH 37/41] fix split input alignment. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 4 ++-- src/components/TextInput/index.native.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index da42ae366d43..ce3e17ef6f2d 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -643,8 +643,8 @@ function MoneyRequestConfirmationList({ hideFocusedState={false} hideCurrencySymbol formatAmountOnBlur - prefixContainerStyle={[!isNativePlatform && styles.pv0, styles.h100]} - inputStyle={[styles.optionRowAmountInput]} + prefixContainerStyle={[styles.pv0, styles.h100]} + inputStyle={[styles.optionRowAmountInput, isNativePlatform && {lineHeight: undefined}]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} onFormatAmount={convertToDisplayStringWithoutCurrency} 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 ); } From 36ef7d36108be38c25c80d134b65ffdb58f5e5fa Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 23 May 2025 15:56:16 +0530 Subject: [PATCH 38/41] minor fix. Signed-off-by: krishna2323 --- src/components/Search/SearchAutocompleteInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index 00d77f62ce2d..50749e303b79 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -209,7 +209,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?.(); From ef38871ca39fd2b746677e6db2e6b009a7c3d46e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 23 May 2025 16:06:40 +0530 Subject: [PATCH 39/41] remove isNativePlatform check. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index ce3e17ef6f2d..c34daf5caf67 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -27,7 +27,6 @@ import { } from '@libs/actions/IOU'; import {convertToBackendAmount, convertToDisplayString, convertToDisplayStringWithoutCurrency, getCurrencyDecimals} from '@libs/CurrencyUtils'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; -import getPlatform from '@libs/getPlatform'; import {calculateAmount, insertTagIntoTransactionTagsString, isMovingTransactionFromTrackExpense as isMovingTransactionFromTrackExpenseUtil} from '@libs/IOUUtils'; import Log from '@libs/Log'; import {validateAmount} from '@libs/MoneyRequestUtils'; @@ -625,7 +624,6 @@ function MoneyRequestConfirmationList({ const currencySymbol = currencyList?.[iouCurrencyCode ?? '']?.symbol ?? iouCurrencyCode; const formattedTotalAmount = convertToDisplayStringWithoutCurrency(iouAmount, iouCurrencyCode); - const isNativePlatform = getPlatform() === CONST.PLATFORM.IOS || getPlatform() === CONST.PLATFORM.ANDROID; return [payeeOption, ...selectedParticipants].map((participantOption: Participant) => ({ ...participantOption, @@ -644,7 +642,7 @@ function MoneyRequestConfirmationList({ hideCurrencySymbol formatAmountOnBlur prefixContainerStyle={[styles.pv0, styles.h100]} - inputStyle={[styles.optionRowAmountInput, isNativePlatform && {lineHeight: undefined}]} + inputStyle={[styles.optionRowAmountInput, {lineHeight: undefined}]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} onFormatAmount={convertToDisplayStringWithoutCurrency} From 13e899b5e5b2c2eaa198b4aff66b005ac24318b8 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 26 May 2025 14:32:23 +0530 Subject: [PATCH 40/41] fix multiline input padding. Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 3 ++- .../BaseTextInput/implementation/index.native.tsx | 6 +++--- .../TextInput/BaseTextInput/implementation/index.tsx | 8 +++++++- src/styles/index.ts | 7 +++++++ 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index bf679dc151fd..c1720a677c8e 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -650,7 +650,7 @@ function MoneyRequestConfirmationList({ hideCurrencySymbol formatAmountOnBlur prefixContainerStyle={[styles.pv0, styles.h100]} - inputStyle={[styles.optionRowAmountInput, {lineHeight: undefined}]} + inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]} containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]} touchableInputWrapperStyle={[styles.ml3]} onFormatAmount={convertToDisplayStringWithoutCurrency} @@ -674,6 +674,7 @@ function MoneyRequestConfirmationList({ styles.h100, styles.textLabel, styles.pv0, + styles.lineHeightUndefined, styles.optionRowAmountInput, styles.textInputContainer, styles.ml3, diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index c54f59d76b9f..4d0d95eb1334 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -252,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 @@ -269,6 +270,7 @@ function BaseTextInput( isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && styles.textInputDisabledContainer, !hasLabel && styles.pt0, + shouldAddPaddingBottom && styles.pb1, ]); const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft); @@ -276,7 +278,6 @@ function BaseTextInput( // Height fix is needed only for Text single line inputs const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled; - const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; return ( <> @@ -293,7 +294,7 @@ function BaseTextInput( autoGrowHeight && !isAutoGrowHeightMarkdown && styles.autoGrowHeightInputContainer( - textInputHeight + (shouldAddPaddingBottom ? 8 : 0), + textInputHeight + (shouldAddPaddingBottom ? styles.textInputContainer.padding : 0), variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, ), @@ -391,7 +392,6 @@ function BaseTextInput( // Add disabled color theme when field is not editable. inputProps.disabled && styles.textInputDisabled, styles.pointerEventsAuto, - shouldAddPaddingBottom && styles.pb1, ]} multiline={isMultiline} maxLength={maxLength} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index d815a41dcb7a..cbe735f976df 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -257,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 @@ -273,6 +274,7 @@ function BaseTextInput( isAutoGrowHeightMarkdown && styles.pb2, inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer, !hasLabel && styles.pt0, + shouldAddPaddingBottom && styles.pb1, ]); const isMultiline = multiline || autoGrowHeight; @@ -300,7 +302,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, diff --git a/src/styles/index.ts b/src/styles/index.ts index 01aaa872e077..d59fa8998c48 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, From 4e04574e98873ea23c6c75f72930ee8ca0b8f90c Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 27 May 2025 00:22:47 +0530 Subject: [PATCH 41/41] fix: TextInputClearButton margin top. Signed-off-by: krishna2323 --- src/components/TextInput/TextInputClearButton/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ( {