chore: add max height for textarea (#39542)

/ok-to-test tags="@tag.Anvil"


https://github.com/user-attachments/assets/b189bdb2-2391-4cd8-8867-7c233aba0059



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Updated textarea inputs with a maximum height setting to improve
layout consistency.
- The TextArea component now accepts a new property for specifying its
maximum number of rows.

- **Documentation**
- Added a Storybook example demonstrating the new max height
functionality for the TextArea component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13652776635>
> Commit: fc4fd3fe7bac99bc060bae68cc0866a7cacd924f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13652776635&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Tue, 04 Mar 2025 11:57:15 UTC
<!-- end of auto-generated comment: Cypress test results  -->

app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css

@@ -51,6 +51,9 @@
   align-items: flex-start;
   resize: none;
   font-family: inherit;
+  max-height: var(--max-height);
+  padding-block: 0;
+  margin-block: var(--inner-spacing-1);
 }
 
 .input:autofill,

app/client/packages/design-system/widgets/src/components/TextArea/src/TextArea.tsx

@@ -30,6 +30,7 @@ export function TextArea(props: TextAreaProps) {
     isReadOnly,
     isRequired,
     label,
+    maxRows,
     onChange,
     rows = 3,
     size,
@@ -44,9 +45,7 @@ export function TextArea(props: TextAreaProps) {
     () => {},
   );
 
-  const [textFieldHeight, setTextFieldHeightHeight] = useState<number | null>(
-    null,
-  );
+  const [textFieldHeight, setTextFieldHeight] = useState<number | null>(null);
 
   const onHeightChange = useCallback(() => {
     // Quiet textareas always grow based on their text content.
@@ -72,7 +71,7 @@ export function TextArea(props: TextAreaProps) {
       const paddingTop = parseFloat(computedStyle.paddingTop);
       const paddingBottom = parseFloat(computedStyle.paddingBottom);
 
-      setTextFieldHeightHeight(height + paddingTop + paddingBottom);
+      setTextFieldHeight(height + paddingTop + paddingBottom);
 
       input.style.height = `${
         // subtract comptued padding and border to get the actual content height
@@ -113,6 +112,9 @@ export function TextArea(props: TextAreaProps) {
     "--input-height": Boolean(textFieldHeight)
       ? `${textFieldHeight}px`
       : "auto",
+    "--max-height": Boolean(maxRows)
+      ? `calc(${maxRows} * var(--body-line-height))`
+      : "none",
   } as React.CSSProperties;
 
   return (

app/client/packages/design-system/widgets/src/components/TextArea/src/types.ts

@@ -11,4 +11,5 @@ export interface TextAreaProps extends AriaTextFieldProps, FieldProps {
   fieldClassName?: string;
   inputClassName?: string;
   size?: Exclude<keyof typeof SIZES, "xSmall">;
+  maxRows?: number;
 }

app/client/packages/design-system/widgets/src/components/TextArea/stories/TextArea.stories.tsx

@@ -72,3 +72,9 @@ export const Validation: Story = {
     </Form>
   ),
 };
+
+export const MaxHeight: Story = {
+  args: {
+    maxRows: 8,
+  },
+};