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/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css index 9397b4f8b3d..2394812c39a 100644 --- a/packages/react/src/Textarea/TextArea.module.css +++ b/packages/react/src/Textarea/TextArea.module.css @@ -29,6 +29,10 @@ resize: vertical; } +.TextArea[data-auto-size='true'] { + 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..11afa62f593 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": "autoSize", + "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..f69c550a85b 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 = () => ( ) +export const AutoSize = () => ( +
+ + Automatically growing textarea +