Add 'shouldLabelStayOnSingleLine' prop to BaseTextInput and TextInputLabel components

This update introduces a new prop to control the label's behavior in multiline inputs, ensuring it can remain on a single line and ellipsize as needed. The prop has been added to the relevant types, implementations, and usage in AddAIRulePage and EditAIRulePage components.

Author: NicolasBonet

src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -64,6 +64,7 @@ function BaseTextInput({
     shouldRenderHintAsHTML = false,
     onInputChange = () => {},
     multiline = false,
+    shouldLabelStayOnSingleLine = false,
     autoCorrect = true,
     prefixCharacter = '',
     suffixCharacter = '',
@@ -345,6 +346,7 @@ function BaseTextInput({
                                 labelScale={labelScale}
                                 for={inputProps.nativeID}
                                 isMultiline={isMultiline}
+                                shouldLabelStayOnSingleLine={shouldLabelStayOnSingleLine}
                             />
                         ) : null}
                         {hiddenLabel}

src/components/TextInput/BaseTextInput/implementation/index.tsx

@@ -63,6 +63,7 @@ function BaseTextInput({
     shouldRenderHintAsHTML = false,
     onInputChange = () => {},
     multiline = false,
+    shouldLabelStayOnSingleLine = false,
     shouldInterceptSwipe = false,
     autoCorrect = true,
     prefixCharacter = '',
@@ -392,6 +393,7 @@ function BaseTextInput({
                                     labelScale={labelScale}
                                     for={inputProps.nativeID}
                                     isMultiline={isMultiline}
+                                    shouldLabelStayOnSingleLine={shouldLabelStayOnSingleLine}
                                 />
                             </>
                         ) : null}

src/components/TextInput/BaseTextInput/types.ts

@@ -117,6 +117,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
         /** Indicate whether input is multiline */
         multiline?: boolean;
 
+        /** Force the floating label to render on a single line and ellipsize even when the input is multiline */
+        shouldLabelStayOnSingleLine?: boolean;
+
         /** Set the default value to the input if there is a valid saved value */
         shouldUseDefaultValue?: boolean;
 

src/components/TextInput/TextInputLabel/index.native.tsx

@@ -3,8 +3,9 @@ import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type TextInputLabelProps from './types';
 
-function TextInputLabel({label, labelScale, labelTranslateY, isMultiline}: TextInputLabelProps) {
+function TextInputLabel({label, labelScale, labelTranslateY, isMultiline, shouldLabelStayOnSingleLine}: TextInputLabelProps) {
     const styles = useThemeStyles();
+    const shouldClipToSingleLine = !isMultiline || shouldLabelStayOnSingleLine;
 
     const animatedStyle = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale));
     const animatedStyleForText = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale, true));
@@ -15,8 +16,8 @@ function TextInputLabel({label, labelScale, labelTranslateY, isMultiline}: TextI
                 accessible={false}
                 accessibilityElementsHidden
                 importantForAccessibility="no"
-                numberOfLines={!isMultiline ? 1 : undefined}
-                ellipsizeMode={!isMultiline ? 'tail' : undefined}
+                numberOfLines={shouldClipToSingleLine ? 1 : undefined}
+                ellipsizeMode={shouldClipToSingleLine ? 'tail' : undefined}
                 allowFontScaling={false}
                 style={[styles.textInputLabel, animatedStyleForText]}
             >

src/components/TextInput/TextInputLabel/index.tsx

@@ -7,7 +7,8 @@ import CONST from '@src/CONST';
 import textRef from '@src/types/utils/textRef';
 import type TextInputLabelProps from './types';
 
-function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale, isMultiline}: TextInputLabelProps) {
+function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale, isMultiline, shouldLabelStayOnSingleLine}: TextInputLabelProps) {
+    const shouldClipToSingleLine = !isMultiline || shouldLabelStayOnSingleLine;
     const styles = useThemeStyles();
     const labelRef = useRef<Text | HTMLFormElement>(null);
 
@@ -23,8 +24,8 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale,
 
     return (
         <Animated.Text
-            numberOfLines={!isMultiline ? 1 : undefined}
-            ellipsizeMode={!isMultiline ? 'tail' : undefined}
+            numberOfLines={shouldClipToSingleLine ? 1 : undefined}
+            ellipsizeMode={shouldClipToSingleLine ? 'tail' : undefined}
             ref={textRef(labelRef)}
             role={CONST.ROLE.PRESENTATION}
             accessible={false}

src/components/TextInput/TextInputLabel/types.ts

@@ -13,6 +13,9 @@ type TextInputLabelProps = {
     /** Whether the input is multiline */
     isMultiline?: boolean;
 
+    /** Force the floating label to render on a single line and ellipsize even when the input is multiline */
+    shouldLabelStayOnSingleLine?: boolean;
+
     /** For attribute for label */
     for?: string;
 };

src/pages/workspace/rules/AIRules/AddAIRulePage.tsx

@@ -94,6 +94,7 @@ function AddAIRulePage({
                             role={CONST.ROLE.PRESENTATION}
                             onKeyPress={handleKeyPress}
                             multiline
+                            shouldLabelStayOnSingleLine
                             containerStyles={[styles.flex1]}
                             touchableInputWrapperStyle={[styles.flex1]}
                             textInputContainerStyles={[styles.flex1]}

src/pages/workspace/rules/AIRules/EditAIRulePage.tsx

@@ -141,6 +141,7 @@ function EditAIRulePage({
                             onKeyPress={handleKeyPress}
                             defaultValue={aiRule.prompt}
                             multiline
+                            shouldLabelStayOnSingleLine
                             containerStyles={[styles.flex1]}
                             touchableInputWrapperStyle={[styles.flex1]}
                             textInputContainerStyles={[styles.flex1]}