refactor: add variants to animated texts

callstack · Mar 8, 2022 · 754ec46 · 754ec46
1 parent fd31546
commit 754ec46
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import AnimatedText from '../../Typography/AnimatedText';
+import { useTheme } from '../../../core/theming';
 
 import type { InputLabelProps } from '../types';
 
 const InputLabel = (props: InputLabelProps) => {
+  const { isV3 } = useTheme();
   const { parentState, labelBackground, mode } = props;
   const {
     label,
@@ -95,6 +97,7 @@ const InputLabel = (props: InputLabelProps) => {
         labelProps: props.labelProps,
       })}
       <AnimatedText
+        variant="bodySmall"
         onLayout={onLayoutAnimatedText}
         style={[
           placeholderStyle,
@@ -110,12 +113,14 @@ const InputLabel = (props: InputLabelProps) => {
               outputRange: [hasActiveOutline ? 1 : 0, 0],
             }),
           },
+          isV3 && styles.md3TextLine,
         ]}
         numberOfLines={1}
       >
         {label}
       </AnimatedText>
       <AnimatedText
+        variant={parentState.focused ? 'bodyLarge' : 'bodySmall'}
         style={[
           placeholderStyle,
           {
@@ -132,6 +137,7 @@ const InputLabel = (props: InputLabelProps) => {
                 : placeholderColor,
             opacity: placeholderOpacity,
           },
+          isV3 && styles.md3TextLine,
         ]}
         numberOfLines={1}
       >
@@ -145,6 +151,9 @@ const styles = StyleSheet.create({
   labelContainer: {
     zIndex: 3,
   },
+  md3TextLine: {
+    lineHeight: undefined,
+  },
 });
 
 export default InputLabel;
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
@@ -25,7 +25,7 @@ const LabelBackground = ({
     outputRange: [hasFocus ? 1 : 0, 0],
   });
 
-  const theme = useTheme();
+  const { isV3, colors } = useTheme();
 
   const labelTranslationX = {
     transform: [
@@ -61,12 +61,12 @@ const LabelBackground = ({
             placeholderStyle,
             labelStyle,
             styles.outlinedLabel,
-            theme.isV3 && styles.md3OutlinedLabel,
+            isV3 && styles.md3OutlinedLabel,
             {
-              top: topPosition,
-              backgroundColor: theme.colors.surface,
+              top: topPosition + (isV3 ? 0 : 1),
+              backgroundColor: colors.surface,
               opacity,
-              transform: theme.isV3
+              transform: isV3
                 ? [...labelStyle.transform]
                 : [
                     ...labelStyle.transform,
@@ -78,7 +78,7 @@ const LabelBackground = ({
                     },
                   ],
             },
-            theme.isV3
+            isV3
               ? {
                   width:
                     parentState.labelLayout.width -

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -466,7 +466,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,