fix: correct text input label color

src/components/TextInput/Label/InputLabel.tsx

@@ -7,7 +7,7 @@ import type { InputLabelProps } from '../types';
 
 const InputLabel = (props: InputLabelProps) => {
   const { isV3 } = useTheme();
-  const { parentState, labelBackground, mode } = props;
+  const { parentState, labelBackground } = props;
   const {
     label,
     error,
@@ -29,6 +29,7 @@ const InputLabel = (props: InputLabelProps) => {
     errorColor,
     labelTranslationXOffset,
     maxFontSizeMultiplier,
+    testID,
   } = props.labelProps;
 
   const labelTranslationX = {
@@ -72,14 +73,7 @@ const InputLabel = (props: InputLabelProps) => {
     ],
   };
 
-  let textColor = placeholderColor;
-
-  if (error && errorColor) {
-    textColor = errorColor;
-  }
-  if (isV3 && parentState.value && mode !== 'outlined') {
-    textColor = activeColor;
-  }
+  const textColor = error && errorColor ? errorColor : placeholderColor;
 
   return label ? (
     // Position colored placeholder and gray placeholder on top of each other and crossfade them
@@ -128,6 +122,7 @@ const InputLabel = (props: InputLabelProps) => {
         ]}
         numberOfLines={1}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
+        testID={`${testID}-label-active`}
       >
         {label}
       </AnimatedText>
@@ -148,6 +143,7 @@ const InputLabel = (props: InputLabelProps) => {
         ]}
         numberOfLines={1}
         maxFontSizeMultiplier={maxFontSizeMultiplier}
+        testID={`${testID}-label-inactive`}
       >
         {label}
       </AnimatedText>

src/components/TextInput/TextInput.tsx

@@ -132,6 +132,10 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
    * @optional
    */
   theme: Theme;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
 };
 
 interface CompoundedComponent

src/components/TextInput/TextInputFlat.tsx

@@ -69,6 +69,7 @@ const TextInputFlat = ({
   left,
   right,
   placeholderTextColor,
+  testID = 'text-input',
   ...rest
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
@@ -258,6 +259,7 @@ const TextInputFlat = ({
     errorColor,
     roundness,
     maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+    testID,
   };
   const affixTopPosition = {
     [AdornmentSide.Left]: leftAffixTopPosition,
@@ -328,7 +330,7 @@ const TextInputFlat = ({
         )}
         <InputLabel parentState={parentState} labelProps={labelProps} />
         {render?.({
-          testID: 'text-input-flat',
+          testID: `${testID}-flat`,
           ...rest,
           ref: innerRef,
           onChangeText,

src/components/TextInput/TextInputOutlined.tsx

@@ -67,6 +67,7 @@ const TextInputOutlined = ({
   left,
   right,
   placeholderTextColor,
+  testID = 'text-input',
   ...rest
 }: ChildTextInputProps) => {
   const adornmentConfig = getAdornmentConfig({ left, right });
@@ -202,6 +203,7 @@ const TextInputOutlined = ({
     labelTranslationXOffset,
     roundness,
     maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+    testID,
   };
 
   const minHeight = (height ||
@@ -299,14 +301,13 @@ const TextInputOutlined = ({
           ]}
         >
           <InputLabel
-            mode="outlined"
             parentState={parentState}
             labelProps={labelProps}
             labelBackground={LabelBackground}
             maxFontSizeMultiplier={rest.maxFontSizeMultiplier}
           />
           {render?.({
-            testID: 'text-input-outlined',
+            testID: `${testID}-outlined`,
             ...rest,
             ref: innerRef,
             onChangeText,

src/components/TextInput/types.tsx

@@ -25,6 +25,7 @@ export type RenderProps = {
   numberOfLines?: number;
   value?: string;
   adjustsFontSizeToFit?: boolean;
+  testID?: string;
 };
 type TextInputTypesWithoutMode = $Omit<TextInputProps, 'mode'>;
 export type State = {
@@ -72,13 +73,13 @@ export type LabelProps = {
   onLayoutAnimatedText: (args: any) => void;
   roundness: number;
   maxFontSizeMultiplier?: number | undefined | null;
+  testID?: string;
 };
 export type InputLabelProps = {
   parentState: State;
   labelProps: LabelProps;
   labelBackground?: any;
   maxFontSizeMultiplier?: number | undefined | null;
-  mode?: 'flat' | 'outlined';
 };
 
 export type LabelBackgroundProps = {

src/components/__tests__/TextInput.test.js

@@ -176,6 +176,40 @@ it('correctly applies a component as the text label', () => {
   expect(toJSON()).toMatchSnapshot();
 });
 
+it('renders label with correct color when active', () => {
+  const { getByTestId } = render(
+    <TextInput
+      label="Flat input"
+      placeholder="Type something"
+      value={'Some test value'}
+      onChangeText={(text) => this.setState({ text })}
+      testID={'text-input'}
+    />
+  );
+
+  fireEvent(getByTestId('text-input-flat'), 'focus');
+
+  expect(getByTestId('text-input-label-active')).toHaveStyle({
+    color: getTheme().colors.primary,
+  });
+});
+
+it('renders label with correct color when inactive', () => {
+  const { getByTestId } = render(
+    <TextInput
+      label="Flat input"
+      placeholder="Type something"
+      value={'Some test value'}
+      onChangeText={(text) => this.setState({ text })}
+      testID={'text-input'}
+    />
+  );
+
+  expect(getByTestId('text-input-label-inactive')).toHaveStyle({
+    color: getTheme().colors.onSurfaceVariant,
+  });
+});
+
 describe('maxFontSizeMultiplier', () => {
   const createInput = (type, maxFontSizeMultiplier) => {
     return (

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

@@ -98,6 +98,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-active"
       >
         <Text
           style={
@@ -115,7 +116,7 @@ exports[`correctly applies a component as the text label 1`] = `
         numberOfLines={1}
         style={
           Object {
-            "color": "rgba(103, 80, 164, 1)",
+            "color": "rgba(73, 69, 79, 1)",
             "fontSize": 16,
             "fontWeight": undefined,
             "left": 0,
@@ -141,6 +142,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-inactive"
       >
         <Text
           style={
@@ -299,6 +301,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-active"
       >
         Flat input
       </Text>
@@ -308,7 +311,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
         numberOfLines={1}
         style={
           Object {
-            "color": "rgba(103, 80, 164, 1)",
+            "color": "rgba(73, 69, 79, 1)",
             "fontSize": 16,
             "fontWeight": undefined,
             "left": 0,
@@ -334,6 +337,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-inactive"
       >
         Flat input
       </Text>
@@ -533,6 +537,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "writingDirection": "ltr",
             }
           }
+          testID="text-input-label-active"
         >
           Outline Input
         </Text>
@@ -567,6 +572,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "writingDirection": "ltr",
             }
           }
+          testID="text-input-label-inactive"
         >
           Outline Input
         </Text>
@@ -716,6 +722,7 @@ exports[`correctly applies textAlign center 1`] = `
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-active"
       >
         Flat input
       </Text>
@@ -725,7 +732,7 @@ exports[`correctly applies textAlign center 1`] = `
         numberOfLines={1}
         style={
           Object {
-            "color": "rgba(103, 80, 164, 1)",
+            "color": "rgba(73, 69, 79, 1)",
             "fontSize": 16,
             "fontWeight": undefined,
             "left": 0,
@@ -751,6 +758,7 @@ exports[`correctly applies textAlign center 1`] = `
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-inactive"
       >
         Flat input
       </Text>
@@ -901,6 +909,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-active"
       >
         Flat input
       </Text>
@@ -910,7 +919,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
         numberOfLines={1}
         style={
           Object {
-            "color": "rgba(103, 80, 164, 1)",
+            "color": "rgba(73, 69, 79, 1)",
             "fontSize": 16,
             "fontWeight": undefined,
             "left": 0,
@@ -936,6 +945,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-inactive"
       >
         Flat input
       </Text>
@@ -1253,6 +1263,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-active"
       >
         Flat input
       </Text>
@@ -1262,7 +1273,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
         numberOfLines={1}
         style={
           Object {
-            "color": "rgba(103, 80, 164, 1)",
+            "color": "rgba(73, 69, 79, 1)",
             "fontSize": 16,
             "fontWeight": undefined,
             "left": 0,
@@ -1288,6 +1299,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "writingDirection": "ltr",
           }
         }
+        testID="text-input-label-inactive"
       >
         Flat input
       </Text>