From 675c08c903833e132abd892b2801b439e0bfd3f1 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 28 May 2025 21:50:48 +0530 Subject: [PATCH 1/6] fix: Clear/calendar button is aligned to top instead of in the middle of input modal. Signed-off-by: krishna2323 --- .../BaseTextInput/implementation/index.native.tsx | 13 ++++++++++--- .../BaseTextInput/implementation/index.tsx | 15 +++++++++++---- .../TextInput/TextInputClearButton/index.tsx | 6 ++++-- src/styles/index.ts | 5 ----- src/styles/utils/index.ts | 8 ++++++++ 5 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index c97cd5981855..27183a4f0570 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -421,6 +421,7 @@ function BaseTextInput( )} {((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && ( { setValue(''); onClearInput?.(); @@ -431,12 +432,18 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { event.preventDefault(); @@ -450,7 +457,7 @@ function BaseTextInput( )} {!inputProps.secureTextEntry && !!icon && ( - + { setValue(''); onClearInput?.(); @@ -456,16 +457,22 @@ function BaseTextInput( /> )} - {inputProps.isLoading !== undefined && ( + {inputProps.isLoading === undefined && ( )} {!!inputProps.secureTextEntry && ( { e.preventDefault(); @@ -479,7 +486,7 @@ function BaseTextInput( )} {!inputProps.secureTextEntry && !!icon && ( - + void; + containerStyles?: ViewStyle[]; }; -function TextInputClearButton({onPressButton}: TextInputClearButtonProps) { +function TextInputClearButton({onPressButton, containerStyles}: TextInputClearButtonProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); return ( { diff --git a/src/styles/index.ts b/src/styles/index.ts index b6cda7efedeb..68ee7c963fb1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1390,11 +1390,6 @@ const styles = (theme: ThemeColors) => textInputDesktop: addOutlineWidth(theme, {}, 0), - textInputIconContainer: { - paddingHorizontal: 11, - marginTop: 8, - }, - textInputLeftIconContainer: { justifyContent: 'center', paddingRight: 8, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index d7e69d3651a0..afcfe5f7ea70 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1339,6 +1339,14 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {}; }, + getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true) => { + const paddingStyle = includePadding ? {paddingHorizontal: 11} : {}; + return { + ...paddingStyle, + marginTop: hasLabel ? 8 : 16, + }; + }, + /** * Return the style from an avatar size constant */ From fcb32ac96c4fa3d4ebbcd3101e0ad0a025265eca Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 28 May 2025 22:01:15 +0530 Subject: [PATCH 2/6] minor fix. Signed-off-by: krishna2323 --- .../TextInput/BaseTextInput/implementation/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 55572d5c584c..38796a653801 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -457,7 +457,7 @@ function BaseTextInput( /> )} - {inputProps.isLoading === undefined && ( + {inputProps.isLoading !== undefined && ( )} From 0c90db652feb88e85737c917a24778ffc673f5be Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 28 May 2025 22:11:00 +0530 Subject: [PATCH 3/6] fix: No padding between the subtitle & the text inputs in people you may know modal. Signed-off-by: krishna2323 --- .../OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx index be15bf44326a..797f89df8ab1 100644 --- a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx +++ b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx @@ -73,7 +73,7 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard {translate('onboarding.peopleYouMayKnow')} - {translate('onboarding.workspaceYouMayJoin', {domain, email})} + {translate('onboarding.workspaceYouMayJoin', {domain, email})} { From bb662488024c0fc4696eecbf648f919dd6d66601 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 28 May 2025 22:44:46 +0530 Subject: [PATCH 4/6] fix: Status - There is spacing after hours in time input page. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 5 ++--- .../TextInput/BaseTextInput/implementation/index.native.tsx | 4 +++- .../TextInput/BaseTextInput/implementation/index.tsx | 5 ++++- src/components/TextInput/BaseTextInput/types.ts | 3 +++ 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 501a92a0bcdd..fa41a73a6f08 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type {ForwardedRef} from 'react'; import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native'; -import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type {TextSelection} from './Composer/types'; import TextInput from './TextInput'; @@ -59,7 +58,6 @@ function AmountTextInput( }: AmountTextInputProps, ref: ForwardedRef, ) { - const styles = useThemeStyles(); return ( = StyleSheet.flatten([ styles.textInputContainer, + !shouldApplyPaddingToContainer && styles.p0, textInputContainerStyles, - !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2), + !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)), autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide), !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 38796a653801..4032ccfc4b16 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -46,6 +46,7 @@ function BaseTextInput( icon = null, iconLeft = null, textInputContainerStyles, + shouldApplyPaddingToContainer = true, touchableInputWrapperStyle, containerStyles, inputStyle, @@ -264,10 +265,12 @@ function BaseTextInput( // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const inputHelpText = errorText || hint; const newPlaceholder = !!prefixCharacter || !!suffixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined; + const newTextInputContainerStyles: StyleProp = StyleSheet.flatten([ styles.textInputContainer, + !shouldApplyPaddingToContainer && styles.p0, textInputContainerStyles, - (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2), + (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)), !hideFocusedState && isFocused && styles.borderColorFocus, (!!hasError || !!errorText) && styles.borderColorDanger, autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined}, diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 21b82ffd7e2a..18bd739fc8e4 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -33,6 +33,9 @@ type CustomBaseTextInputProps = { /** Customize the TextInput container */ textInputContainerStyles?: StyleProp; + /** Whether to apply padding to the input */ + shouldApplyPaddingToContainer?: boolean; + /** Customizes the touchable wrapper of the TextInput component */ touchableInputWrapperStyle?: StyleProp; From 76ff95c641a320be11b49d460de9a1150b9951fe Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 28 May 2025 23:20:30 +0530 Subject: [PATCH 5/6] fix: Placeholders for the new text inputs are not centered in Test drive screen. Signed-off-by: krishna2323 --- src/components/Search/SearchAutocompleteInput.tsx | 2 +- .../BaseTextInput/implementation/index.native.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index 83e4a9996dd6..0be67d09a3a8 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -207,7 +207,7 @@ function SearchAutocompleteInput( onSubmitEditing={onSubmit} shouldUseDisabledStyles={false} textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]} - inputStyle={[inputWidth]} + inputStyle={[inputWidth, styles.lineHeightUndefined]} placeholderTextColor={theme.textSupporting} onFocus={() => { onFocus?.(); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index a941a325ceb3..6fc6a6c58cf0 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -43,7 +43,7 @@ function BaseTextInput( iconLeft = null, icon = null, textInputContainerStyles, - shouldApplyPaddingToContainer, + shouldApplyPaddingToContainer = true, touchableInputWrapperStyle, containerStyles, inputStyle, @@ -112,6 +112,7 @@ function BaseTextInput( const labelTranslateY = useSharedValue(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y); const input = useRef(null); const isLabelActive = useRef(initialActiveLabel); + const hasLabel = !!label?.length; useHtmlPaste(input, undefined, isMarkdownEnabled); @@ -190,10 +191,10 @@ function BaseTextInput( setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth)); setHeight((prevHeight: number) => - !multiline ? layout.height + heightToFitEmojis - (styles.textInputContainer.padding + styles.textInputContainer.borderWidth * 2) : prevHeight, + !multiline ? layout.height + heightToFitEmojis - ((hasLabel ? styles.textInputContainer.padding : 0) + styles.textInputContainer.borderWidth * 2) : prevHeight, ); }, - [autoGrowHeight, multiline, styles.textInputContainer], + [autoGrowHeight, multiline, styles.textInputContainer, hasLabel], ); // The ref is needed when the component is uncontrolled and we don't have a value prop @@ -254,7 +255,6 @@ function BaseTextInput( }, []); const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge; - const hasLabel = !!label?.length; const isReadOnly = inputProps.readOnly ?? inputProps.disabled; // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing From e39795f7d1f099c4629e5393ef3ca6b6918f4ea4 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 29 May 2025 04:11:28 +0530 Subject: [PATCH 6/6] minor updates. Signed-off-by: krishna2323 --- src/components/AmountTextInput.tsx | 2 +- .../BaseTextInput/implementation/index.native.tsx | 8 ++++---- .../TextInput/BaseTextInput/implementation/index.tsx | 2 +- src/components/TextInput/BaseTextInput/types.ts | 2 +- src/styles/utils/index.ts | 4 ++++ 5 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index fa41a73a6f08..e5b107c053a5 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -65,7 +65,7 @@ function AmountTextInput( shouldInterceptSwipe disableKeyboard={disableKeyboard} inputStyle={style} - textInputContainerStyles={[containerStyle]} + textInputContainerStyles={containerStyle} shouldApplyPaddingToContainer={false} onChangeText={onChangeAmount} ref={ref} diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx index 6fc6a6c58cf0..2ab29eff4211 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx @@ -190,9 +190,9 @@ function BaseTextInput( const heightToFitEmojis = 1; setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth)); - setHeight((prevHeight: number) => - !multiline ? layout.height + heightToFitEmojis - ((hasLabel ? styles.textInputContainer.padding : 0) + styles.textInputContainer.borderWidth * 2) : prevHeight, - ); + const borderWidth = styles.textInputContainer.borderWidth * 2; + const labelPadding = hasLabel ? styles.textInputContainer.padding : 0; + setHeight((prevHeight: number) => (!multiline ? layout.height + heightToFitEmojis - (labelPadding + borderWidth) : prevHeight)); }, [autoGrowHeight, multiline, styles.textInputContainer, hasLabel], ); @@ -445,7 +445,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { event.preventDefault(); diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx index 4032ccfc4b16..519ccb458aac 100644 --- a/src/components/TextInput/BaseTextInput/implementation/index.tsx +++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx @@ -475,7 +475,7 @@ function BaseTextInput( )} {!!inputProps.secureTextEntry && ( { e.preventDefault(); diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts index 18bd739fc8e4..5ab8a65233e9 100644 --- a/src/components/TextInput/BaseTextInput/types.ts +++ b/src/components/TextInput/BaseTextInput/types.ts @@ -33,7 +33,7 @@ type CustomBaseTextInputProps = { /** Customize the TextInput container */ textInputContainerStyles?: StyleProp; - /** Whether to apply padding to the input */ + /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input */ shouldApplyPaddingToContainer?: boolean; /** Customizes the touchable wrapper of the TextInput component */ diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index afcfe5f7ea70..8904466ac739 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1339,6 +1339,10 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {}; }, + /** + * Computes styles for the text input icon container. + * Applies horizontal padding if requested, and sets the top margin based on the presence of a label. + */ getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true) => { const paddingStyle = includePadding ? {paddingHorizontal: 11} : {}; return {