diff --git a/.eslintrc.js b/.eslintrc.js index f811f57980f85b..a92a05ca4e01c3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -106,7 +106,8 @@ module.exports = { 'prettier/prettier': 'error', - 'jsx-a11y/label-has-for': 'off', 'jsx-a11y/label-has-associated-control': 'error', + 'jsx-a11y/label-has-for': 'off', + 'jsx-a11y/no-autofocus': 'off', // We are a library, people do what they want. }, }; diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js index 736eb4bb0d771b..4693d89ff5a0a8 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js @@ -111,7 +111,7 @@ ToggleButtonGroup.propTypes = { */ className: PropTypes.string, /** - * If `true` only allow one of the child ToggleButton values to be selected. + * If `true`, only allow one of the child ToggleButton values to be selected. */ exclusive: PropTypes.bool, /** @@ -123,7 +123,7 @@ ToggleButtonGroup.propTypes = { */ onChange: PropTypes.func, /** - * If `true` render the group in a selected state. If `auto` (the default) + * If `true`, render the group in a selected state. If `auto` (the default) * render in a selected state if `value` is not empty. */ selected: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['auto'])]), diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts index 0cb45b5e29dbc6..535d313e2bdada 100644 --- a/packages/material-ui/src/Input/Input.d.ts +++ b/packages/material-ui/src/Input/Input.d.ts @@ -23,6 +23,7 @@ export interface InputProps multiline?: boolean; name?: string; placeholder?: string; + required?: boolean; rows?: string | number; rowsMax?: string | number; startAdornment?: React.ReactNode; diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index eb5c7dbb9c9be5..0034e71b5b8cff 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -207,25 +207,28 @@ function formControlState(props, context) { let disabled = props.disabled; let error = props.error; let margin = props.margin; + let required = props.required; if (context && context.muiFormControl) { if (typeof disabled === 'undefined') { disabled = context.muiFormControl.disabled; } - if (typeof error === 'undefined') { error = context.muiFormControl.error; } - if (typeof margin === 'undefined') { margin = context.muiFormControl.margin; } + if (typeof required === 'undefined') { + required = context.muiFormControl.required; + } } return { disabled, error, margin, + required, }; } @@ -422,7 +425,7 @@ class Input extends React.Component { } = this.props; const { muiFormControl } = this.context; - const { disabled, error, margin } = formControlState(this.props, this.context); + const { disabled, error, margin, required } = formControlState(this.props, this.context); const className = classNames( classes.root, @@ -450,8 +453,6 @@ class Input extends React.Component { inputPropsClassName, ); - const required = muiFormControl && muiFormControl.required === true; - let InputComponent = 'input'; let inputProps = { ...inputPropsProp, @@ -500,7 +501,7 @@ class Input extends React.Component { onKeyUp={onKeyUp} placeholder={placeholder} readOnly={readOnly} - required={required ? true : undefined} + required={required} rows={rows} type={type} value={value} @@ -624,9 +625,14 @@ Input.propTypes = { */ placeholder: PropTypes.string, /** - * @ignore + * It prevents the user from changing the value of the field + * (not from interacting with the field). */ readOnly: PropTypes.bool, + /** + * If `true`, the input will be required. + */ + required: PropTypes.bool, /** * Number of rows to display when multiline option is set to true. */ diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index 92fad2fdd5db1c..7985c95220d459 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-autofocus */ - import React from 'react'; import { assert } from 'chai'; import { spy, stub } from 'sinon'; diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js index 3ba1e64cfca052..fd6bb10e1b0b61 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -232,7 +232,7 @@ TextField.propTypes = { */ placeholder: PropTypes.string, /** - * If `true`, the label is displayed as required. + * If `true`, the label is displayed as required and the input will be required. */ required: PropTypes.bool, /** diff --git a/packages/material-ui/src/internal/SwitchBase.d.ts b/packages/material-ui/src/internal/SwitchBase.d.ts index f22c6e4a2b9954..7d89790f86ec5a 100644 --- a/packages/material-ui/src/internal/SwitchBase.d.ts +++ b/packages/material-ui/src/internal/SwitchBase.d.ts @@ -4,6 +4,7 @@ import { IconButtonProps } from '../IconButton'; export interface SwitchBaseProps extends StandardProps { + autoFocus?: boolean; checked?: boolean | string; checkedIcon: React.ReactNode; defaultChecked?: boolean; @@ -16,6 +17,8 @@ export interface SwitchBaseProps inputRef?: React.Ref; name?: string; onChange?: (event: React.ChangeEvent, checked: boolean) => void; + readOnly?: boolean; + required?: boolean; tabIndex?: number; value?: string; } diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index 7903ede06cc6db..dab8d0cfc133d2 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -87,6 +87,7 @@ class SwitchBase extends React.Component { render() { const { + autoFocus, checked: checkedProp, checkedIcon, classes, @@ -100,6 +101,8 @@ class SwitchBase extends React.Component { onBlur, onChange, onFocus, + readOnly, + required, tabIndex, type, value, @@ -138,16 +141,19 @@ class SwitchBase extends React.Component { > {checked ? checkedIcon : icon} @@ -158,6 +164,10 @@ class SwitchBase extends React.Component { // NB: If changed, please update Checkbox, Switch and Radio // so that the API documentation is updated. SwitchBase.propTypes = { + /** + * If `true`, the input will be focused during the first mount. + */ + autoFocus: PropTypes.bool, /** * If `true`, the component is checked. */ @@ -231,6 +241,15 @@ SwitchBase.propTypes = { * @ignore */ onFocus: PropTypes.func, + /** + * It prevents the user from changing the value of the field + * (not from interacting with the field). + */ + readOnly: PropTypes.bool, + /** + * If `true`, the input will be required. + */ + required: PropTypes.bool, /** * @ignore */ diff --git a/pages/api/input.md b/pages/api/input.md index 9f9463d3aca986..8f964305701908 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -34,6 +34,8 @@ title: Input API | name | string |   | Name attribute of the `input` element. | | onChange | func |   | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. | | placeholder | string |   | The short hint displayed in the input before the user enters a value. | +| readOnly | bool |   | It prevents the user from changing the value of the field (not from interacting with the field). | +| required | bool |   | If `true`, the input will be required. | | rows | union: string |
 number
|   | Number of rows to display when multiline option is set to true. | | rowsMax | union: string |
 number
|   | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node |   | Start `InputAdornment` for this component. | diff --git a/pages/api/text-field.md b/pages/api/text-field.md index 1024456b2f4728..18e661a47205ef 100644 --- a/pages/api/text-field.md +++ b/pages/api/text-field.md @@ -59,7 +59,7 @@ For advanced cases, please look at the source of TextField by clicking on the | name | string |   | Name attribute of the `input` element. | | onChange | func |   | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`. | | placeholder | string |   | The short hint displayed in the input before the user enters a value. | -| required | bool | false | If `true`, the label is displayed as required. | +| required | bool | false | If `true`, the label is displayed as required and the input will be required. | | rows | union: string |
 number
|   | Number of rows to display when multiline option is set to true. | | rowsMax | union: string |
 number
|   | Maximum number of rows to display when multiline option is set to true. | | select | bool | false | Render a `Select` element while passing the `Input` element to `Select` as `input` parameter. If this option is set you must pass the options of the select as children. | diff --git a/pages/lab/api/toggle-button-group.md b/pages/lab/api/toggle-button-group.md index 9b16a534eb2d19..da35b4b38e5c30 100644 --- a/pages/lab/api/toggle-button-group.md +++ b/pages/lab/api/toggle-button-group.md @@ -17,9 +17,9 @@ title: ToggleButtonGroup API |:-----|:-----|:--------|:------------| | children * | node |   | The content of the button. | | classes | object |   | Useful to extend the style applied to components. | -| exclusive | bool | false | If `true` only allow one of the child ToggleButton values to be selected. | +| exclusive | bool | false | If `true`, only allow one of the child ToggleButton values to be selected. | | onChange | func |   | Callback fired when the value changes.

**Signature:**
`function(event: object, value: object) => void`
*event:* The event source of the callback
*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. | -| selected | union: bool |
 enum: 'auto'

| 'auto' | If `true` render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty. | +| selected | union: bool |
 enum: 'auto'

| 'auto' | If `true`, render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty. | | value | any | null | The currently selected value within the group or an array of selected values when `exclusive` is false. | Any other properties supplied will be spread to the root element (native element).