Skip to content

Implementing field sizing option in TextArea component - #8295

Open
HiroAgustin with Copilot wants to merge 3 commits into
mainfrom
copilot/add-textarea-field-sizing-option
Open

Implementing field sizing option in TextArea component#8295
HiroAgustin with Copilot wants to merge 3 commits into
mainfrom
copilot/add-textarea-field-sizing-option

Conversation

Copilot AI commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

New field-sizing prop is now baseline: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing. It allows for input controls to grow as needed. This would be a great opt-in for textarea.

https://www.youtube.com/watch?v=s48ueIHpG7A

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>
@changeset-bot

changeset-bot Bot commented Aug 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d415af7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@HiroAgustin

Copy link
Copy Markdown
Contributor

@copilot rename prop fieldSizing to autoSize or something that makes more sense. Also update PR description.

@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Aug 12, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>

Copilot AI commented Aug 12, 2026

Copy link
Copy Markdown
Contributor Author

@copilot rename prop fieldSizing to autoSize or something that makes more sense. Also update PR description.

Renamed the prop to autoSize across the API, docs, stories, tests, styles, and changeset. I also updated the PR description. Addressed in b92b3ef.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an opt-in autoSize prop to Textarea that enables CSS field-sizing: content so the control can grow with its content, along with supporting docs/stories/tests and a changeset.

Changes:

  • Added autoSize?: boolean to Textarea and exposed it via data-auto-size for styling hooks.
  • Introduced a CSS Module rule applying min-height: 1lh and field-sizing: content when autosizing is enabled.
  • Added Storybook controls/examples and docs metadata, plus a changeset entry.
Show a summary per file
File Description
packages/react/src/Textarea/Textarea.tsx Adds the autoSize prop and renders a data-auto-size attribute to toggle styling.
packages/react/src/Textarea/Textarea.test.tsx Adds a test verifying autosize styling and that resize behavior remains unchanged.
packages/react/src/Textarea/Textarea.stories.tsx Adds autoSize to Playground args and controls.
packages/react/src/Textarea/TextArea.module.css Adds the [data-auto-size='true'] rule to enable field-sizing: content.
packages/react/src/Textarea/Textarea.features.stories.tsx Adds an AutoSize feature story example.
packages/react/src/Textarea/Textarea.docs.json Documents the new autoSize prop.
.changeset/textarea-auto-size.md Adds a changeset for the new autoSize option.

Review details

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

  • Files reviewed: 7/7 changed files
  • Comments generated: 1
  • Review effort level: Lite

Comment thread packages/react/src/Textarea/Textarea.test.tsx Outdated
Co-authored-by: HiroAgustin <1458873+HiroAgustin@users.noreply.github.com>

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review details

  • Files reviewed: 7/7 changed files
  • Comments generated: 0 new
  • Review effort level: Lite

@primer-integration

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Passed  CI   Passed
Passed  VRT   Passed
Passed  Projects   Passed

All checks passed!

@HiroAgustin
HiroAgustin marked this pull request as ready for review August 12, 2026 16:21
@HiroAgustin
HiroAgustin requested a review from a team as a code owner August 12, 2026 16:21
@HiroAgustin
HiroAgustin enabled auto-merge August 13, 2026 13:47

@jonrohan jonrohan left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

@HiroAgustin
HiroAgustin added this pull request to the merge queue Aug 13, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Aug 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants