Fix text field labels of first time flow. Add text fields to storybook (#4389)

4 files changed, 84 insertions, 44 deletions

diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js
index 99d210ed1..6b284f7c5 100644
--- a/mascara/src/app/first-time/create-password-screen.js
+++ b/mascara/src/app/first-time/create-password-screen.js
@@ -143,6 +143,7 @@ class CreatePasswordScreen extends Component {
               autoComplete="new-password"
               margin="normal"
               fullWidth
+              largeLabel
             />
             <TextField
               id="confirm-password"
@@ -155,6 +156,7 @@ class CreatePasswordScreen extends Component {
               autoComplete="confirm-password"
               margin="normal"
               fullWidth
+              largeLabel
             />
             <button
               className="first-time-flow__button"
diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js
index 4fda2bbc1..fd2516ad4 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -146,6 +146,7 @@ class ImportSeedPhraseScreen extends Component {
               error={passwordError}
               autoComplete="new-password"
               margin="normal"
+              largeLabel
             />
             <TextField
               id="confirm-password"
@@ -157,6 +158,7 @@ class ImportSeedPhraseScreen extends Component {
               error={confirmPasswordError}
               autoComplete="confirm-password"
               margin="normal"
+              largeLabel
             />
             <button
               className="first-time-flow__button"
diff --git a/ui/app/components/text-field/text-field.component.js b/ui/app/components/text-field/text-field.component.js
index b695a449a..2c72d8124 100644
--- a/ui/app/components/text-field/text-field.component.js
+++ b/ui/app/components/text-field/text-field.component.js
@@ -1,8 +1,15 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import { default as MaterialTextField } from '@material-ui/core/TextField'
 
+const inputLabelBase = {
+  transform: 'none',
+  transition: 'none',
+  position: 'initial',
+  color: '#5b5b5b',
+}
+
 const styles = {
   materialLabel: {
     '&$materialFocused': {
@@ -46,57 +53,57 @@ const styles = {
       border: '1px solid #2f9ae0',
     },
   },
+  largeInputLabel: {
+    ...inputLabelBase,
+    fontSize: '1rem',
+  },
   inputLabel: {
+    ...inputLabelBase,
     fontSize: '.75rem',
-    transform: 'none',
-    transition: 'none',
-    position: 'initial',
-    color: '#5b5b5b',
   },
 }
 
-class TextField extends Component {
-  static defaultProps = {
-    error: null,
-  }
+const TextField = props => {
+  const { error, classes, material, startAdornment, largeLabel, ...textFieldProps } = props
 
-  static propTypes = {
-    error: PropTypes.string,
-    classes: PropTypes.object,
-    material: PropTypes.bool,
-    startAdornment: PropTypes.element,
-  }
+  return (
+    <MaterialTextField
+      error={Boolean(error)}
+      helperText={error}
+      InputLabelProps={{
+        shrink: material ? undefined : true,
+        className: material ? '' : (largeLabel ? classes.largeInputLabel : classes.inputLabel),
+        FormLabelClasses: {
+          root: material ? classes.materialLabel : classes.formLabel,
+          focused: material ? classes.materialFocused : classes.formLabelFocused,
+          error: classes.materialError,
+        },
+      }}
+      InputProps={{
+        startAdornment: startAdornment || undefined,
+        disableUnderline: !material,
+        classes: {
+          root: material ? '' : classes.inputRoot,
+          input: material ? '' : classes.input,
+          underline: material ? classes.materialUnderline : '',
+          focused: material ? '' : classes.inputFocused,
+        },
+      }}
+      {...textFieldProps}
+    />
+  )
+}
 
-  render () {
-    const { error, classes, material, startAdornment, ...textFieldProps } = this.props
+TextField.defaultProps = {
+  error: null,
+}
 
-    return (
-      <MaterialTextField
-        error={Boolean(error)}
-        helperText={error}
-        InputLabelProps={{
-          shrink: material ? undefined : true,
-          className: material ? '' : classes.inputLabel,
-          FormLabelClasses: {
-            root: material ? classes.materialLabel : classes.formLabel,
-            focused: material ? classes.materialFocused : classes.formLabelFocused,
-            error: classes.materialError,
-          },
-        }}
-        InputProps={{
-          startAdornment: startAdornment || undefined,
-          disableUnderline: !material,
-          classes: {
-            root: material ? '' : classes.inputRoot,
-            input: material ? '' : classes.input,
-            underline: material ? classes.materialUnderline : '',
-            focused: material ? '' : classes.inputFocused,
-          },
-        }}
-        {...textFieldProps}
-      />
-    )
-  }
+TextField.propTypes = {
+  error: PropTypes.string,
+  classes: PropTypes.object,
+  material: PropTypes.bool,
+  startAdornment: PropTypes.element,
+  largeLabel: PropTypes.bool,
 }
 
 export default withStyles(styles)(TextField)
diff --git a/ui/app/components/text-field/text-field.stories.js b/ui/app/components/text-field/text-field.stories.js
index ee3e5faaf..c00873b8a 100644
--- a/ui/app/components/text-field/text-field.stories.js
+++ b/ui/app/components/text-field/text-field.stories.js
@@ -22,3 +22,32 @@ storiesOf('TextField', module)
       error="Invalid value"
     />
   )
+  .add('Mascara text', () =>
+    <TextField
+      label="Text"
+      type="text"
+      largeLabel
+    />
+  )
+  .add('Material text', () =>
+    <TextField
+      label="Text"
+      type="text"
+      material
+    />
+  )
+  .add('Material password', () =>
+    <TextField
+      label="Password"
+      type="password"
+      material
+    />
+  )
+  .add('Material error', () =>
+    <TextField
+      type="text"
+      label="Name"
+      error="Invalid value"
+      material
+    />
+  )