diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index 965efd55f09bd2..44d911dd71858f 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -29,36 +29,55 @@ export const styles = theme => ({
marginDense: {
marginTop: 4,
},
+ /* Styles applied to the root element if `focused={true}`. */
+ focused: {},
+ /* Styles applied to the root element if `filled={true}`. */
+ filled: {},
+ /* Styles applied to the root element if `required={true}`. */
+ required: {},
});
function FormHelperText(props, context) {
const {
classes,
className: classNameProp,
+ component: Component,
disabled: disabledProp,
error: errorProp,
+ filled: filledProp,
+ focused: focusedProp,
margin: marginProp,
- component: Component,
+ required: requiredProp,
...other
} = props;
const { muiFormControl } = context;
let disabled = disabledProp;
let error = errorProp;
+ let filled = filledProp;
+ let focused = focusedProp;
let margin = marginProp;
+ let required = requiredProp;
if (muiFormControl) {
if (typeof disabled === 'undefined') {
disabled = muiFormControl.disabled;
}
-
if (typeof error === 'undefined') {
error = muiFormControl.error;
}
-
if (typeof margin === 'undefined') {
margin = muiFormControl.margin;
}
+ if (typeof required === 'undefined') {
+ required = muiFormControl.required;
+ }
+ if (typeof focused === 'undefined') {
+ focused = muiFormControl.focused;
+ }
+ if (typeof filled === 'undefined') {
+ filled = muiFormControl.filled;
+ }
}
const className = classNames(
@@ -66,7 +85,10 @@ function FormHelperText(props, context) {
{
[classes.disabled]: disabled,
[classes.error]: error,
+ [classes.filled]: filled,
+ [classes.focused]: focused,
[classes.marginDense]: margin === 'dense',
+ [classes.required]: required,
},
classNameProp,
);
@@ -101,11 +123,23 @@ FormHelperText.propTypes = {
* If `true`, helper text should be displayed in an error state.
*/
error: PropTypes.bool,
+ /**
+ * If `true`, the helper text should use filled classes key.
+ */
+ filled: PropTypes.bool,
+ /**
+ * If `true`, the helper text should use focused classes key.
+ */
+ focused: PropTypes.bool,
/**
* If `dense`, will adjust vertical spacing. This is normally obtained via context from
* FormControl.
*/
margin: PropTypes.oneOf(['dense']),
+ /**
+ * If `true`, the helper text should use required classes key.
+ */
+ required: PropTypes.bool,
};
FormHelperText.defaultProps = {
diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
index bf665a5a93413b..0bc76d5a249d8a 100644
--- a/packages/material-ui/src/FormLabel/FormLabel.js
+++ b/packages/material-ui/src/FormLabel/FormLabel.js
@@ -27,6 +27,10 @@ export const styles = theme => ({
disabled: {},
/* Styles applied to the root element if `error={true}`. */
error: {},
+ /* Styles applied to the root element if `filled={true}`. */
+ filled: {},
+ /* Styles applied to the root element if `required={true}`. */
+ required: {},
asterisk: {
'&$error': {
color: theme.palette.error.main,
@@ -42,6 +46,7 @@ function FormLabel(props, context) {
component: Component,
disabled: disabledProp,
error: errorProp,
+ filled: filledProp,
focused: focusedProp,
required: requiredProp,
...other
@@ -49,10 +54,11 @@ function FormLabel(props, context) {
const { muiFormControl } = context;
- let required = requiredProp;
- let focused = focusedProp;
let disabled = disabledProp;
let error = errorProp;
+ let filled = filledProp;
+ let focused = focusedProp;
+ let required = requiredProp;
if (muiFormControl) {
if (typeof required === 'undefined') {
@@ -67,14 +73,19 @@ function FormLabel(props, context) {
if (typeof error === 'undefined') {
error = muiFormControl.error;
}
+ if (typeof filled === 'undefined') {
+ filled = muiFormControl.filled;
+ }
}
const className = classNames(
classes.root,
{
- [classes.focused]: focused,
[classes.disabled]: disabled,
[classes.error]: error,
+ [classes.filled]: filled,
+ [classes.focused]: focused,
+ [classes.required]: required,
},
classNameProp,
);
@@ -123,6 +134,10 @@ FormLabel.propTypes = {
* If `true`, the label should be displayed in an error state.
*/
error: PropTypes.bool,
+ /**
+ * If `true`, the label should use filled classes key.
+ */
+ filled: PropTypes.bool,
/**
* If `true`, the input of this label is focused (used by `FormGroup` components).
*/
diff --git a/pages/api/form-helper-text.md b/pages/api/form-helper-text.md
index 570326e4aa697d..a1b08fb701476c 100644
--- a/pages/api/form-helper-text.md
+++ b/pages/api/form-helper-text.md
@@ -20,7 +20,10 @@ title: FormHelperText API
| component | union: string |
func |
object
| 'p' | The component used for the root node. Either a string to use a DOM element or a component. |
| disabled | bool | | If `true`, the helper text should be displayed in a disabled state. |
| error | bool | | If `true`, helper text should be displayed in an error state. |
+| filled | bool | | If `true`, the helper text should use filled classes key. |
+| focused | bool | | If `true`, the helper text should use focused classes key. |
| margin | enum: 'dense'
| | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
+| required | bool | | If `true`, the helper text should use required classes key. |
Any other properties supplied will be spread to the root element (native element).
@@ -36,6 +39,9 @@ This property accepts the following keys:
| error | Styles applied to the root element if `error={true}`.
| disabled | Styles applied to the root element if `disabled={true}`.
| marginDense | Styles applied to the root element if `margin="dense"`.
+| focused | Styles applied to the root element if `focused={true}`.
+| filled | Styles applied to the root element if `filled={true}`.
+| required | Styles applied to the root element if `required={true}`.
Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormHelperText/FormHelperText.js)
diff --git a/pages/api/form-label.md b/pages/api/form-label.md
index c6f686dbda9c07..a3457205b3ac9d 100644
--- a/pages/api/form-label.md
+++ b/pages/api/form-label.md
@@ -20,6 +20,7 @@ title: FormLabel API
| component | union: string |
func |
object
| 'label' | The component used for the root node. Either a string to use a DOM element or a component. |
| disabled | bool | | If `true`, the label should be displayed in a disabled state. |
| error | bool | | If `true`, the label should be displayed in an error state. |
+| filled | bool | | If `true`, the label should use filled classes key. |
| focused | bool | | If `true`, the input of this label is focused (used by `FormGroup` components). |
| required | bool | | If `true`, the label will indicate that the input is required. |
@@ -37,6 +38,8 @@ This property accepts the following keys:
| focused | Styles applied to the root element if `focused={true}`.
| disabled | Styles applied to the root element if `disabled={true}`.
| error | Styles applied to the root element if `error={true}`.
+| filled | Styles applied to the root element if `filled={true}`.
+| required | Styles applied to the root element if `required={true}`.
| asterisk |
Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section