diff --git a/.changeset/social-ants-bow.md b/.changeset/social-ants-bow.md
new file mode 100644
index 00000000000..3f4cb968b9e
--- /dev/null
+++ b/.changeset/social-ants-bow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Textarea: Adds `minHeight` and `maxHeight` as props
diff --git a/packages/react/src/Textarea/Textarea.docs.json b/packages/react/src/Textarea/Textarea.docs.json
index e3e74d78a50..64f863573a5 100644
--- a/packages/react/src/Textarea/Textarea.docs.json
+++ b/packages/react/src/Textarea/Textarea.docs.json
@@ -97,6 +97,16 @@
"name": "className",
"type": "string | undefined",
"description": "The className to apply to the wrapper element"
+ },
+ {
+ "name": "minHeight",
+ "type": "number",
+ "description": "The minimum height of the textarea"
+ },
+ {
+ "name": "maxHeight",
+ "type": "number",
+ "description": "The maximum height of the textarea"
}
],
"subcomponents": []
diff --git a/packages/react/src/Textarea/Textarea.features.stories.tsx b/packages/react/src/Textarea/Textarea.features.stories.tsx
index 9000c845bd2..44b2311c9c9 100644
--- a/packages/react/src/Textarea/Textarea.features.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.features.stories.tsx
@@ -104,3 +104,21 @@ export const CustomResizeBehavior = () => (
)
+
+export const MinimumHeight = () => (
+
+
+ Default label
+
+
+
+)
+
+export const MaximumHeight = () => (
+
+
+ Default label
+
+
+
+)
diff --git a/packages/react/src/Textarea/Textarea.test.tsx b/packages/react/src/Textarea/Textarea.test.tsx
index 22d00102f91..1686dc8322b 100644
--- a/packages/react/src/Textarea/Textarea.test.tsx
+++ b/packages/react/src/Textarea/Textarea.test.tsx
@@ -138,4 +138,16 @@ describe('Textarea', () => {
rerender()
expect(textareaElement).toHaveAttribute('aria-invalid', 'true')
})
+
+ it('renders textarea with minHeight and maxHeight styles', () => {
+ const minHeight = 100
+ const maxHeight = 200
+ render()
+
+ const textareaElement = screen.getByRole('textbox') as HTMLTextAreaElement
+ const style = window.getComputedStyle(textareaElement)
+
+ expect(style.minHeight).toBe(`${minHeight}px`)
+ expect(style.maxHeight).toBe(`${maxHeight}px`)
+ })
})
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 9658b4f572a..6cabcd57f01 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -34,6 +34,18 @@ export type TextareaProps = {
* The className to apply to the wrapper element
*/
className?: string
+ /**
+ * The minimum height of the Textarea
+ */
+ minHeight?: number
+ /**
+ * The maximum height of the Textarea
+ */
+ maxHeight?: number
+ /**
+ * CSS styles to apply to the Textarea
+ */
+ style?: React.CSSProperties
} & TextareaHTMLAttributes &
SxProp
@@ -55,6 +67,9 @@ const Textarea = React.forwardRef(
block,
contrast,
className,
+ minHeight,
+ maxHeight,
+ style,
...rest
}: TextareaProps,
ref,
@@ -78,6 +93,11 @@ const Textarea = React.forwardRef(
rows={rows}
cols={cols}
className={classes.TextArea}
+ style={{
+ minHeight,
+ maxHeight,
+ ...style,
+ }}
{...rest}
/>