From d1df9a8607c4ffb472175ccf126c412100e6522b Mon Sep 17 00:00:00 2001 From: Prince Hernandez Date: Wed, 24 Apr 2019 05:22:51 -0300 Subject: [PATCH] [Select] Display 0 as a valid value, fix a propType warning (#15468) * [Select] allow 0 as a default value or as a selected value * update name of component on default Props Co-Authored-By: Princezhm * yarn docs:api --- packages/material-ui/src/FilledInput/FilledInput.js | 2 +- packages/material-ui/src/Input/Input.js | 2 +- .../material-ui/src/OutlinedInput/NotchedOutline.js | 2 +- .../material-ui/src/OutlinedInput/OutlinedInput.js | 7 ++++--- packages/material-ui/src/Select/SelectInput.js | 2 +- pages/api/filled-input.md | 8 ++++---- pages/api/input.md | 8 ++++---- pages/api/outlined-input.md | 10 +++++----- 8 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index cf419f268e64ff..5bec6275553520 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -257,7 +257,7 @@ FilledInput.propTypes = { value: PropTypes.any, }; -InputBase.defaultProps = { +FilledInput.defaultProps = { fullWidth: false, inputComponent: 'input', multiline: false, diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 8dfb6dfcfff531..edc912dafe6a1e 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -225,7 +225,7 @@ Input.propTypes = { value: PropTypes.any, }; -InputBase.defaultProps = { +Input.defaultProps = { fullWidth: false, inputComponent: 'input', multiline: false, diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js index 52183011d9e845..11e051733f3139 100644 --- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js +++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js @@ -101,7 +101,7 @@ NotchedOutline.propTypes = { */ className: PropTypes.string, /** - * The width of the legend. + * The width of the label. */ labelWidth: PropTypes.number.isRequired, /** diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 3b1cc9a8be6773..a6179b2dc2a537 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -166,9 +166,9 @@ OutlinedInput.propTypes = { */ inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), /** - * The width of the legend. + * The width of the label. */ - labelWidth: PropTypes.number.isRequired, + labelWidth: PropTypes.number, /** * If `dense`, will adjust vertical spacing. This is normally obtained via context from * FormControl. @@ -228,9 +228,10 @@ OutlinedInput.propTypes = { value: PropTypes.any, }; -InputBase.defaultProps = { +OutlinedInput.defaultProps = { fullWidth: false, inputComponent: 'input', + labelWidth: 0, multiline: false, type: 'text', }; diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index 6a874af7692674..0f79da0f02aa0d 100644 --- a/packages/material-ui/src/Select/SelectInput.js +++ b/packages/material-ui/src/Select/SelectInput.js @@ -276,7 +276,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) { > {/* So the vertical align positioning algorithm kicks in. */} {/* eslint-disable-next-line react/no-danger */} - {display || } + {display != null ? display : } disableUnderline | bool | | If `true`, the input will not have an underline. | | endAdornment | node | | End `InputAdornment` for this component. | | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | -| fullWidth | bool | | If `true`, the input will take up the full width of its container. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | -| inputComponent | elementType | | The component used for the native input. Either a string to use a DOM element or a component. | +| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | union: func |
 object
 | | This property can be used to pass a ref callback to the `input` element. | | margin | enum: 'dense' |
 'none'
 | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| multiline | bool | | If `true`, a textarea element will be rendered. | +| multiline | bool | false | If `true`, a textarea element will be rendered. | | 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. | @@ -42,7 +42,7 @@ import FilledInput from '@material-ui/core/FilledInput'; | 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. | -| type | string | | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | +| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | | value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element. diff --git a/pages/api/input.md b/pages/api/input.md index a7fc384fdcb53f..ee937b78ed613c 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -27,13 +27,13 @@ import Input from '@material-ui/core/Input'; | disableUnderline | bool | | If `true`, the input will not have an underline. | | endAdornment | node | | End `InputAdornment` for this component. | | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | -| fullWidth | bool | | If `true`, the input will take up the full width of its container. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | -| inputComponent | elementType | | The component used for the native input. Either a string to use a DOM element or a component. | +| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | union: func |
 object
 | | This property can be used to pass a ref callback to the `input` element. | | margin | enum: 'dense' |
 'none'
 | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| multiline | bool | | If `true`, a textarea element will be rendered. | +| multiline | bool | false | If `true`, a textarea element will be rendered. | | 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. | @@ -42,7 +42,7 @@ import Input from '@material-ui/core/Input'; | 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. | -| type | string | | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | +| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | | value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element. diff --git a/pages/api/outlined-input.md b/pages/api/outlined-input.md index bb12288763827b..d277c6cf23ec30 100644 --- a/pages/api/outlined-input.md +++ b/pages/api/outlined-input.md @@ -26,14 +26,14 @@ import OutlinedInput from '@material-ui/core/OutlinedInput'; | disabled | bool | | If `true`, the `input` element will be disabled. | | endAdornment | node | | End `InputAdornment` for this component. | | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | -| fullWidth | bool | | If `true`, the input will take up the full width of its container. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | -| inputComponent | elementType | | The component used for the native input. Either a string to use a DOM element or a component. | +| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | union: func |
 object
 | | This property can be used to pass a ref callback to the `input` element. | -| labelWidth * | number | | The width of the legend. | +| labelWidth | number | 0 | The width of the label. | | margin | enum: 'dense' |
 'none'
 | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | -| multiline | bool | | If `true`, a textarea element will be rendered. | +| multiline | bool | false | If `true`, a textarea element will be rendered. | | name | string | | Name attribute of the `input` element. | | notched | bool | | If `true`, the outline is notched to accommodate the label. | | 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`. | @@ -43,7 +43,7 @@ import OutlinedInput from '@material-ui/core/OutlinedInput'; | 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. | -| type | string | | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | +| type | string | 'text' | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). | | value | any | | The value of the `input` element, required for a controlled component. | The `ref` is forwarded to the root element.