Skip to content

Commit

Permalink
[FormLabel] [FormHelperText] classes keys (#12373)
Browse files Browse the repository at this point in the history 
* [Tooltip] childrenRef

* [FormLabel] [FormHelperText] classes keys

* Remove tooltip changes

* Proptypes added

* PropTypes sorted

* let's merge
  • Loading branch information
@Mangatt @oliviertassinari
Mangatt authored and oliviertassinari committed Aug 2, 2018
1 parent fb201b4 commit 857928e
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 6 deletions.
40 changes: 37 additions & 3 deletions packages/material-ui/src/FormHelperText/FormHelperText.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,44 +29,66 @@ 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(
classes.root,
{
[classes.disabled]: disabled,
[classes.error]: error,
[classes.filled]: filled,
[classes.focused]: focused,
[classes.marginDense]: margin === 'dense',
[classes.required]: required,
},
classNameProp,
);
Expand Down Expand Up @@ -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 = {
Expand Down
21 changes: 18 additions & 3 deletions packages/material-ui/src/FormLabel/FormLabel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -42,17 +46,19 @@ function FormLabel(props, context) {
component: Component,
disabled: disabledProp,
error: errorProp,
filled: filledProp,
focused: focusedProp,
required: requiredProp,
...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') {
Expand All @@ -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,
);
Expand Down Expand Up @@ -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).
*/
Expand Down
6 changes: 6 additions & 0 deletions pages/api/form-helper-text.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ title: FormHelperText API
| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">'p'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool |   | If `true`, the helper text should be displayed in a disabled state. |
| <span class="prop-name">error</span> | <span class="prop-type">bool |   | If `true`, helper text should be displayed in an error state. |
| <span class="prop-name">filled</span> | <span class="prop-type">bool |   | If `true`, the helper text should use filled classes key. |
| <span class="prop-name">focused</span> | <span class="prop-type">bool |   | If `true`, the helper text should use focused classes key. |
| <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'<br> |   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
| <span class="prop-name">required</span> | <span class="prop-type">bool |   | If `true`, the helper text should use required classes key. |

Any other properties supplied will be spread to the root element (native element).

Expand All @@ -36,6 +39,9 @@ This property accepts the following keys:
| <span class="prop-name">error</span> | Styles applied to the root element if `error={true}`.
| <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
| <span class="prop-name">marginDense</span> | Styles applied to the root element if `margin="dense"`.
| <span class="prop-name">focused</span> | Styles applied to the root element if `focused={true}`.
| <span class="prop-name">filled</span> | Styles applied to the root element if `filled={true}`.
| <span class="prop-name">required</span> | 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)
Expand Down
3 changes: 3 additions & 0 deletions pages/api/form-label.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ title: FormLabel API
| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> | <span class="prop-default">'label'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
| <span class="prop-name">disabled</span> | <span class="prop-type">bool |   | If `true`, the label should be displayed in a disabled state. |
| <span class="prop-name">error</span> | <span class="prop-type">bool |   | If `true`, the label should be displayed in an error state. |
| <span class="prop-name">filled</span> | <span class="prop-type">bool |   | If `true`, the label should use filled classes key. |
| <span class="prop-name">focused</span> | <span class="prop-type">bool |   | If `true`, the input of this label is focused (used by `FormGroup` components). |
| <span class="prop-name">required</span> | <span class="prop-type">bool |   | If `true`, the label will indicate that the input is required. |

Expand All @@ -37,6 +38,8 @@ This property accepts the following keys:
| <span class="prop-name">focused</span> | Styles applied to the root element if `focused={true}`.
| <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
| <span class="prop-name">error</span> | Styles applied to the root element if `error={true}`.
| <span class="prop-name">filled</span> | Styles applied to the root element if `filled={true}`.
| <span class="prop-name">required</span> | Styles applied to the root element if `required={true}`.
| <span class="prop-name">asterisk</span> |

Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
Expand Down

0 comments on commit 857928e

Please sign in to comment.