diff --git a/.changeset/healthy-bulldogs-matter.md b/.changeset/healthy-bulldogs-matter.md new file mode 100644 index 0000000000..f8c4d0d076 --- /dev/null +++ b/.changeset/healthy-bulldogs-matter.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/textarea": minor +"@twilio-paste/core": minor +--- + +[Textarea] add `maxRows` prop which sets a max height the textarea can grow based on its content. diff --git a/packages/paste-core/components/textarea/src/TextArea.tsx b/packages/paste-core/components/textarea/src/TextArea.tsx index d0c75fb9a4..5919820a39 100644 --- a/packages/paste-core/components/textarea/src/TextArea.tsx +++ b/packages/paste-core/components/textarea/src/TextArea.tsx @@ -8,7 +8,7 @@ import * as React from "react"; type TextAreaVariants = "default" | "inverse"; -export interface TextAreaProps extends HTMLPasteProps<"textarea"> { +export interface TextAreaProps extends Omit, "maxRows"> { /** * Overrides the default element name to apply unique styles with the Customization Provider. * @@ -95,6 +95,14 @@ export interface TextAreaProps extends HTMLPasteProps<"textarea"> { * @memberof TextAreaProps */ resize?: "none" | "vertical"; + /** + * Adjust how big the textarea should grow as the user types into it. + * + * @default 10 + * @type {(number)} + * @memberof TextAreaProps + */ + maxRows?: number; /** * The size of the textarea is strictly controlled by the component * @@ -134,7 +142,6 @@ const TextAreaElement = styled(TextareaAutosize)( fontSize: "fontSize30", fontWeight: "fontWeightMedium", lineHeight: "lineHeight20", - maxHeight: props.resize === "vertical" ? "none" : "size30", outline: "none", paddingBottom: "space30", paddingLeft: "space40", @@ -142,7 +149,6 @@ const TextAreaElement = styled(TextareaAutosize)( paddingTop: "space30", resize: props.resize, width: "100%", - "&::placeholder": { color: props.variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeak", fontStyle: "italic", @@ -175,6 +181,7 @@ const TextArea = React.forwardRef( readOnly, variant, resize = "none", + maxRows = 10, // size, height and width should not be passed down size, height, @@ -203,6 +210,7 @@ const TextArea = React.forwardRef( ref={ref} rows={3} minRows={3} + maxRows={maxRows} spellCheck resize={resize} variant={variant} diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx index ef22d02026..512b7ab3c4 100644 --- a/packages/paste-core/components/textarea/stories/textarea.stories.tsx +++ b/packages/paste-core/components/textarea/stories/textarea.stories.tsx @@ -90,6 +90,37 @@ MultipleTextareas.parameters = { chromatic: { disableSnapshot: true }, }; +export const TextareaMaxRows = (): React.ReactElement => { + const uid = useUID(); + const [value, setValue] = React.useState(`1 +2 +3 +4 +5 +6 +7 +8 +9 +10`); + return ( + <> + +