fix: adjust top padding for outlined input without label (#4086)

Author: lukewalczak

example/src/Examples/TextInputExample.tsx

@@ -661,6 +661,9 @@ const TextInputExample = () => {
                 error
               />
             </View>
+            <View style={styles.inputContainerStyle}>
+              <TextInput mode="outlined" placeholder="Outlined without label" />
+            </View>
             <View style={styles.inputContainerStyle}>
               <TextInput
                 mode="outlined"

src/components/TextInput/Addons/Outline.tsx

@@ -7,6 +7,8 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import { TextInputLabelProp } from '../types';
+
 type OutlineProps = {
   isV3: boolean;
   activeColor: string;
@@ -15,11 +17,13 @@ type OutlineProps = {
   focused?: boolean;
   outlineColor?: string;
   roundness?: number;
+  label?: TextInputLabelProp;
   style?: StyleProp<ViewStyle>;
 };
 
 export const Outline = ({
   isV3,
+  label,
   activeColor,
   backgroundColor,
   hasActiveOutline,
@@ -33,6 +37,7 @@ export const Outline = ({
     pointerEvents="none"
     style={[
       styles.outline,
+      !label && styles.noLabelOutline,
       // eslint-disable-next-line react-native/no-inline-styles
       {
         backgroundColor,
@@ -53,4 +58,7 @@ const styles = StyleSheet.create({
     top: 6,
     bottom: 0,
   },
+  noLabelOutline: {
+    top: 0,
+  },
 });

src/components/TextInput/TextInputOutlined.tsx

@@ -113,6 +113,8 @@ const TextInputOutlined = ({
     theme,
   });
 
+  const paddingTop = label ? LABEL_PADDING_TOP : 0;
+
   const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
   const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
 
@@ -139,7 +141,7 @@ const TextInputOutlined = ({
   }
 
   const minInputHeight =
-    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - LABEL_PADDING_TOP;
+    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - paddingTop;
 
   const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
 
@@ -315,6 +317,7 @@ const TextInputOutlined = ({
       <Outline
         isV3={isV3}
         style={outlineStyle}
+        label={label}
         roundness={roundness}
         hasActiveOutline={hasActiveOutline}
         focused={parentState.focused}
@@ -327,7 +330,7 @@ const TextInputOutlined = ({
           style={[
             styles.labelContainer,
             {
-              paddingTop: LABEL_PADDING_TOP,
+              paddingTop,
               minHeight,
             },
           ]}

src/components/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -616,6 +616,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
           "right": 0,
           "top": 6,
         },
+        false,
         {
           "backgroundColor": "rgba(255, 251, 254, 1)",
           "borderColor": "rgba(121, 116, 126, 1)",