fix: correct text input label background layout (#3349)

callstack · Sep 5, 2022 · 6769fca · 6769fca
1 parent 028aaf4
commit 6769fca
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -26,7 +26,7 @@ const LabelBackground = ({
     outputRange: [hasFocus ? 1 : 0, 0],
   });
 
-  const { isV3, colors } = useTheme();
+  const { isV3 } = useTheme();
 
   const labelTranslationX = {
     translateX: parentState.labeled.interpolate({
@@ -42,9 +42,7 @@ const LabelBackground = ({
     }),
   };
 
-  const labelTextTransform = isV3
-    ? [...labelStyle.transform]
-    : [...labelStyle.transform, labelTextScaleY];
+  const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
 
   const labelTextWidth = isV3
     ? {
@@ -82,8 +80,8 @@ const LabelBackground = ({
             styles.outlinedLabel,
             isV3 && styles.md3OutlinedLabel,
             {
-              top: topPosition + (isV3 ? 0 : 1),
-              backgroundColor: isV3 ? colors.surface : backgroundColor,
+              top: topPosition + 1,
+              backgroundColor,
               opacity,
               transform: labelTextTransform,
             },

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -486,7 +486,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "paddingHorizontal": 0,
               "position": "absolute",
               "textAlign": "left",
-              "top": 58,
+              "top": 59,
               "transform": Array [
                 Object {
                   "translateX": 0,
@@ -497,6 +497,9 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
                 Object {
                   "scale": 0.75,
                 },
+                Object {
+                  "scaleY": 0.2,
+                },
               ],
               "width": -16,
               "writingDirection": "ltr",