fix: use theme background for transparent text inputs (#3980)

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

src/components/TextInput/Label/InputLabel.tsx

@@ -122,6 +122,7 @@ const InputLabel = (props: InputLabelProps) => {
         backgroundColor,
         roundness,
         maxFontSizeMultiplier: maxFontSizeMultiplier,
+        testID,
       })}
       <AnimatedText
         variant="bodySmall"

src/components/TextInput/Label/LabelBackground.tsx

@@ -15,6 +15,7 @@ const LabelBackground = ({
   roundness,
   labelStyle,
   maxFontSizeMultiplier,
+  testID,
 }: LabelBackgroundProps) => {
   const opacity = labeled.interpolate({
     inputRange: [0, 0.6],
@@ -60,6 +61,7 @@ const LabelBackground = ({
     roundedEdgeCover,
     <AnimatedText
       key="labelBackground-text"
+      testID={`${testID}-label-background`}
       style={[
         placeholderStyle,
         labelStyle,

src/components/TextInput/TextInputOutlined.tsx

@@ -186,6 +186,11 @@ const TextInputOutlined = ({
     paddingHorizontal: INPUT_PADDING_HORIZONTAL,
   };
 
+  const labelBackgroundColor: ColorValue =
+    backgroundColor === 'transparent'
+      ? theme.colors.background
+      : backgroundColor;
+
   const labelProps = {
     label,
     onLayoutAnimatedText,
@@ -204,7 +209,7 @@ const TextInputOutlined = ({
     hasActiveOutline,
     activeColor,
     placeholderColor,
-    backgroundColor: backgroundColor as ColorValue,
+    backgroundColor: labelBackgroundColor,
     errorColor,
     labelTranslationXOffset,
     roundness,

src/components/__tests__/TextInput.test.tsx

@@ -5,7 +5,7 @@ import { StyleSheet, Text, Platform, I18nManager } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 import color from 'color';
 
-import { getTheme } from '../../core/theming';
+import { DefaultTheme, getTheme, ThemeProvider } from '../../core/theming';
 import { red500 } from '../../styles/themes/v2/colors';
 import {
   getFlatInputColors,
@@ -355,6 +355,33 @@ it('calls onLayout on right-side affix adornment', () => {
   })
 );
 
+it("correctly applies theme background to label when input's background is transparent", () => {
+  const backgroundColor = 'transparent';
+  const theme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: 'pink',
+    },
+  };
+
+  const { getByTestId } = render(
+    <ThemeProvider theme={theme}>
+      <TextInput
+        mode="outlined"
+        label="Transparent input"
+        value={'Some test value'}
+        style={{ backgroundColor }}
+        testID={'transparent-example'}
+      />
+    </ThemeProvider>
+  );
+
+  expect(getByTestId('transparent-example-label-background')).toHaveStyle({
+    backgroundColor: 'pink',
+  });
+});
+
 describe('maxFontSizeMultiplier', () => {
   const createInput = (
     type: Exclude<Props['mode'], undefined>,

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

@@ -695,6 +695,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "writingDirection": "ltr",
             }
           }
+          testID="text-input-outlined-label-background"
         >
           Outline Input
         </Text>