Conformed to material

Using the material spec, the positioning of the label in all states and platforms should now be compliant. Also, the prefix for filled wasn't showing on RN without a zIndex. Finally, added extensions to .eslintrc to correct the unresolved warning on the platform specific label config files.
codypearce · Jun 23, 2019 · 6621acb · 6621acb
1 parent fc5ec18
commit 6621acb
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 17 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -19,5 +19,12 @@
     "react/display-name": 0,
     "react/no-typos": 0
   },
-  "plugins": ["prettier", "react", "import"]
+  "plugins": ["prettier", "react", "import"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ios.js", ".android.js", ".web.js", ".native.js"]
+      }
+    }
+  }
 }
diff --git a/src/Components/TextField/TextFieldFilled/TextFieldFilled.js b/src/Components/TextField/TextFieldFilled/TextFieldFilled.js
@@ -80,7 +80,7 @@ class TextFieldFilled extends Component {
     const { prefix } = this.props;
 
     return (
-      <View style={{ position: 'absolute', left: 16, top: 26 }}>
+      <View style={{ position: 'absolute', left: 16, top: 26, zIndex: 1 }}>
         {React.cloneElement(prefix, {
           color: prefix.props.color ? prefix.props.color : 'rgba(0, 0, 0, .57)',
           fontSize: prefix.props.fontSize ? prefix.props.fontSize : 16,

diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -30,6 +30,7 @@ exports[`TextFieldFilled Renders 1`] = `
           "backgroundColor": "transparent",
           "color": "rgba(0, 0, 0, 0.54)",
           "fontSize": 16,
+          "paddingHorizontal": 0,
           "transform": Array [
             Object {
               "translateY": 20,

diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -30,6 +30,7 @@ exports[`TextFieldFlat Renders 1`] = `
           "backgroundColor": "transparent",
           "color": "rgba(0, 0, 0, 0.54)",
           "fontSize": 16,
+          "paddingHorizontal": 0,
           "transform": Array [
             Object {
               "translateY": 20,

diff --git a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Easing, StyleSheet } from 'react-native';
+import { Animated, Easing, StyleSheet, Platform } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
 import styles from './TextFieldLabel.styles';
 import {
@@ -74,15 +74,18 @@ class TextFieldLabel extends Component {
   }
 
   _handlePrefix() {
-    const { type } = this.props;
-    let translateYAnimation = 10;
+    const { type, dense } = this.props;
+    let translateYAnimation = nonOutlinedStops.active;
     if (type == 'outlined') {
-      translateYAnimation = -10;
+      translateYAnimation = dense
+        ? outlinedStopsDense.active
+        : outlinedStops.active;
     }
 
     this.setState({
       canAnimate: false,
       translateYAnimation: new Animated.Value(translateYAnimation),
+      fontSizeAnimation: new Animated.Value(1),
     });
   }
 
@@ -110,7 +113,7 @@ class TextFieldLabel extends Component {
       Animated.timing(fontSizeAnimation, {
         toValue: fontVal,
         duration: animationDuration,
-        easing: animationEasing,
+        easing: Platform.OS === 'web' ? null : animationEasing,
       }),
     ]).start();
   }
@@ -145,7 +148,7 @@ class TextFieldLabel extends Component {
       Animated.timing(fontSizeAnimation, {
         toValue: fontVal,
         duration: animationDuration,
-        easing: animationEasing,
+        easing: Platform.OS === 'web' ? null : animationEasing,
       }),
     ]).start();
   }
@@ -161,14 +164,15 @@ class TextFieldLabel extends Component {
       prefix,
       theme,
       style,
+      dense,
     } = this.props;
     const { translateYAnimation, fontSizeAnimation } = this.state;
 
     let translateX = 12;
     if (type === 'flat') {
       translateX = -1;
     } else if (type === 'outlined') {
-      translateX = 8;
+      translateX = 10;
     }
 
     if (!labelColor) labelColor = 'rgba(0, 0, 0, 0.54)';
@@ -195,7 +199,7 @@ class TextFieldLabel extends Component {
     const fontStyle = {
       fontSize: fontSizeAnimation.interpolate({
         inputRange: [0, 1],
-        outputRange: [baseFontSize, baseFontSize * 0.75],
+        outputRange: [baseFontSize, baseFontSize * (dense ? 0.65 : 0.7)],
       }),
     };
 
@@ -214,13 +218,14 @@ class TextFieldLabel extends Component {
             {
               color: labelColor,
               backgroundColor: type == 'outlined' ? 'white' : 'transparent',
+              paddingHorizontal: type == 'outlined' ? 4 : 0,
               transform: [
                 { translateY: translateYAnimation },
                 { translateX: translateX },
               ],
             },
-            style,
             fontStyle,
+            style,
           ]}>
           {label}
         </Animated.Text>

diff --git a/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap b/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap
@@ -17,6 +17,7 @@ exports[`TextFieldLabel Renders 1`] = `
         "backgroundColor": "transparent",
         "color": "rgba(0, 0, 0, 0.54)",
         "fontSize": 16,
+        "paddingHorizontal": 0,
         "transform": Array [
           Object {
             "translateY": 20,

diff --git a/src/Components/TextField/TextFieldOutline/TextFieldOutline.js b/src/Components/TextField/TextFieldOutline/TextFieldOutline.js
@@ -4,7 +4,7 @@ import { View, TextInput, Platform } from 'react-native';
 import withTheme from '../../../Theme/withTheme';
 import TextFieldLabel from '../TextFieldLabel/TextFieldLabel';
 import TextFieldHelperText from '../TextFieldHelperText/TextFieldHelperText';
-import styles from './TextFieldOutline.styles';
+import styles, { OUTLINED_LEFT_PADDING } from './TextFieldOutline.styles';
 
 class TextFieldOutlined extends Component {
   constructor(props) {
@@ -141,7 +141,7 @@ class TextFieldOutlined extends Component {
       height = 40;
     }
 
-    let paddingLeft = leadingIcon ? 44 : 12;
+    let paddingLeft = leadingIcon ? 44 : OUTLINED_LEFT_PADDING;
     if (prefix) paddingLeft = 32;
 
     const platformStyles = Platform.OS == 'web' ? { outlineWidth: 0 } : {};

diff --git a/src/Components/TextField/TextFieldOutline/TextFieldOutline.styles.js b/src/Components/TextField/TextFieldOutline/TextFieldOutline.styles.js
@@ -1,10 +1,12 @@
 import { StyleSheet } from 'react-native';
 
+export const OUTLINED_LEFT_PADDING = 14;
+
 const styles = StyleSheet.create({
   containerStyle: {},
   textField: {
     height: 56,
-    paddingHorizontal: 12,
+    paddingHorizontal: OUTLINED_LEFT_PADDING,
   },
   outlinedInput: {
     borderWidth: 1,

diff --git a/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap b/src/Components/TextField/TextFieldOutline/__snapshots__/TextFieldOutline.test.js.snap
@@ -29,12 +29,13 @@ exports[`TextFieldOutline Renders 1`] = `
           "backgroundColor": "white",
           "color": "rgba(0, 0, 0, 0.54)",
           "fontSize": 16,
+          "paddingHorizontal": 4,
           "transform": Array [
             Object {
               "translateY": 20,
             },
             Object {
-              "translateX": 8,
+              "translateX": 10,
             },
           ],
         }
@@ -49,7 +50,7 @@ exports[`TextFieldOutline Renders 1`] = `
       Array [
         Object {
           "height": 56,
-          "paddingHorizontal": 12,
+          "paddingHorizontal": 14,
         },
         Object {
           "borderRadius": 4,
@@ -61,7 +62,7 @@ exports[`TextFieldOutline Renders 1`] = `
           "height": 56,
           "minHeight": 56,
           "paddingBottom": 0,
-          "paddingLeft": 12,
+          "paddingLeft": 14,
           "paddingRight": 0,
           "paddingTop": 0,
         },