aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@users.noreply.github.com>2018-05-29 22:35:18 +0800
committerGitHub <noreply@github.com>2018-05-29 22:35:18 +0800
commitd1f5d8ccc663bdc379864e155f12f580af127e8c (patch)
treee6cda26b0f12c3b8139b55440d40e1ce136e8996 /ui
parentc665fe191de937170c181746b08efaac1eefaf88 (diff)
downloadtangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.tar
tangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.tar.gz
tangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.tar.bz2
tangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.tar.lz
tangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.tar.xz
tangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.tar.zst
tangerine-wallet-browser-d1f5d8ccc663bdc379864e155f12f580af127e8c.zip
Fix text field labels of first time flow. Add text fields to storybook (#4389)
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/text-field/text-field.component.js95
-rw-r--r--ui/app/components/text-field/text-field.stories.js29
2 files changed, 80 insertions, 44 deletions
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
+ />
+ )