From 8f28bc98c1098dff144983800c59d92b8b9363be Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 2 Aug 2018 22:22:54 +0200 Subject: [PATCH] let's merge --- .../src/FormHelperText/FormHelperText.js | 14 +++++++------- packages/material-ui/src/FormLabel/FormLabel.js | 8 ++++---- pages/api/form-helper-text.md | 6 ++++++ pages/api/form-label.md | 3 +++ 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js index c478b16d387cfb..44d911dd71858f 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.js @@ -41,23 +41,23 @@ function FormHelperText(props, context) { const { classes, className: classNameProp, + component: Component, disabled: disabledProp, error: errorProp, - margin: marginProp, - component: Component, + filled: filledProp, focused: focusedProp, + margin: marginProp, required: requiredProp, - filled: filledProp, ...other } = props; const { muiFormControl } = context; let disabled = disabledProp; let error = errorProp; + let filled = filledProp; + let focused = focusedProp; let margin = marginProp; let required = requiredProp; - let focused = focusedProp; - let filled = filledProp; if (muiFormControl) { if (typeof disabled === 'undefined') { @@ -85,9 +85,9 @@ function FormHelperText(props, context) { { [classes.disabled]: disabled, [classes.error]: error, - [classes.marginDense]: margin === 'dense', - [classes.focused]: focused, [classes.filled]: filled, + [classes.focused]: focused, + [classes.marginDense]: margin === 'dense', [classes.required]: required, }, classNameProp, diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js index 818b9007f88d67..0bc76d5a249d8a 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.js +++ b/packages/material-ui/src/FormLabel/FormLabel.js @@ -46,19 +46,19 @@ function FormLabel(props, context) { component: Component, disabled: disabledProp, error: errorProp, + filled: filledProp, focused: focusedProp, required: requiredProp, - filled: filledProp, ...other } = props; 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') { @@ -81,10 +81,10 @@ function FormLabel(props, context) { const className = classNames( classes.root, { - [classes.focused]: focused, [classes.disabled]: disabled, [classes.error]: error, [classes.filled]: filled, + [classes.focused]: focused, [classes.required]: required, }, classNameProp, 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