From c9a5ad08b430f989bc80404aa6317a6437b1ffee Mon Sep 17 00:00:00 2001
From: Tomasz Janiczek <tomasz.janiczek@callstak.com>
Date: Mon, 6 Mar 2023 12:34:01 +0100
Subject: [PATCH] fix: input label positioning regression

---
 src/components/TextInput/Label/InputLabel.tsx |  2 --
 .../TextInput/Label/LabelBackground.tsx       | 20 ++-----------------
 src/components/TextInput/TextInputFlat.tsx    |  1 -
 .../TextInput/TextInputOutlined.tsx           |  1 -
 4 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
index bfa77c5092..7326f30f0c 100644
--- a/src/components/TextInput/Label/InputLabel.tsx
+++ b/src/components/TextInput/Label/InputLabel.tsx
@@ -38,7 +38,6 @@ const InputLabel = (props: InputLabelProps) => {
     labelTranslationXOffset,
     maxFontSizeMultiplier,
     testID,
-    theme,
   } = props;
 
   const paddingOffset =
@@ -118,7 +117,6 @@ const InputLabel = (props: InputLabelProps) => {
         labeled,
         labelLayoutWidth,
         labelStyle,
-        theme,
         placeholderStyle,
         baseLabelTranslateX,
         topPosition,
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
index 9fb9808989..20e775304c 100644
--- a/src/components/TextInput/Label/LabelBackground.tsx
+++ b/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,
-  },
 });
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
index 6309b42bfb..fe581f888d 100644
--- a/src/components/TextInput/TextInputFlat.tsx
+++ b/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
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index c87202e22e..05f9faa5e3 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/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