diff --git a/docs/pages/api-docs/filled-input.md b/docs/pages/api-docs/filled-input.md index 6a8fdfb224f538..215356d9772e17 100644 --- a/docs/pages/api-docs/filled-input.md +++ b/docs/pages/api-docs/filled-input.md @@ -43,6 +43,8 @@ The `MuiFilledInput` name can be used for providing [default props](/customizati | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| maxRows | number
| string | | Maximum number of rows to display when multiline option is set to true. | +| minRows | number
| string | | Minimum number of rows to display when multiline option is set to true. | | 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` (string). | @@ -50,7 +52,6 @@ The `MuiFilledInput` name can be used for providing [default props](/customizati | 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` element will be required. | | rows | number
| string | | Number of rows to display when multiline option is set to true. | -| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | 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. | diff --git a/docs/pages/api-docs/input-base.md b/docs/pages/api-docs/input-base.md index 6d3cd982055386..a7d73ad1ef52a0 100644 --- a/docs/pages/api-docs/input-base.md +++ b/docs/pages/api-docs/input-base.md @@ -44,6 +44,8 @@ The `MuiInputBase` name can be used for providing [default props](/customization | inputProps | object | {} | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| maxRows | number
| string | | Maximum number of rows to display when multiline option is set to true. | +| minRows | number
| string | | Minimum number of rows to display when multiline option is set to true. | | multiline | bool | false | If `true`, a textarea element will be rendered. | | name | string | | Name attribute of the `input` element. | | onBlur | func | | Callback fired when the input is blurred.
Notice that the first argument (event) might be undefined. | @@ -52,8 +54,6 @@ The `MuiInputBase` name can be used for providing [default props](/customization | 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` element will be required. | | rows | number
| string | | Number of rows to display when multiline option is set to true. | -| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | -| rowsMin | number
| string | | Minimum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | 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. | diff --git a/docs/pages/api-docs/input.md b/docs/pages/api-docs/input.md index 9e8affb4a3aa1e..ecab0197134649 100644 --- a/docs/pages/api-docs/input.md +++ b/docs/pages/api-docs/input.md @@ -43,6 +43,8 @@ The `MuiInput` name can be used for providing [default props](/customization/glo | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| maxRows | number
| string | | Maximum number of rows to display when multiline option is set to true. | +| minRows | number
| string | | Minimum number of rows to display when multiline option is set to true. | | 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` (string). | @@ -50,7 +52,6 @@ The `MuiInput` name can be used for providing [default props](/customization/glo | 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` element will be required. | | rows | number
| string | | Number of rows to display when multiline option is set to true. | -| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | 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. | diff --git a/docs/pages/api-docs/outlined-input.md b/docs/pages/api-docs/outlined-input.md index 679bb34d3e1ca6..02aa8f215d8194 100644 --- a/docs/pages/api-docs/outlined-input.md +++ b/docs/pages/api-docs/outlined-input.md @@ -44,6 +44,8 @@ The `MuiOutlinedInput` name can be used for providing [default props](/customiza | label | node | | The label of the input. It is only used for layout. The actual labelling is handled by `InputLabel`. If specified `labelWidth` is ignored. | | labelWidth | number | 0 | The width of the label. Is ignored if `label` is provided. Prefer `label` if the input label appears with a strike through. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | +| maxRows | number
| string | | Maximum number of rows to display when multiline option is set to true. | +| minRows | number
| string | | Minimum number of rows to display when multiline option is set to true. | | 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. | @@ -52,7 +54,6 @@ The `MuiOutlinedInput` name can be used for providing [default props](/customiza | 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` element will be required. | | rows | number
| string | | Number of rows to display when multiline option is set to true. | -| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | 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. | diff --git a/docs/pages/api-docs/text-field.md b/docs/pages/api-docs/text-field.md index 6e6117e0012c38..2fb1432dbd3d45 100644 --- a/docs/pages/api-docs/text-field.md +++ b/docs/pages/api-docs/text-field.md @@ -74,14 +74,14 @@ The `MuiTextField` name can be used for providing [default props](/customization | inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The label content. | | margin | 'dense'
| 'none'
| 'normal' | | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | +| maxRows | number
| string | | Maximum number of rows to display when multiline option is set to true. | +| minRows | number
| string | | Minimum number of rows to display when multiline option is set to true. | | multiline | bool | false | If `true`, a textarea element will be rendered instead of an input. | | 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` (string). | | 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 and the `input` element will be required. | | rows | number
| string | | Number of rows to display when multiline option is set to true. | -| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | -| rowsMin | number
| string | | Minimum number of rows to display when multiline option is set to true. | | select | bool | false | Render a [`Select`](/api/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. | | SelectProps | object | | Props applied to the [`Select`](/api/select/) element. | | size | 'medium'
| 'small' | | The size of the text field. | diff --git a/docs/pages/api-docs/textarea-autosize.md b/docs/pages/api-docs/textarea-autosize.md index f24cfd7b20a0a7..df086738649d7b 100644 --- a/docs/pages/api-docs/textarea-autosize.md +++ b/docs/pages/api-docs/textarea-autosize.md @@ -26,8 +26,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| rowsMax | number
| string | | Maximum number of rows to display. | -| rowsMin | number
| string | 1 | Minimum number of rows to display. | +| maxRows | number
| string | | Maximum number of rows to display. | +| minRows | number
| string | 1 | Minimum number of rows to display. | The `ref` is forwarded to the root element. diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.js b/docs/src/pages/components/text-fields/MultilineTextFields.js index cb2ae01bfacf84..155180116bee52 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.js +++ b/docs/src/pages/components/text-fields/MultilineTextFields.js @@ -26,7 +26,7 @@ export default function MultilineTextFields() { id="standard-multiline-flexible" label="Multiline" multiline - rowsMax={4} + maxRows={4} value={value} onChange={handleChange} /> @@ -49,7 +49,7 @@ export default function MultilineTextFields() { id="filled-multiline-flexible" label="Multiline" multiline - rowsMax={4} + maxRows={4} value={value} onChange={handleChange} variant="filled" @@ -75,7 +75,7 @@ export default function MultilineTextFields() { id="outlined-multiline-flexible" label="Multiline" multiline - rowsMax={4} + maxRows={4} value={value} onChange={handleChange} variant="outlined" diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.tsx b/docs/src/pages/components/text-fields/MultilineTextFields.tsx index 2af4c3384593be..42afd4cf4f071a 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.tsx +++ b/docs/src/pages/components/text-fields/MultilineTextFields.tsx @@ -28,7 +28,7 @@ export default function MultilineTextFields() { id="standard-multiline-flexible" label="Multiline" multiline - rowsMax={4} + maxRows={4} value={value} onChange={handleChange} /> @@ -51,7 +51,7 @@ export default function MultilineTextFields() { id="filled-multiline-flexible" label="Multiline" multiline - rowsMax={4} + maxRows={4} value={value} onChange={handleChange} variant="filled" @@ -77,7 +77,7 @@ export default function MultilineTextFields() { id="outlined-multiline-flexible" label="Multiline" multiline - rowsMax={4} + maxRows={4} value={value} onChange={handleChange} variant="outlined" diff --git a/docs/src/pages/components/textarea-autosize/MaxHeightTextarea.js b/docs/src/pages/components/textarea-autosize/MaxHeightTextarea.js index ea481a374d300e..0d228010643d43 100644 --- a/docs/src/pages/components/textarea-autosize/MaxHeightTextarea.js +++ b/docs/src/pages/components/textarea-autosize/MaxHeightTextarea.js @@ -4,7 +4,7 @@ import TextareaAutosize from '@material-ui/core/TextareaAutosize'; export default function MaxHeightTextarea() { return ( ); diff --git a/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx b/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx index 9986ed27ffc021..b89f656da8a045 100644 --- a/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx +++ b/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx @@ -5,7 +5,7 @@ export default function MinHeightTextarea() { return ( ); diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 51fba8f457d96d..a2e10b3d09469b 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -64,7 +64,8 @@ This change affects almost all components where you're using the `component` pro ### BottomNavigation -- typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + ```diff -) => {}} /> + {}} /> @@ -147,7 +148,7 @@ This change affects almost all components where you're using the `component` pro + ``` -- typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. ```diff -, expanded: boolean) => {}} /> @@ -218,7 +219,8 @@ This change affects almost all components where you're using the `component` pro ### Slider -- typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + ```diff -, value: unknown) => {}} /> + {}} /> @@ -237,7 +239,7 @@ This change affects almost all components where you're using the `component` pro ### Tabs -- typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. +- TypeScript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. ```diff -, value: unknown) => {}} /> + {}} /> @@ -246,21 +248,42 @@ This change affects almost all components where you're using the `component` pro ### TextField - Better isolate the fixed textarea height behavior to the dynamic one. - You need to use the `rowsMin` prop in the following case: + You need to use the `minRows` prop in the following case: ```diff - - - + + - + + + ``` + +- Rename `rowsMax` prop with `maxRows` for consistency with HTML attributes. + + ```diff + - + + ``` ### TextareaAutosize -- Remove the `rows` prop, use the `rowsMin` prop instead. +- Remove the `rows` prop, use the `minRows` prop instead. This change aims to clarify the behavior of the prop. ```diff - - + + + + ``` + +- Rename `rowsMax` prop with `maxRows` for consistency with HTML attributes. + + ```diff + - + + + ``` + +- Rename `rowsMin` prop with `minRows` for consistency with HTML attributes. + + ```diff + - + + ``` ### Typography diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 2ff20166ace317..d38e9dc1b391c6 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -293,8 +293,8 @@ export const componentSettings = { 'margin', 'onChange', 'rows', - 'rowsMin', - 'rowsMax', + 'minRows', + 'maxRows', 'select', 'type', 'value', diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index bf3589d1f1e20c..ded3c1e7496271 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -250,6 +250,14 @@ FilledInput.propTypes = { * FormControl. */ margin: PropTypes.oneOf(['dense', 'none']), + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * Minimum number of rows to display when multiline option is set to true. + */ + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. */ @@ -282,10 +290,6 @@ FilledInput.propTypes = { * Number of rows to display when multiline option is set to true. */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Maximum number of rows to display when multiline option is set to true. - */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index a2ded8e8f2f3fa..f9e5cdaaecf7eb 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -198,6 +198,14 @@ Input.propTypes = { * FormControl. */ margin: PropTypes.oneOf(['dense', 'none']), + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * Minimum number of rows to display when multiline option is set to true. + */ + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. */ @@ -230,10 +238,6 @@ Input.propTypes = { * Number of rows to display when multiline option is set to true. */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Maximum number of rows to display when multiline option is set to true. - */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts index 3373155e086c60..43a3584592983c 100644 --- a/packages/material-ui/src/InputBase/InputBase.d.ts +++ b/packages/material-ui/src/InputBase/InputBase.d.ts @@ -123,11 +123,11 @@ export interface InputBaseProps /** * Maximum number of rows to display when multiline option is set to true. */ - rowsMax?: string | number; + maxRows?: string | number; /** * Minimum number of rows to display when multiline option is set to true. */ - rowsMin?: string | number; + minRows?: string | number; /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index 25145bc7f3e235..af52cbf82cdbb2 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -180,6 +180,8 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { inputProps: inputPropsProp = {}, inputRef: inputRefProp, margin, + maxRows, + minRows, multiline = false, name, onBlur, @@ -192,8 +194,6 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { readOnly, renderSuffix, rows, - rowsMax, - rowsMin, startAdornment, type = 'text', value: valueProp, @@ -374,16 +374,16 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { if (rows) { InputComponent = 'textarea'; if (process.env.NODE_ENV !== 'production') { - if (rowsMin || rowsMax) { + if (minRows || maxRows) { console.warn( - 'Material-UI: You can not use the `rowsMin` or `rowsMax` props when the input `rows` prop is set.', + 'Material-UI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.', ); } } } else { inputProps = { - rowsMax, - rowsMin, + maxRows, + minRows, ...inputProps, }; @@ -553,6 +553,14 @@ InputBase.propTypes = { * FormControl. */ margin: PropTypes.oneOf(['dense', 'none']), + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * Minimum number of rows to display when multiline option is set to true. + */ + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. */ @@ -611,14 +619,6 @@ InputBase.propTypes = { * Number of rows to display when multiline option is set to true. */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Maximum number of rows to display when multiline option is set to true. - */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Minimum number of rows to display when multiline option is set to true. - */ - rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js index 2d87b3d6f49b78..e22dce1e42fd81 100644 --- a/packages/material-ui/src/InputBase/InputBase.test.js +++ b/packages/material-ui/src/InputBase/InputBase.test.js @@ -54,7 +54,7 @@ describe('', () => { }); it('should forward the value to the TextareaAutosize', () => { - const wrapper = mount(); + const wrapper = mount(); expect(wrapper.find(TextareaAutosize).props()).to.have.property('value', ''); }); }); diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 6792be64a219ef..68f826697d1e30 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -218,6 +218,14 @@ OutlinedInput.propTypes = { * FormControl. */ margin: PropTypes.oneOf(['dense', 'none']), + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * Minimum number of rows to display when multiline option is set to true. + */ + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. */ @@ -254,10 +262,6 @@ OutlinedInput.propTypes = { * Number of rows to display when multiline option is set to true. */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Maximum number of rows to display when multiline option is set to true. - */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/TextField/TextField.d.ts b/packages/material-ui/src/TextField/TextField.d.ts index d9ef68dd3bc369..e298355332a136 100644 --- a/packages/material-ui/src/TextField/TextField.d.ts +++ b/packages/material-ui/src/TextField/TextField.d.ts @@ -108,11 +108,11 @@ export interface BaseTextFieldProps /** * Maximum number of rows to display when multiline option is set to true. */ - rowsMax?: string | number; + maxRows?: string | number; /** * Minimum number of rows to display when multiline option is set to true. */ - rowsMin?: string | number; + minRows?: string | number; /** * Render a [`Select`](/api/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/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js index 40872fe8822547..96c65e41bef855 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -75,6 +75,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { InputProps, inputRef, label, + maxRows, multiline = false, name, onBlur, @@ -83,7 +84,6 @@ const TextField = React.forwardRef(function TextField(props, ref) { placeholder, required = false, rows, - rowsMax, select = false, SelectProps, type, @@ -137,7 +137,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { multiline={multiline} name={name} rows={rows} - rowsMax={rowsMax} + maxRows={maxRows} type={type} value={value} id={id} @@ -287,6 +287,14 @@ TextField.propTypes = { * If `dense` or `normal`, will adjust vertical spacing of this and contained components. */ margin: PropTypes.oneOf(['dense', 'none', 'normal']), + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * Minimum number of rows to display when multiline option is set to true. + */ + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered instead of an input. */ @@ -322,14 +330,6 @@ TextField.propTypes = { * Number of rows to display when multiline option is set to true. */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Maximum number of rows to display when multiline option is set to true. - */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * Minimum number of rows to display when multiline option is set to true. - */ - rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Render a [`Select`](/api/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/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts index 1b59a2d1098e8b..411c161791a695 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts @@ -7,11 +7,11 @@ export interface TextareaAutosizeProps /** * Maximum number of rows to display. */ - rowsMax?: string | number; + maxRows?: string | number; /** * Minimum number of rows to display. */ - rowsMin?: string | number; + minRows?: string | number; } /** diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js index 00b10ed4924f0c..bdb258f2588a68 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js @@ -27,7 +27,7 @@ const styles = { }; const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) { - const { onChange, rowsMax, rowsMin = 1, style, value, ...other } = props; + const { onChange, maxRows, minRows = 1, style, value, ...other } = props; const { current: isControlled } = React.useRef(value != null); const inputRef = React.useRef(null); @@ -67,11 +67,11 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) // The height of the outer content let outerHeight = innerHeight; - if (rowsMin) { - outerHeight = Math.max(Number(rowsMin) * singleRowHeight, outerHeight); + if (minRows) { + outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight); } - if (rowsMax) { - outerHeight = Math.min(Number(rowsMax) * singleRowHeight, outerHeight); + if (maxRows) { + outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight); } outerHeight = Math.max(outerHeight, singleRowHeight); @@ -108,7 +108,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) return prevState; }); - }, [rowsMax, rowsMin, props.placeholder]); + }, [maxRows, minRows, props.placeholder]); React.useEffect(() => { const handleResize = debounce(() => { @@ -150,7 +150,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) onChange={handleChange} ref={handleRef} // Apply the rows prop to get a "correct" first SSR paint - rows={rowsMin} + rows={minRows} style={{ height: state.outerHeightStyle, // Need a large enough difference to allow scrolling. @@ -182,21 +182,21 @@ TextareaAutosize.propTypes = { */ className: PropTypes.string, /** - * @ignore + * Maximum number of rows to display. */ - onChange: PropTypes.func, + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** - * @ignore + * Minimum number of rows to display. */ - placeholder: PropTypes.string, + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** - * Maximum number of rows to display. + * @ignore */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + onChange: PropTypes.func, /** - * Minimum number of rows to display. + * @ignore */ - rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + placeholder: PropTypes.string, /** * @ignore */ diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js index 747ac62af27dd5..9cd267a0c08daf 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js @@ -142,10 +142,10 @@ describe('', () => { expect(input.style).to.have.property('overflow', 'hidden'); }); - it('should have at least height of "rowsMin"', () => { - const rowsMin = 3; + it('should have at least height of "minRows"', () => { + const minRows = 3; const lineHeight = 15; - const { container, forceUpdate } = render(); + const { container, forceUpdate } = render(); const input = container.querySelector('textarea[aria-hidden=null]'); const shadow = container.querySelector('textarea[aria-hidden=true]'); setLayout(input, shadow, { @@ -156,14 +156,14 @@ describe('', () => { lineHeight, }); forceUpdate(); - expect(input.style).to.have.property('height', `${lineHeight * rowsMin}px`); + expect(input.style).to.have.property('height', `${lineHeight * minRows}px`); expect(input.style).to.have.property('overflow', ''); }); - it('should have at max "rowsMax" rows', () => { - const rowsMax = 3; + it('should have at max "maxRows" rows', () => { + const maxRows = 3; const lineHeight = 15; - const { container, forceUpdate } = render(); + const { container, forceUpdate } = render(); const input = container.querySelector('textarea[aria-hidden=null]'); const shadow = container.querySelector('textarea[aria-hidden=true]'); setLayout(input, shadow, { @@ -174,14 +174,14 @@ describe('', () => { lineHeight, }); forceUpdate(); - expect(input.style).to.have.property('height', `${lineHeight * rowsMax}px`); + expect(input.style).to.have.property('height', `${lineHeight * maxRows}px`); expect(input.style).to.have.property('overflow', ''); }); - it('should show scrollbar when having more rows than "rowsMax"', () => { - const rowsMax = 3; + it('should show scrollbar when having more rows than "maxRows"', () => { + const maxRows = 3; const lineHeight = 15; - const { container, forceUpdate } = render(); + const { container, forceUpdate } = render(); const input = container.querySelector('textarea[aria-hidden=null]'); const shadow = container.querySelector('textarea[aria-hidden=true]'); setLayout(input, shadow, { @@ -216,9 +216,9 @@ describe('', () => { expect(input.style).to.have.property('overflow', ''); }); - it('should update its height when the "rowsMax" prop changes', () => { + it('should update its height when the "maxRows" prop changes', () => { const lineHeight = 15; - const { container, forceUpdate, setProps } = render(); + const { container, forceUpdate, setProps } = render(); const input = container.querySelector('textarea[aria-hidden=null]'); const shadow = container.querySelector('textarea[aria-hidden=true]'); setLayout(input, shadow, { @@ -231,14 +231,14 @@ describe('', () => { forceUpdate(); expect(input.style).to.have.property('height', `${lineHeight * 3}px`); expect(input.style).to.have.property('overflow', ''); - setProps({ rowsMax: 2 }); + setProps({ maxRows: 2 }); expect(input.style).to.have.property('height', `${lineHeight * 2}px`); expect(input.style).to.have.property('overflow', ''); }); describe('warnings', () => { it('warns if layout is unstable but not crash', () => { - const { container, forceUpdate } = render(); + const { container, forceUpdate } = render(); const input = container.querySelector('textarea[aria-hidden=null]'); const shadow = container.querySelector('textarea[aria-hidden=true]'); let index = 0; diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 1614ae35996109..2d73b2d9f38666 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -36,14 +36,14 @@ const useExternalPropsFromInputBase = [ 'inputProps', 'inputRef', 'margin', + 'maxRows', + 'minRows', 'name', 'onChange', 'placeholder', 'readOnly', 'required', 'rows', - 'rowsMax', - // TODO: why no rowsMin? 'startAdornment', 'value', ]; diff --git a/test/regressions/tests/Textarea/Textarea.js b/test/regressions/tests/Textarea/Textarea.js index 540e8a281751e6..816efff633950b 100644 --- a/test/regressions/tests/Textarea/Textarea.js +++ b/test/regressions/tests/Textarea/Textarea.js @@ -54,7 +54,7 @@ function Textarea() { multiline value={value} onChange={handleChange} - rowsMax={4} + maxRows={4} />