-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TextField] Make it meet guidelines #6566
Changes from 40 commits
7f966d0
10a5c0f
6e8ad06
b5fb82a
6cece85
7b7fa13
4716659
6f83e5b
186a251
7abcec9
d02154c
dffc976
890217f
0b15230
f27ea99
b11a2e8
7a3d1f4
710e605
ff1abe5
0061db1
6af7c88
0565e94
c3bde34
c740da2
760eb25
4e16f7c
e7e7f47
38d4043
2f70c6c
1457b96
5fe667a
5d6970d
612b02c
ae3d010
3cd4b99
9b40eee
428d870
489de60
a8a9a6c
3043877
f30dbea
0419922
c37fe6e
30be343
60ae4d7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -77,6 +77,22 @@ class TextFields extends Component { | |
defaultValue="2017-05-24" | ||
className={classes.input} | ||
/> | ||
<TextField | ||
id="helperText" | ||
label="Helper text" | ||
type="text" | ||
defaultValue="Default Value" | ||
className={classes.input} | ||
helperText="Some important text" | ||
/> | ||
<TextField | ||
id="plceholder" | ||
label="Lbel" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
className={classes.input} | ||
type="text" | ||
InputProps={{ placeholder: 'Plceholder' }} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like my |
||
helperText="Helper text" | ||
/> | ||
</div> | ||
); | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
--- | ||
components: Input, TextField, TextFieldLabel | ||
components: Input, TextField, FormHelperText | ||
--- | ||
|
||
# Text Fields | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,11 @@ | ||
// @flow weak | ||
|
||
import React, { Component } from 'react'; | ||
import React, { Children, Component } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
import { createStyleSheet } from 'jss-theme-reactor'; | ||
import withStyles from '../styles/withStyles'; | ||
import { isDirty } from '../Input/Input'; | ||
|
||
export const styleSheet = createStyleSheet('MuiFormControl', { | ||
root: { | ||
|
@@ -22,6 +23,7 @@ export const styleSheet = createStyleSheet('MuiFormControl', { | |
*/ | ||
class FormControl extends Component { | ||
static defaultProps = { | ||
disabled: false, | ||
error: false, | ||
required: false, | ||
}; | ||
|
@@ -32,12 +34,13 @@ class FormControl extends Component { | |
}; | ||
|
||
getChildContext() { | ||
const { error, required } = this.props; | ||
const { disabled, error, required } = this.props; | ||
const { dirty, focused } = this.state; | ||
|
||
return { | ||
muiFormControl: { | ||
dirty, | ||
disabled, | ||
error, | ||
focused, | ||
required, | ||
|
@@ -49,6 +52,14 @@ class FormControl extends Component { | |
}; | ||
} | ||
|
||
componentWillMount() { | ||
Children.forEach(this.props.children, child => { | ||
if (child && child.type && child.type.muiName === 'Input' && isDirty(child.props)) { | ||
this.setState({ dirty: true }); | ||
} | ||
}); | ||
} | ||
|
||
handleFocus = () => { | ||
if (this.props.onFocus) { | ||
this.props.onFocus(); | ||
|
@@ -84,6 +95,7 @@ class FormControl extends Component { | |
children, | ||
classes, | ||
className, | ||
disabled, // eslint-disable-line no-unused-vars | ||
error, // eslint-disable-line no-unused-vars | ||
...other | ||
} = this.props; | ||
|
@@ -114,6 +126,10 @@ FormControl.propTypes = { | |
* @ignore | ||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* If `true`, the label should be displayed in an disabled state. | ||
*/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 'a disabled state' |
||
disabled: PropTypes.bool, | ||
/** | ||
* If `true`, the label should be displayed in an error state. | ||
*/ | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
// @flow weak | ||
|
||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
import { createStyleSheet } from 'jss-theme-reactor'; | ||
import withStyles from '../styles/withStyles'; | ||
|
||
export const styleSheet = createStyleSheet('MuiFormHelperText', theme => ({ | ||
root: { | ||
color: theme.palette.input.helperText, | ||
fontFamily: theme.typography.fontFamily, | ||
fontSize: 12, | ||
lineHeight: 1.4, | ||
margin: 0, | ||
}, | ||
error: { | ||
color: theme.palette.error.A400, | ||
}, | ||
disabled: { | ||
color: theme.palette.input.disabled, | ||
}, | ||
})); | ||
|
||
function FormHelperText(props, context) { | ||
const { | ||
children, | ||
classes, | ||
className: classNameProp, | ||
disabled: disabledProp, | ||
error: errorProp, | ||
...other | ||
} = props; | ||
const { muiFormControl } = context; | ||
|
||
let disabled = disabledProp; | ||
let error = errorProp; | ||
|
||
if (muiFormControl && typeof disabled === 'undefined') { | ||
disabled = muiFormControl.disabled; | ||
} | ||
|
||
if (muiFormControl && typeof error === 'undefined') { | ||
error = muiFormControl.error; | ||
} | ||
|
||
const className = classNames( | ||
classes.root, | ||
{ | ||
[classes.disabled]: disabled, | ||
[classes.error]: error, | ||
}, | ||
classNameProp, | ||
); | ||
|
||
return ( | ||
<p className={className} {...other}> | ||
{children} | ||
</p> | ||
); | ||
} | ||
|
||
FormHelperText.propTypes = { | ||
/** | ||
* The content of the component. | ||
*/ | ||
children: PropTypes.node, | ||
/** | ||
* Useful to extend the style applied to components. | ||
*/ | ||
classes: PropTypes.object.isRequired, | ||
/** | ||
* The CSS class name of the root element. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We went with ignoring those from the documentation as quite idiomatic in the React world: /**
* @ignore
*/ |
||
*/ | ||
className: PropTypes.string, | ||
/** | ||
* Whether the helper text should be displayed in an disabled state. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 'If |
||
*/ | ||
disabled: PropTypes.bool, | ||
/** | ||
* Whether the helper text should be displayed in an error state. | ||
*/ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 'If |
||
error: PropTypes.bool, | ||
}; | ||
|
||
FormHelperText.contextTypes = { | ||
muiFormControl: PropTypes.object, | ||
}; | ||
|
||
export default withStyles(styleSheet)(FormHelperText); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, Firefox do not like that example:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@oliviertassinari I guess
jss
doens't prefixplaceholder
selector. My bad 😞There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
which Firefox version is it?