From 9508b4a94d56d5960c55ace61bf160d33abf57bc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 12 Aug 2026 12:52:09 +0000
Subject: [PATCH 1/3] Add Textarea field sizing option

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
---
 .changeset/textarea-field-sizing.md                   |  5 +++++
 packages/react/src/Textarea/TextArea.module.css       |  5 +++++
 packages/react/src/Textarea/Textarea.docs.json        |  8 +++++++-
 .../react/src/Textarea/Textarea.features.stories.tsx  |  9 +++++++++
 packages/react/src/Textarea/Textarea.stories.tsx      |  4 ++++
 packages/react/src/Textarea/Textarea.test.tsx         | 11 +++++++++++
 packages/react/src/Textarea/Textarea.tsx              |  6 ++++++
 7 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/textarea-field-sizing.md

diff --git a/.changeset/textarea-field-sizing.md b/.changeset/textarea-field-sizing.md
new file mode 100644
index 00000000000..f4a5d6c3bd1
--- /dev/null
+++ b/.changeset/textarea-field-sizing.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Textarea: Add a `fieldSizing` option that allows the field to grow with its content
diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
index 9397b4f8b3d..f152902ca93 100644
--- a/packages/react/src/Textarea/TextArea.module.css
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -29,6 +29,11 @@
   resize: vertical;
 }
 
+.TextArea[data-field-sizing='true'] {
+  min-height: 1lh;
+  field-sizing: content;
+}
+
 .TextArea:disabled {
   resize: none;
 }
diff --git a/packages/react/src/Textarea/Textarea.docs.json b/packages/react/src/Textarea/Textarea.docs.json
index d657b622f17..23a16a99245 100644
--- a/packages/react/src/Textarea/Textarea.docs.json
+++ b/packages/react/src/Textarea/Textarea.docs.json
@@ -67,6 +67,12 @@
       "defaultValue": "'both'",
       "description": "Changes the resize behavior"
     },
+    {
+      "name": "fieldSizing",
+      "type": "boolean",
+      "defaultValue": "false",
+      "description": "Allows the textarea to grow to fit its content"
+    },
     {
       "name": "characterLimit",
       "type": "number",
@@ -110,4 +116,4 @@
     }
   ],
   "subcomponents": []
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/Textarea/Textarea.features.stories.tsx b/packages/react/src/Textarea/Textarea.features.stories.tsx
index ccce128c3c0..0a79f15f167 100644
--- a/packages/react/src/Textarea/Textarea.features.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.features.stories.tsx
@@ -108,6 +108,15 @@ export const CustomResizeBehavior = () => (
   </Stack>
 )
 
+export const FieldSizing = () => (
+  <form>
+    <FormControl>
+      <FormControl.Label>Automatically growing textarea</FormControl.Label>
+      <Textarea fieldSizing />
+    </FormControl>
+  </form>
+)
+
 export const MinimumHeight = () => (
   <form>
     <FormControl>
diff --git a/packages/react/src/Textarea/Textarea.stories.tsx b/packages/react/src/Textarea/Textarea.stories.tsx
index 5bc92f83623..1b11f88981a 100644
--- a/packages/react/src/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.stories.tsx
@@ -30,6 +30,7 @@ Playground.args = {
   block: false,
   cols: DEFAULT_TEXTAREA_COLS,
   disabled: false,
+  fieldSizing: false,
   resize: DEFAULT_TEXTAREA_RESIZE,
   contrast: false,
   rows: DEFAULT_TEXTAREA_ROWS,
@@ -45,6 +46,9 @@ Playground.argTypes = {
   disabled: {
     control: {type: 'boolean'},
   },
+  fieldSizing: {
+    control: {type: 'boolean'},
+  },
   resize: {
     options: ['none', 'both', 'horizontal', 'vertical'],
     control: {type: 'radio'},
diff --git a/packages/react/src/Textarea/Textarea.test.tsx b/packages/react/src/Textarea/Textarea.test.tsx
index ce9af194dd9..1f9fc1f294a 100644
--- a/packages/react/src/Textarea/Textarea.test.tsx
+++ b/packages/react/src/Textarea/Textarea.test.tsx
@@ -104,6 +104,17 @@ describe('Textarea', () => {
     expect(hasResizeDeclaration).toBe(true)
   })
 
+  it('enables field sizing without changing resize behavior', () => {
+    render(<Textarea fieldSizing resize="vertical" />)
+    const textareaElement = screen.getByRole('textbox')
+
+    expect(textareaElement).toHaveAttribute('data-field-sizing', 'true')
+    expect(textareaElement).toHaveAttribute('data-resize', 'vertical')
+
+    const rules = getCSSRules(`.${classes.TextArea}[data-field-sizing="true"]`)
+    expect(rules.some(rule => rule.style.minHeight === '1lh' && rule.style.fieldSizing === 'content')).toBe(true)
+  })
+
   it('renders a value in the textarea', () => {
     const mockValue = 'mock value'
     const onChange = vi.fn()
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 69aaee2af63..cc11e07b841 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -33,6 +33,10 @@ export type TextareaProps = {
    * Allows resizing of the textarea
    */
   resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+  /**
+   * Allows the textarea to grow to fit its content
+   */
+  fieldSizing?: boolean
   /**
    * apply a high contrast color to background
    */
@@ -74,6 +78,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       rows = DEFAULT_TEXTAREA_ROWS,
       cols = DEFAULT_TEXTAREA_COLS,
       resize = DEFAULT_TEXTAREA_RESIZE,
+      fieldSizing,
       block,
       contrast,
       className,
@@ -133,6 +138,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             defaultValue={defaultValue}
             data-component="Textarea"
             data-resize={resize}
+            data-field-sizing={fieldSizing || undefined}
             aria-required={required}
             aria-invalid={isValid === 'error' ? 'true' : 'false'}
             ref={ref}

From b92b3ef1c74b6d3678ca1c85131ebc2ca0e4d009 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 12 Aug 2026 13:14:57 +0000
Subject: [PATCH 2/3] Rename Textarea sizing prop to autoSize

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
---
 .changeset/textarea-auto-size.md                          | 5 +++++
 .changeset/textarea-field-sizing.md                       | 5 -----
 packages/react/src/Textarea/TextArea.module.css           | 2 +-
 packages/react/src/Textarea/Textarea.docs.json            | 2 +-
 packages/react/src/Textarea/Textarea.features.stories.tsx | 4 ++--
 packages/react/src/Textarea/Textarea.stories.tsx          | 4 ++--
 packages/react/src/Textarea/Textarea.test.tsx             | 8 ++++----
 packages/react/src/Textarea/Textarea.tsx                  | 6 +++---
 8 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/textarea-auto-size.md
 delete mode 100644 .changeset/textarea-field-sizing.md

diff --git a/.changeset/textarea-auto-size.md b/.changeset/textarea-auto-size.md
new file mode 100644
index 00000000000..07d34e656ae
--- /dev/null
+++ b/.changeset/textarea-auto-size.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Textarea: Add an `autoSize` option that allows the field to grow with its content
diff --git a/.changeset/textarea-field-sizing.md b/.changeset/textarea-field-sizing.md
deleted file mode 100644
index f4a5d6c3bd1..00000000000
--- a/.changeset/textarea-field-sizing.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@primer/react': minor
----
-
-Textarea: Add a `fieldSizing` option that allows the field to grow with its content
diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
index f152902ca93..0ab0a33ec5f 100644
--- a/packages/react/src/Textarea/TextArea.module.css
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -29,7 +29,7 @@
   resize: vertical;
 }
 
-.TextArea[data-field-sizing='true'] {
+.TextArea[data-auto-size='true'] {
   min-height: 1lh;
   field-sizing: content;
 }
diff --git a/packages/react/src/Textarea/Textarea.docs.json b/packages/react/src/Textarea/Textarea.docs.json
index 23a16a99245..11afa62f593 100644
--- a/packages/react/src/Textarea/Textarea.docs.json
+++ b/packages/react/src/Textarea/Textarea.docs.json
@@ -68,7 +68,7 @@
       "description": "Changes the resize behavior"
     },
     {
-      "name": "fieldSizing",
+      "name": "autoSize",
       "type": "boolean",
       "defaultValue": "false",
       "description": "Allows the textarea to grow to fit its content"
diff --git a/packages/react/src/Textarea/Textarea.features.stories.tsx b/packages/react/src/Textarea/Textarea.features.stories.tsx
index 0a79f15f167..f69c550a85b 100644
--- a/packages/react/src/Textarea/Textarea.features.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.features.stories.tsx
@@ -108,11 +108,11 @@ export const CustomResizeBehavior = () => (
   </Stack>
 )
 
-export const FieldSizing = () => (
+export const AutoSize = () => (
   <form>
     <FormControl>
       <FormControl.Label>Automatically growing textarea</FormControl.Label>
-      <Textarea fieldSizing />
+      <Textarea autoSize />
     </FormControl>
   </form>
 )
diff --git a/packages/react/src/Textarea/Textarea.stories.tsx b/packages/react/src/Textarea/Textarea.stories.tsx
index 1b11f88981a..6011537809a 100644
--- a/packages/react/src/Textarea/Textarea.stories.tsx
+++ b/packages/react/src/Textarea/Textarea.stories.tsx
@@ -30,7 +30,7 @@ Playground.args = {
   block: false,
   cols: DEFAULT_TEXTAREA_COLS,
   disabled: false,
-  fieldSizing: false,
+  autoSize: false,
   resize: DEFAULT_TEXTAREA_RESIZE,
   contrast: false,
   rows: DEFAULT_TEXTAREA_ROWS,
@@ -46,7 +46,7 @@ Playground.argTypes = {
   disabled: {
     control: {type: 'boolean'},
   },
-  fieldSizing: {
+  autoSize: {
     control: {type: 'boolean'},
   },
   resize: {
diff --git a/packages/react/src/Textarea/Textarea.test.tsx b/packages/react/src/Textarea/Textarea.test.tsx
index 1f9fc1f294a..da9e317702a 100644
--- a/packages/react/src/Textarea/Textarea.test.tsx
+++ b/packages/react/src/Textarea/Textarea.test.tsx
@@ -104,14 +104,14 @@ describe('Textarea', () => {
     expect(hasResizeDeclaration).toBe(true)
   })
 
-  it('enables field sizing without changing resize behavior', () => {
-    render(<Textarea fieldSizing resize="vertical" />)
+  it('enables automatic sizing without changing resize behavior', () => {
+    render(<Textarea autoSize resize="vertical" />)
     const textareaElement = screen.getByRole('textbox')
 
-    expect(textareaElement).toHaveAttribute('data-field-sizing', 'true')
+    expect(textareaElement).toHaveAttribute('data-auto-size', 'true')
     expect(textareaElement).toHaveAttribute('data-resize', 'vertical')
 
-    const rules = getCSSRules(`.${classes.TextArea}[data-field-sizing="true"]`)
+    const rules = getCSSRules(`.${classes.TextArea}[data-auto-size="true"]`)
     expect(rules.some(rule => rule.style.minHeight === '1lh' && rule.style.fieldSizing === 'content')).toBe(true)
   })
 
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index cc11e07b841..3c09347a7a5 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/packages/react/src/Textarea/Textarea.tsx
@@ -36,7 +36,7 @@ export type TextareaProps = {
   /**
    * Allows the textarea to grow to fit its content
    */
-  fieldSizing?: boolean
+  autoSize?: boolean
   /**
    * apply a high contrast color to background
    */
@@ -78,7 +78,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       rows = DEFAULT_TEXTAREA_ROWS,
       cols = DEFAULT_TEXTAREA_COLS,
       resize = DEFAULT_TEXTAREA_RESIZE,
-      fieldSizing,
+      autoSize,
       block,
       contrast,
       className,
@@ -138,7 +138,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             defaultValue={defaultValue}
             data-component="Textarea"
             data-resize={resize}
-            data-field-sizing={fieldSizing || undefined}
+            data-auto-size={autoSize || undefined}
             aria-required={required}
             aria-invalid={isValid === 'error' ? 'true' : 'false'}
             ref={ref}

From d415af7b17ba6bed2ac301d63076d817ff81a9ad Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 12 Aug 2026 14:46:48 +0000
Subject: [PATCH 3/3] Remove min-height from autoSize rule and use
 getPropertyValue in test

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
---
 packages/react/src/Textarea/TextArea.module.css | 1 -
 packages/react/src/Textarea/Textarea.test.tsx   | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
index 0ab0a33ec5f..2394812c39a 100644
--- a/packages/react/src/Textarea/TextArea.module.css
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -30,7 +30,6 @@
 }
 
 .TextArea[data-auto-size='true'] {
-  min-height: 1lh;
   field-sizing: content;
 }
 
diff --git a/packages/react/src/Textarea/Textarea.test.tsx b/packages/react/src/Textarea/Textarea.test.tsx
index da9e317702a..b39980df561 100644
--- a/packages/react/src/Textarea/Textarea.test.tsx
+++ b/packages/react/src/Textarea/Textarea.test.tsx
@@ -112,7 +112,7 @@ describe('Textarea', () => {
     expect(textareaElement).toHaveAttribute('data-resize', 'vertical')
 
     const rules = getCSSRules(`.${classes.TextArea}[data-auto-size="true"]`)
-    expect(rules.some(rule => rule.style.minHeight === '1lh' && rule.style.fieldSizing === 'content')).toBe(true)
+    expect(rules.some(rule => rule.style.getPropertyValue('field-sizing') === 'content')).toBe(true)
   })
 
   it('renders a value in the textarea', () => {