fix: input label positioning regression (#3728)

Co-authored-by: Tomasz Janiczek <[email protected]>

Author: tjaniczek

src/components/TextInput/Label/InputLabel.tsx

@@ -38,7 +38,6 @@ const InputLabel = (props: InputLabelProps) => {
     labelTranslationXOffset,
     maxFontSizeMultiplier,
     testID,
-    theme,
   } = props;
 
   const paddingOffset =
@@ -116,7 +115,6 @@ const InputLabel = (props: InputLabelProps) => {
         labeled,
         labelLayoutWidth,
         labelStyle,
-        theme,
         placeholderStyle,
         baseLabelTranslateX,
         topPosition,

src/components/TextInput/Label/LabelBackground.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 
-import { useInternalTheme } from '../../../core/theming';
 import AnimatedText from '../../Typography/AnimatedText';
 import type { LabelBackgroundProps } from '../types';
 
@@ -16,15 +15,12 @@ const LabelBackground = ({
   roundness,
   labelStyle,
   maxFontSizeMultiplier,
-  theme: themeOverrides,
 }: LabelBackgroundProps) => {
   const opacity = labeled.interpolate({
     inputRange: [0, 0.6],
     outputRange: [1, 0],
   });
 
-  const { isV3 } = useInternalTheme(themeOverrides);
-
   const labelTranslationX = {
     translateX: labeled.interpolate({
       inputRange: [0, 1],
@@ -41,14 +37,6 @@ const LabelBackground = ({
 
   const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
 
-  const labelTextWidth = isV3
-    ? {
-        width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
-      }
-    : {
-        maxWidth: labelLayoutWidth - 2 * placeholderStyle.paddingHorizontal,
-      };
-
   const isRounded = roundness > 6;
   const roundedEdgeCover = isRounded ? (
     <Animated.View
@@ -76,14 +64,13 @@ const LabelBackground = ({
         placeholderStyle,
         labelStyle,
         styles.outlinedLabel,
-        isV3 && styles.md3OutlinedLabel,
         {
           top: topPosition + 1,
+          width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
           backgroundColor,
           opacity,
           transform: labelTextTransform,
         },
-        labelTextWidth,
       ]}
       numberOfLines={1}
       maxFontSizeMultiplier={maxFontSizeMultiplier}
@@ -105,11 +92,8 @@ const styles = StyleSheet.create({
   // eslint-disable-next-line react-native/no-color-literals
   outlinedLabel: {
     position: 'absolute',
-    left: 18,
+    left: 8,
     paddingHorizontal: 0,
     color: 'transparent',
   },
-  md3OutlinedLabel: {
-    left: 8,
-  },
 });

src/components/TextInput/TextInputFlat.tsx

@@ -281,7 +281,6 @@ const TextInputFlat = ({
     maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
     testID,
     contentStyle,
-    theme,
     opacity:
       parentState.value || parentState.focused
         ? parentState.labelLayout.measured

src/components/TextInput/TextInputOutlined.tsx

@@ -210,7 +210,6 @@ const TextInputOutlined = ({
     maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
     testID,
     contentStyle,
-    theme,
     opacity:
       parentState.value || parentState.focused
         ? parentState.labelLayout.measured