From 23e065433b814493afe46cda4947a12e1d770669 Mon Sep 17 00:00:00 2001 From: Mangatt Date: Thu, 2 Aug 2018 11:59:51 +0800 Subject: [PATCH 1/6] [Tooltip] childrenRef --- packages/material-ui/src/Tooltip/Tooltip.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 19d96a2caf20d0..02e0c31fbb611a 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -172,6 +172,10 @@ class Tooltip extends React.Component { return; } + if (!this.childrenRef) { + return; + } + // Remove the title ahead of time. // We don't want to wait for the next render commit. // We would risk displaying two tooltips at the same time (native + this one). From a42b6b378ae6353aeca0a34a147d16b7b9a3adc5 Mon Sep 17 00:00:00 2001 From: Mangatt Date: Thu, 2 Aug 2018 12:41:11 +0800 Subject: [PATCH 2/6] [FormLabel] [FormHelperText] classes keys --- .../src/FormHelperText/FormHelperText.js | 26 +++++++++++++++++-- .../material-ui/src/FormLabel/FormLabel.js | 11 ++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js index 965efd55f09bd2..9108bade77072a 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.js @@ -29,6 +29,12 @@ 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) { @@ -39,6 +45,9 @@ function FormHelperText(props, context) { error: errorProp, margin: marginProp, component: Component, + focused: focusedProp, + required: requiredProp, + filled: filledProp, ...other } = props; const { muiFormControl } = context; @@ -46,19 +55,29 @@ function FormHelperText(props, context) { let disabled = disabledProp; let error = errorProp; let margin = marginProp; + let required = requiredProp; + let focused = focusedProp; + let filled = filledProp; 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( @@ -67,6 +86,9 @@ function FormHelperText(props, context) { [classes.disabled]: disabled, [classes.error]: error, [classes.marginDense]: margin === 'dense', + [classes.focused]: focused, + [classes.filled]: filled, + [classes.required]: required, }, classNameProp, ); diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js index bf665a5a93413b..07683b7e21cc27 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, @@ -44,6 +48,7 @@ function FormLabel(props, context) { error: errorProp, focused: focusedProp, required: requiredProp, + filled: filledProp, ...other } = props; @@ -53,6 +58,7 @@ function FormLabel(props, context) { let focused = focusedProp; let disabled = disabledProp; let error = errorProp; + let filled = filledProp; if (muiFormControl) { if (typeof required === 'undefined') { @@ -67,6 +73,9 @@ function FormLabel(props, context) { if (typeof error === 'undefined') { error = muiFormControl.error; } + if (typeof filled === 'undefined') { + filled = muiFormControl.filled; + } } const className = classNames( @@ -75,6 +84,8 @@ function FormLabel(props, context) { [classes.focused]: focused, [classes.disabled]: disabled, [classes.error]: error, + [classes.filled]: filled, + [classes.required]: required, }, classNameProp, ); From da345b2dbc92cc8ee2d5b2e4dc2ceeca4e42d9d1 Mon Sep 17 00:00:00 2001 From: Mangatt Date: Thu, 2 Aug 2018 12:44:44 +0800 Subject: [PATCH 3/6] Remove tooltip changes --- packages/material-ui/src/Tooltip/Tooltip.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 02e0c31fbb611a..19d96a2caf20d0 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -172,10 +172,6 @@ class Tooltip extends React.Component { return; } - if (!this.childrenRef) { - return; - } - // Remove the title ahead of time. // We don't want to wait for the next render commit. // We would risk displaying two tooltips at the same time (native + this one). From c9fcfe81fc69d0b42ac50e6f5e79606bc6a3be09 Mon Sep 17 00:00:00 2001 From: Mangatt Date: Thu, 2 Aug 2018 13:21:54 +0800 Subject: [PATCH 4/6] Proptypes added --- .../src/FormHelperText/FormHelperText.js | 18 +++++++++++++++++- .../material-ui/src/FormLabel/FormLabel.js | 4 ++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js index 9108bade77072a..fe54c627e190be 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.js @@ -29,7 +29,7 @@ export const styles = theme => ({ marginDense: { marginTop: 4, }, - /* Styles applied to the root element if `focused={true}`. */ + /* Styles applied to the root element if `focused={true}`. */ focused: {}, /* Styles applied to the root element if `filled={true}`. */ filled: {}, @@ -123,6 +123,22 @@ FormHelperText.propTypes = { * If `true`, helper text should be displayed in an error state. */ error: PropTypes.bool, + /** + * If `dense`, will adjust vertical spacing. This is normally obtained via context from + * FormControl. + */ + /** + * If `true`, the helper text should use focused classes key. + */ + focused: PropTypes.bool, + /** + * If `true`, the helper text should use required classes key. + */ + required: PropTypes.bool, + /** + * If `true`, the helper text should use filled classes key. + */ + filled: PropTypes.bool, /** * If `dense`, will adjust vertical spacing. This is normally obtained via context from * FormControl. diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js index 07683b7e21cc27..9130ceffb2c1f2 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.js +++ b/packages/material-ui/src/FormLabel/FormLabel.js @@ -142,6 +142,10 @@ FormLabel.propTypes = { * If `true`, the label will indicate that the input is required. */ required: PropTypes.bool, + /** + * If `true`, the label should use filled classes key. + */ + filled: PropTypes.bool, }; FormLabel.defaultProps = { From bfe849c6c04fd61d73e357afdf00523a64d0c53a Mon Sep 17 00:00:00 2001 From: Mangatt Date: Thu, 2 Aug 2018 13:57:17 +0800 Subject: [PATCH 5/6] PropTypes sorted --- .../src/FormHelperText/FormHelperText.js | 16 ++++++---------- packages/material-ui/src/FormLabel/FormLabel.js | 8 ++++---- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js index fe54c627e190be..c478b16d387cfb 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.js @@ -124,26 +124,22 @@ FormHelperText.propTypes = { */ error: PropTypes.bool, /** - * If `dense`, will adjust vertical spacing. This is normally obtained via context from - * FormControl. + * 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 `true`, the helper text should use required classes key. - */ - required: PropTypes.bool, - /** - * If `true`, the helper text should use filled classes key. - */ - filled: 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 9130ceffb2c1f2..818b9007f88d67 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.js +++ b/packages/material-ui/src/FormLabel/FormLabel.js @@ -134,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). */ @@ -142,10 +146,6 @@ FormLabel.propTypes = { * If `true`, the label will indicate that the input is required. */ required: PropTypes.bool, - /** - * If `true`, the label should use filled classes key. - */ - filled: PropTypes.bool, }; FormLabel.defaultProps = { From 8f28bc98c1098dff144983800c59d92b8b9363be Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 2 Aug 2018 22:22:54 +0200 Subject: [PATCH 6/6] 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