diff --git a/.changeset/tall-foxes-smile.md b/.changeset/tall-foxes-smile.md new file mode 100644 index 0000000000..de2df28d41 --- /dev/null +++ b/.changeset/tall-foxes-smile.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/multiline-text-field': patch +--- + +Adds `maxRows` prop to MultilineTextField. diff --git a/packages/components/fields/multiline-text-field/README.md b/packages/components/fields/multiline-text-field/README.md index 71f285c893..cfac24aa89 100644 --- a/packages/components/fields/multiline-text-field/README.md +++ b/packages/components/fields/multiline-text-field/README.md @@ -72,6 +72,7 @@ export default Example; | `onInfoButtonClick` | `Function`
[See signature.](#signature-onInfoButtonClick) | | | Function called when info button is pressed.
Info button will only be visible when this prop is passed. | | `hintIcon` | `ReactElement` | | | Icon to be displayed beside the hint text.
Will only get rendered when `hint` is passed as well. | | `badge` | `string` | | | Badge to be displayed beside the label.
Might be used to display additional information about the content of the field (E.g verified email) | +| `maxRows` | `number` | | | Set this to value to determine the maximum text rows of the text area. Any text overflow past this row number would implement a scroll | ## Signatures diff --git a/packages/components/fields/multiline-text-field/src/multiline-text-field.tsx b/packages/components/fields/multiline-text-field/src/multiline-text-field.tsx index 4b9b645654..5a5ac8f682 100644 --- a/packages/components/fields/multiline-text-field/src/multiline-text-field.tsx +++ b/packages/components/fields/multiline-text-field/src/multiline-text-field.tsx @@ -157,6 +157,11 @@ export type TMultiTextFieldProps = { * Might be used to display additional information about the content of the field (E.g verified email) */ badge?: string; + /** + * Set this to value to determine the maximum text rows of the text area. + * Any text overflow past this row number would implement a scroll + */ + maxRows?: number; }; type TState = { @@ -253,6 +258,7 @@ class MultilineTextField extends Component { hasWarning={hasWarning} placeholder={this.props.placeholder} horizontalConstraint="scale" + maxRows={this.props.maxRows} {...filterDataAttributes(this.props)} aria-invalid={hasError} aria-errormessage={errorsContainerId} diff --git a/packages/components/fields/multiline-text-field/src/multiline-text-field.visualroute.jsx b/packages/components/fields/multiline-text-field/src/multiline-text-field.visualroute.jsx index 19ee863607..38e110c800 100644 --- a/packages/components/fields/multiline-text-field/src/multiline-text-field.visualroute.jsx +++ b/packages/components/fields/multiline-text-field/src/multiline-text-field.visualroute.jsx @@ -93,6 +93,15 @@ export const component = () => ( renderWarning={() => 'Custom warning'} /> + + {}} + horizontalConstraint={7} + maxRows={3} + /> + {/*