fix(text-input-label-background): custom component background height (#4442)

Author: seb-zabielski

src/components/TextInput/Label/InputLabel.tsx

@@ -20,6 +20,7 @@ const InputLabel = (props: InputLabelProps) => {
     focused,
     opacity,
     labelLayoutWidth,
+    labelLayoutHeight,
     labelBackground,
     label,
     labelError,
@@ -157,6 +158,7 @@ const InputLabel = (props: InputLabelProps) => {
           {labelBackground?.({
             labeled,
             labelLayoutWidth,
+            labelLayoutHeight,
             labelStyle,
             placeholderStyle,
             baseLabelTranslateX,

src/components/TextInput/Label/LabelBackground.tsx

@@ -7,10 +7,10 @@ import type { LabelBackgroundProps } from '../types';
 const LabelBackground = ({
   labeled,
   labelLayoutWidth,
+  labelLayoutHeight,
   placeholderStyle,
   baseLabelTranslateX,
   topPosition,
-  label,
   backgroundColor,
   roundness,
   labelStyle,
@@ -69,16 +69,15 @@ const LabelBackground = ({
         {
           top: topPosition + 1,
           width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
+          height: labelLayoutHeight,
           backgroundColor,
           opacity,
           transform: labelTextTransform,
         },
       ]}
       numberOfLines={1}
       maxFontSizeMultiplier={maxFontSizeMultiplier}
-    >
-      {typeof label === 'string' ? label : label?.props.children}
-    </AnimatedText>,
+    />,
   ];
 };
 

src/components/TextInput/TextInputFlat.tsx

@@ -380,6 +380,7 @@ const TextInputFlat = ({
             wiggle={Boolean(parentState.value && labelProps.labelError)}
             labelLayoutMeasured={parentState.labelLayout.measured}
             labelLayoutWidth={parentState.labelLayout.width}
+            labelLayoutHeight={parentState.labelLayout.height}
             {...labelProps}
           />
         ) : null}

src/components/TextInput/TextInputOutlined.tsx

@@ -368,6 +368,7 @@ const TextInputOutlined = ({
             wiggle={Boolean(parentState.value && labelProps.labelError)}
             labelLayoutMeasured={parentState.labelLayout.measured}
             labelLayoutWidth={parentState.labelLayout.width}
+            labelLayoutHeight={parentState.labelLayout.height}
             {...labelProps}
             labelBackground={LabelBackground}
             maxFontSizeMultiplier={rest.maxFontSizeMultiplier}

src/components/TextInput/types.tsx

@@ -137,6 +137,7 @@ export type InputLabelProps = {
   opacity: number;
   labelLayoutMeasured: boolean;
   labelLayoutWidth: number;
+  labelLayoutHeight: number;
   inputContainerLayout: { width: number };
   labelBackground?: any;
   maxFontSizeMultiplier?: number | undefined | null;
@@ -148,6 +149,7 @@ export type LabelBackgroundProps = {
   labelStyle: any;
   labeled: Animated.Value;
   labelLayoutWidth: number;
+  labelLayoutHeight: number;
   maxFontSizeMultiplier?: number | undefined | null;
   theme?: ThemeProp;
 } & LabelProps;

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

@@ -1084,6 +1084,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": undefined,
+                "height": 0,
                 "left": 8,
                 "letterSpacing": 0.15,
                 "lineHeight": undefined,
@@ -1111,9 +1112,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               }
             }
             testID="text-input-outlined-label-background"
-          >
-            Outline Input
-          </Text>
+          />
           <Text
             collapsable={false}
             maxFontSizeMultiplier={1.5}