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
@HiroAgustin
HiroAgustin enabled auto-merge August 14, 2026 07:23
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.

5 participants