From c3a2dbd025ced92d0e2b8e690eb41b23be28eae5 Mon Sep 17 00:00:00 2001
From: Tomasz Janiczek <me@janiczek.co.uk>
Date: Wed, 2 Aug 2023 09:49:08 +0200
Subject: [PATCH] fix: use theme background for transparent text inputs (#3980)

Co-authored-by: Tomasz Janiczek <tomasz.janiczek@callstak.com>
---
 src/components/TextInput/Label/InputLabel.tsx |  1 +
 .../TextInput/Label/LabelBackground.tsx       |  2 ++
 .../TextInput/TextInputOutlined.tsx           |  7 ++++-
 src/components/__tests__/TextInput.test.tsx   | 29 ++++++++++++++++++-
 .../__snapshots__/TextInput.test.tsx.snap     |  1 +
 5 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
index 0289bdc76c..a2d8d7845a 100644
--- a/src/components/TextInput/Label/InputLabel.tsx
+++ b/src/components/TextInput/Label/InputLabel.tsx
@@ -122,6 +122,7 @@ const InputLabel = (props: InputLabelProps) => {
         backgroundColor,
         roundness,
         maxFontSizeMultiplier: maxFontSizeMultiplier,
+        testID,
       })}
       <AnimatedText
         variant="bodySmall"
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
index 20e775304c..054c0db432 100644
--- a/src/components/TextInput/Label/LabelBackground.tsx
+++ b/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,
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index 510d1bba19..bee0a2dce0 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/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,
diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx
index 98a5ecf153..cf9b4feb83 100644
--- a/src/components/__tests__/TextInput.test.tsx
+++ b/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>,
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
index f2e8dcc77f..fed887da57 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/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>