From 863b6f914e0477fc796cf83f4d3f46d13b4a062d Mon Sep 17 00:00:00 2001 From: Mhayk Whandson Date: Wed, 25 Nov 2020 21:16:53 +0000 Subject: [PATCH] [TextareaAutosize] Deprecate rowsMax->maxRows & rowsMin->minRows (#23530) --- docs/pages/api-docs/filled-input.md | 2 +- docs/pages/api-docs/input-base.md | 6 +- docs/pages/api-docs/input.md | 2 +- docs/pages/api-docs/outlined-input.md | 2 +- docs/pages/api-docs/text-field.md | 3 +- docs/pages/api-docs/textarea-autosize.md | 8 ++- .../text-fields/MultilineTextFields.js | 6 +- .../text-fields/MultilineTextFields.tsx | 6 +- .../textarea-autosize/MaxHeightTextarea.js | 2 +- .../textarea-autosize/MaxHeightTextarea.tsx | 2 +- .../textarea-autosize/MinHeightTextarea.js | 2 +- .../textarea-autosize/MinHeightTextarea.tsx | 2 +- framer/scripts/framerConfig.js | 2 +- packages/material-ui/src/Dialog/Dialog.d.ts | 6 ++ packages/material-ui/src/Dialog/Dialog.js | 6 ++ .../src/FilledInput/FilledInput.js | 8 +-- packages/material-ui/src/Input/Input.js | 8 +-- .../material-ui/src/InputBase/InputBase.d.ts | 14 ++++- .../material-ui/src/InputBase/InputBase.js | 21 +++++-- .../src/InputBase/InputBase.test.js | 2 +- packages/material-ui/src/Menu/Menu.d.ts | 6 ++ packages/material-ui/src/Menu/Menu.js | 6 ++ .../src/OutlinedInput/OutlinedInput.js | 8 +-- packages/material-ui/src/Popover/Popover.d.ts | 6 ++ packages/material-ui/src/Popover/Popover.js | 6 ++ .../material-ui/src/Snackbar/Snackbar.d.ts | 6 ++ packages/material-ui/src/Snackbar/Snackbar.js | 6 ++ .../material-ui/src/TextField/TextField.d.ts | 7 ++- .../material-ui/src/TextField/TextField.js | 9 ++- .../TextareaAutosize/TextareaAutosize.d.ts | 15 ++++- .../src/TextareaAutosize/TextareaAutosize.js | 60 ++++++++++++++----- .../TextareaAutosize/TextareaAutosize.test.js | 30 +++++----- scripts/generateProptypes.ts | 4 +- test/regressions/tests/Textarea/Textarea.js | 2 +- 34 files changed, 204 insertions(+), 77 deletions(-) diff --git a/docs/pages/api-docs/filled-input.md b/docs/pages/api-docs/filled-input.md index 409879169d4f32..9cc1f558468114 100644 --- a/docs/pages/api-docs/filled-input.md +++ b/docs/pages/api-docs/filled-input.md @@ -43,6 +43,7 @@ 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. | | 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 +51,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 4dfc433b883637..68b129839b7799 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,8 @@ 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. | +| rowsMax | number
| string | | Maximum number of rows to display. | +| rowsMin | number
| string | | Minimum number of rows to display. | | 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 a2403ddca0c1c1..fa23ba632f067a 100644 --- a/docs/pages/api-docs/input.md +++ b/docs/pages/api-docs/input.md @@ -43,6 +43,7 @@ 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. | | 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 +51,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 5a77f6b6a34485..b7f0cd519e2bca 100644 --- a/docs/pages/api-docs/outlined-input.md +++ b/docs/pages/api-docs/outlined-input.md @@ -44,6 +44,7 @@ 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. | | 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 +53,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 b2584f10dd6fb8..9ed652fb415e25 100644 --- a/docs/pages/api-docs/text-field.md +++ b/docs/pages/api-docs/text-field.md @@ -74,13 +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. | | 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. | +| rowsMax | number
| string | | Maximum number of rows to display. | | 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 698caae737688d..e2576f541c1f36 100644 --- a/docs/pages/api-docs/textarea-autosize.md +++ b/docs/pages/api-docs/textarea-autosize.md @@ -26,9 +26,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| rows | number
| string | | Use `rowsMin` instead. The prop will be removed in v5. | -| 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. | +| ~~rows~~ | oneOfType([PropTypes.number | | *Deprecated*. Use `rowsMin` instead.

Minimum number of rows to display. | +| ~~rowsMax~~ | oneOfType([PropTypes.number | | *Deprecated*. Use `maxRows` instead.

Maximum number of rows to display. | +| ~~rowsMin~~ | oneOfType([PropTypes.number | | *Deprecated*. Use `minRows` instead.

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 ( ; + return ; } diff --git a/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx b/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx index c5a2f070259ae9..6b4501fc68a67c 100644 --- a/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx +++ b/docs/src/pages/components/textarea-autosize/MinHeightTextarea.tsx @@ -2,5 +2,5 @@ import React from 'react'; import TextareaAutosize from '@material-ui/core/TextareaAutosize'; export default function MinHeightTextarea() { - return ; + return ; } diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index f3b7f8c2faa682..4cba14a741ad2d 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -287,7 +287,7 @@ export const componentSettings = { 'margin', 'onChange', 'rows', - 'rowsMax', + 'minRows', 'select', 'type', 'value', diff --git a/packages/material-ui/src/Dialog/Dialog.d.ts b/packages/material-ui/src/Dialog/Dialog.d.ts index d5a28a84ccde8c..0e6492d4d85701 100644 --- a/packages/material-ui/src/Dialog/Dialog.d.ts +++ b/packages/material-ui/src/Dialog/Dialog.d.ts @@ -55,14 +55,17 @@ export interface DialogProps onClose?: ModalProps['onClose']; /** * Callback fired before the dialog enters. + * @deprecated Use the `TransitionProps` property instead. */ onEnter?: TransitionHandlerProps['onEnter']; /** * Callback fired when the dialog has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered?: TransitionHandlerProps['onEntered']; /** * Callback fired when the dialog is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering?: TransitionHandlerProps['onEntering']; /** @@ -72,14 +75,17 @@ export interface DialogProps onEscapeKeyDown?: ModalProps['onEscapeKeyDown']; /** * Callback fired before the dialog exits. + * @deprecated Use the `TransitionProps` property instead. */ onExit?: TransitionHandlerProps['onExit']; /** * Callback fired when the dialog has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited?: TransitionHandlerProps['onExited']; /** * Callback fired when the dialog is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting?: TransitionHandlerProps['onExiting']; /** diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index 6ef22dde80c7ff..f491e5f781c2d2 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -330,14 +330,17 @@ Dialog.propTypes = { onClose: PropTypes.func, /** * Callback fired before the dialog enters. + * @deprecated Use the `TransitionProps` property instead. */ onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` property instead.'), /** * Callback fired when the dialog has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` property instead.'), /** * Callback fired when the dialog is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` property instead.'), /** @@ -347,14 +350,17 @@ Dialog.propTypes = { onEscapeKeyDown: PropTypes.func, /** * Callback fired before the dialog exits. + * @deprecated Use the `TransitionProps` property instead. */ onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` property instead.'), /** * Callback fired when the dialog has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` property instead.'), /** * Callback fired when the dialog is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` property instead.'), /** diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 99c4339183cf9a..73bd55984bb7af 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -250,6 +250,10 @@ 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]), /** * If `true`, a textarea element will be rendered. */ @@ -282,10 +286,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..7fc025750924f4 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -198,6 +198,10 @@ 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]), /** * If `true`, a textarea element will be rendered. */ @@ -230,10 +234,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..23efc905867fea 100644 --- a/packages/material-ui/src/InputBase/InputBase.d.ts +++ b/packages/material-ui/src/InputBase/InputBase.d.ts @@ -121,13 +121,23 @@ export interface InputBaseProps */ rows?: string | number; /** - * Maximum number of rows to display when multiline option is set to true. + * Maximum number of rows to display. + * @deprecated Use `maxRows` instead. */ rowsMax?: string | number; /** - * Minimum number of rows to display when multiline option is set to true. + * Minimum number of rows to display. + * @deprecated Use `minRows` instead. */ rowsMin?: string | number; + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows?: string | number; + /** + * Minimum number of rows to display when multiline option is set to true. + */ + 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 bb1b7aeb5e6d19..ea8070ffdb4ceb 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -194,6 +194,8 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { rows, rowsMax, rowsMin, + maxRows, + minRows, startAdornment, type = 'text', value: valueProp, @@ -371,12 +373,13 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { ref: null, }; } else if (multiline) { - if (rows && !rowsMax && !rowsMin) { + if (rows && !maxRows && !minRows && !rowsMax && !rowsMin) { InputComponent = 'textarea'; } else { inputProps = { - rows, + minRows: rows || minRows, rowsMax, + maxRows, ...inputProps, }; @@ -546,6 +549,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. */ @@ -605,11 +616,13 @@ InputBase.propTypes = { */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** - * Maximum number of rows to display when multiline option is set to true. + * Maximum number of rows to display. + * @deprecated Use `maxRows` instead. */ rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** - * Minimum number of rows to display when multiline option is set to true. + * Minimum number of rows to display. + * @deprecated Use `minRows` instead. */ rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js index fbcb007732f8d9..4f23a600e5fdae 100644 --- a/packages/material-ui/src/InputBase/InputBase.test.js +++ b/packages/material-ui/src/InputBase/InputBase.test.js @@ -51,7 +51,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/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index 26cc60bd46d026..132f73c4ef4e47 100644 --- a/packages/material-ui/src/Menu/Menu.d.ts +++ b/packages/material-ui/src/Menu/Menu.d.ts @@ -44,31 +44,37 @@ export interface MenuProps onClose?: PopoverProps['onClose']; /** * Callback fired before the Menu enters. + * @deprecated Use the `TransitionProps` property instead. * @document */ onEnter?: PopoverProps['onEnter']; /** * Callback fired when the Menu has entered. + * @deprecated Use the `TransitionProps` property instead. * @document */ onEntered?: PopoverProps['onEntered']; /** * Callback fired when the Menu is entering. + * @deprecated Use the `TransitionProps` property instead. * @document */ onEntering?: PopoverProps['onEntering']; /** * Callback fired before the Menu exits. + * @deprecated Use the `TransitionProps` property instead. * @document */ onExit?: PopoverProps['onExit']; /** * Callback fired when the Menu has exited. + * @deprecated Use the `TransitionProps` property instead. * @document */ onExited?: PopoverProps['onExited']; /** * Callback fired when the Menu is exiting. + * @deprecated Use the `TransitionProps` property instead. * @document */ onExiting?: PopoverProps['onExiting']; diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 6b3670b790b905..f41a5870500ee2 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -219,26 +219,32 @@ Menu.propTypes = { onClose: PropTypes.func, /** * Callback fired before the Menu enters. + * @deprecated Use the `TransitionProps` property instead. */ onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the Menu has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the Menu is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired before the Menu exits. + * @deprecated Use the `TransitionProps` property instead. */ onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the Menu has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the Menu is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 6792be64a219ef..c69536895b4632 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -218,6 +218,10 @@ 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]), /** * If `true`, a textarea element will be rendered. */ @@ -254,10 +258,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/Popover/Popover.d.ts b/packages/material-ui/src/Popover/Popover.d.ts index df9fcb6ef9a78a..123431e54b1216 100644 --- a/packages/material-ui/src/Popover/Popover.d.ts +++ b/packages/material-ui/src/Popover/Popover.d.ts @@ -82,26 +82,32 @@ export interface PopoverProps onClose?: ModalProps['onClose']; /** * Callback fired before the component is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEnter?: TransitionHandlerProps['onEnter']; /** * Callback fired when the component has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered?: TransitionHandlerProps['onEntered']; /** * Callback fired when the component is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering?: TransitionHandlerProps['onEntering']; /** * Callback fired before the component is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExit?: TransitionHandlerProps['onExit']; /** * Callback fired when the component has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited?: TransitionHandlerProps['onExited']; /** * Callback fired when the component is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting?: TransitionHandlerProps['onExiting']; /** diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 769a569bd5498f..d1b07f1bffb377 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -554,26 +554,32 @@ Popover.propTypes = { onClose: PropTypes.func, /** * Callback fired before the component is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the component has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the component is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired before the component is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the component has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the component is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts index 57b1e9e4988a2d..21994f1ce7cb02 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.d.ts +++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts @@ -72,26 +72,32 @@ export interface SnackbarProps onClose?: (event: React.SyntheticEvent, reason: SnackbarCloseReason) => void; /** * Callback fired before the transition is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEnter?: TransitionHandlerProps['onEnter']; /** * Callback fired when the transition has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered?: TransitionHandlerProps['onEntered']; /** * Callback fired when the transition is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering?: TransitionHandlerProps['onEntering']; /** * Callback fired before the transition is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExit?: TransitionHandlerProps['onExit']; /** * Callback fired when the transition has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited?: TransitionHandlerProps['onExited']; /** * Callback fired when the transition is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting?: TransitionHandlerProps['onExiting']; onMouseEnter?: React.MouseEventHandler; diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index d6af71a75822a1..d3d5ae5861e506 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -324,26 +324,32 @@ Snackbar.propTypes = { onClose: PropTypes.func, /** * Callback fired before the transition is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEnter: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the transition has entered. + * @deprecated Use the `TransitionProps` property instead. */ onEntered: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the transition is entering. + * @deprecated Use the `TransitionProps` property instead. */ onEntering: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired before the transition is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExit: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the transition has exited. + * @deprecated Use the `TransitionProps` property instead. */ onExited: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** * Callback fired when the transition is exiting. + * @deprecated Use the `TransitionProps` property instead. */ onExiting: deprecatedPropType(PropTypes.func, 'Use the `TransitionProps` prop instead.'), /** diff --git a/packages/material-ui/src/TextField/TextField.d.ts b/packages/material-ui/src/TextField/TextField.d.ts index 4dcb535398c465..851883e7a9d50a 100644 --- a/packages/material-ui/src/TextField/TextField.d.ts +++ b/packages/material-ui/src/TextField/TextField.d.ts @@ -99,9 +99,14 @@ export interface BaseTextFieldProps */ rows?: string | number; /** - * Maximum number of rows to display when multiline option is set to true. + * Maximum number of rows to display. + * @deprecated Use `maxRows` instead. */ rowsMax?: string | number; + /** + * Maximum number of rows to display when multiline option is set to true. + */ + maxRows?: 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 b1ac043a8dbf00..f53d19e040b1e0 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -84,6 +84,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { required = false, rows, rowsMax, + maxRows, select = false, SelectProps, type, @@ -138,6 +139,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { name={name} rows={rows} rowsMax={rowsMax} + maxRows={maxRows} type={type} value={value} id={id} @@ -287,6 +289,10 @@ 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]), /** * If `true`, a textarea element will be rendered instead of an input. */ @@ -323,7 +329,8 @@ TextField.propTypes = { */ rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** - * Maximum number of rows to display when multiline option is set to true. + * Maximum number of rows to display. + * @deprecated Use `maxRows` instead. */ rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts index 3a4a7b35b333ff..64e3505310e130 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts @@ -5,19 +5,28 @@ export interface TextareaAutosizeProps extends Omit, 'children' | 'rows'> { ref?: React.Ref; /** - * Use `rowsMin` instead. The prop will be removed in v5. - * - * @deprecated + * Minimum number of rows to display. + * @deprecated Use `rowsMin` instead. */ rows?: string | number; /** * Maximum number of rows to display. + * @deprecated Use `maxRows` instead. */ rowsMax?: string | number; /** * Minimum number of rows to display. + * @deprecated Use `minRows` instead. */ rowsMin?: string | number; + /** + * Maximum number of rows to display. + */ + maxRows?: string | number; + /** + * Minimum number of rows to display. + */ + minRows?: string | number; } /** diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js index b89c04ed810928..c98c1175b159bc 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import debounce from '../utils/debounce'; import useForkRef from '../utils/useForkRef'; +import deprecatedPropType from '../utils/deprecatedPropType'; function getStyleValue(computedStyle, property) { return parseInt(computedStyle[property], 10) || 0; @@ -27,9 +28,20 @@ const styles = { }; const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) { - const { onChange, rows, rowsMax, rowsMin: rowsMinProp = 1, style, value, ...other } = props; - - const rowsMin = rows || rowsMinProp; + const { + onChange, + rows, + rowsMax, + rowsMin: rowsMinProp, + maxRows: maxRowsProp, + minRows: minRowsProp = 1, + style, + value, + ...other + } = props; + + const maxRows = maxRowsProp || rowsMax; + const minRows = rows || rowsMinProp || minRowsProp; const { current: isControlled } = React.useRef(value != null); const inputRef = React.useRef(null); @@ -69,11 +81,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); @@ -110,7 +122,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize(props, ref) return prevState; }); - }, [rowsMax, rowsMin, props.placeholder]); + }, [maxRows, minRows, props.placeholder]); React.useEffect(() => { const handleResize = debounce(() => { @@ -152,7 +164,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. @@ -183,6 +195,14 @@ TextareaAutosize.propTypes = { * @ignore */ className: PropTypes.string, + /** + * Maximum number of rows to display. + */ + maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + /** + * Minimum number of rows to display. + */ + minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * @ignore */ @@ -192,19 +212,29 @@ TextareaAutosize.propTypes = { */ placeholder: PropTypes.string, /** - * Use `rowsMin` instead. The prop will be removed in v5. - * - * @deprecated + * Minimum number of rows to display. + * @deprecated Use `rowsMin` instead. */ - rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + rows: deprecatedPropType( + PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + 'Use `rowsMin` instead.', + ), /** * Maximum number of rows to display. + * @deprecated Use `maxRows` instead. */ - rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + rowsMax: deprecatedPropType( + PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + 'Use `maxRows` instead.', + ), /** * Minimum number of rows to display. + * @deprecated Use `minRows` instead. */ - rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + rowsMin: deprecatedPropType( + PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + 'Use `minRows` instead.', + ), /** * @ignore */ diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js index 09daadd961d059..8c312bcf56fd4c 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js @@ -141,10 +141,10 @@ describe('', () => { expect(input.style).to.have.property('overflow', 'hidden'); }); - it('should have at least height of "rows"', () => { - const rows = 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, { @@ -155,14 +155,14 @@ describe('', () => { lineHeight, }); forceUpdate(); - expect(input.style).to.have.property('height', `${lineHeight * rows}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, { @@ -173,14 +173,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, { @@ -215,9 +215,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, { @@ -230,7 +230,7 @@ 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', ''); }); @@ -245,7 +245,7 @@ describe('', () => { }); 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 485857fb6e8dd0..787396211e430c 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -69,14 +69,14 @@ const useExternalPropsFromInputBase = [ 'inputProps', 'inputRef', 'margin', + 'maxRows', 'name', 'onChange', 'placeholder', 'readOnly', 'required', 'rows', - 'rowsMax', - // TODO: why no rowsMin? + // TODO: why no minRows? '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} />