feat(textarea): add maxRows prop (#3746)

twilio-labs · Jan 31, 2024 · 3c3ec9b · 3c3ec9b
1 parent 3220274
commit 3c3ec9b
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 5 deletions.
diff --git a/.changeset/healthy-bulldogs-matter.md 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
@@ -8,7 +8,7 @@ import * as React from "react";
 
 type TextAreaVariants = "default" | "inverse";
 
-export interface TextAreaProps extends HTMLPasteProps<"textarea"> {
+export interface TextAreaProps extends Omit<HTMLPasteProps<"textarea">, "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,15 +142,13 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
       fontSize: "fontSize30",
       fontWeight: "fontWeightMedium",
       lineHeight: "lineHeight20",
-      maxHeight: props.resize === "vertical" ? "none" : "size30",
       outline: "none",
       paddingBottom: "space30",
       paddingLeft: "space40",
       paddingRight: "space40",
       paddingTop: "space30",
       resize: props.resize,
       width: "100%",
-
       "&::placeholder": {
         color: props.variant === "inverse" ? "colorTextInverseWeaker" : "colorTextWeak",
         fontStyle: "italic",
@@ -175,6 +181,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       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<HTMLTextAreaElement, TextAreaProps>(
           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
@@ -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 (
+    <>
+      <Label htmlFor={uid}>7 rows maximum</Label>
+      <TextArea
+        id={uid}
+        aria-describedby={`help-text-${uid}`}
+        placeholder="Placeholder"
+        value={value}
+        maxRows={7}
+        onChange={(e) => setValue(e.target.value)}
+        onFocus={action("handleFocus")}
+        onBlur={action("handleBlur")}
+      />
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
+    </>
+  );
+};
+TextareaMaxRows.storyName = "Textarea - adjustable maxRows";
+
 export const TextareaInverse = (): React.ReactNode => {
   const uid = useUID();
   return (

diff --git a/packages/paste-core/components/textarea/type-docs.json b/packages/paste-core/components/textarea/type-docs.json
@@ -567,6 +567,13 @@
       "required": false,
       "externalProp": true
     },
+    "maxRows": {
+      "type": "number",
+      "defaultValue": "10",
+      "required": false,
+      "externalProp": false,
+      "description": "Adjust how big the textarea should grow as the user types into it."
+    },
     "minLength": {
       "type": "number",
       "defaultValue": null,

diff --git a/packages/paste-website/src/pages/components/textarea/index.mdx b/packages/paste-website/src/pages/components/textarea/index.mdx
@@ -139,12 +139,14 @@ The Textarea should include the base `Textarea`, along with supporting elements
 
 ### Resizable Textarea
 
-By default, the textarea is not resizable. To change this, add the prop `resize='vertical'`.
+By default, the textarea is not resizable by the user. To change this, add the prop `resize='vertical'`.
+
+You may also provide a `maxRows` prop to limit how much the textArea grows. By default this value is 10.
 
 <LivePreview scope={{Label, HelpText, TextArea}} language="jsx">
   {`<>
   <Label htmlFor="message" required>Message (at least 120 characters)</Label>
-  <TextArea onChange={()=>{}} aria-describedby="message_help_text" id="message" name="message" resize="vertical" required />
+  <TextArea onChange={()=>{}} aria-describedby="message_help_text" id="message" name="message" resize="vertical" maxRows={5} required />
   <HelpText id="message_help_text">Enter at least 120 characters</HelpText>
 </>`}
 </LivePreview>