From c4272eabb980b9ca78c574316cc154af58ac534a Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 19 Oct 2023 21:27:23 +0000
Subject: [PATCH] docs: Add guidance for modifying textarea's height.

---
 .../react-textarea/stories/Textarea/TextareaBestPractices.md     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md b/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
index a614e71278779e..1b12d8a6255ccd 100644
--- a/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
+++ b/packages/react-components/react-textarea/stories/Textarea/TextareaBestPractices.md
@@ -7,6 +7,7 @@
 
 - **Consider using `Textarea` with outline appearance.** When the contrast ratio against the immediate surrounding color is less than 3:1, consider using outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.
 - Prefer using `<Field>` instead of `<Label>` to handle accessibility automatically.
+- **When changing height related styles, apply them directly to the textarea slot like this: `<Textarea textarea={{ className: yourClassName }} />`.** This is needed due to the structure of the Textarea being a span wrapping the textarea native element and resizing based on the textarea element. It is also important to note that we add a default `maxHeight` so when typing text, a scrollbar will appear when the text becomes too long for the size of the Textarea. To remove this constraint, resetting the `maxHeight` prevents this issue as well as letting the textarea wrapper fully resize based on the textarea's size.
 
 ### Don't