refactor(text-area): migrate TextArea from Flow to TypeScript

[bonchevskyi]

Convert TextArea component to TypeScript

This PR converts src/components/text-area from JavaScript with Flow to TypeScript.

Changes

• Converted TextArea.js to TextArea.tsx with exported TextAreaProps interface
• Converted TextAreaField.js to TextAreaField.tsx with exported TextAreaFieldProps interface
• Converted index.js to index.ts, re-exporting the components and their types
• Converted __tests__/TextArea.test.js and __tests__/TextAreaField.test.js to .tsx
• Created .js.flow files for backward compatibility

Testing

• Ran tests for src/components/text-area; all 17 pass with snapshots matching previous output
• yarn lint:ts and flow check pass

Summary by CodeRabbit

• New Features
  • Added a configurable text area component with labels, descriptions, required states, resizing, validation errors, tooltips, and accessibility support.
  • Added a form-integrated text area field with validation handling and ref forwarding.
  • Exposed the components and their supporting types for use across the application.

[coderabbitai]

Walkthrough

Changes

The PR adds typed TextArea and TextAreaField components. It includes Flow declarations, Formik integration, accessibility attributes, error rendering, ref forwarding, tests, and public exports.

TextArea components

Layer / File(s)	Summary
TextArea component contract and rendering src/components/text-area/TextArea.tsx, src/components/text-area/TextArea.js.flow	Adds typed props and renders labels, descriptions, errors, ARIA attributes, resizing behavior, refs, and forwarded textarea attributes.
Formik integration and public exports src/components/text-area/TextAreaField.tsx, src/components/text-area/TextAreaField.js.flow, src/components/text-area/__tests__/*, src/components/text-area/index.*	Adds Formik field and touched-error handling, forwards values and refs to TextArea, updates test imports and typing, and exports components and prop types.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Formik
  participant TextAreaField
  participant TextArea
  participant NativeTextarea

  Formik->>TextAreaField: Provide field and form state
  TextAreaField->>TextAreaField: Resolve touched and error state
  TextAreaField->>TextArea: Pass value, error, label, and ref
  TextArea->>NativeTextarea: Render textarea with ARIA attributes and forwarded props
  TextArea-->>Formik: Display field and validation state

Loading

Possibly related PRs

• box/box-ui-elements#4760: Adds analogous typed form components and matching Formik integration.
• box/box-ui-elements#4759: Migrates React components with TypeScript files, Flow compatibility files, tests, and exports.
• box/box-ui-elements#4764: Migrates related form components and Formik wrappers with parallel Flow declarations.

Suggested labels: ready-to-merge

Suggested reviewers: vitali-usik, tjiang-box, jpan-box

Poem

A rabbit checks the textarea line,
With labels, errors, refs aligned.
Formik hops through fields with care,
While typed exports bloom everywhere.
textarea ready, neat and bright—
The burrow ships the change tonight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the migration of the TextArea component from Flow to TypeScript.
Description check	✅ Passed	The description explains the migration scope, lists the main changes, and reports tests and validation results.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/text-area/TextArea.tsx`:
- Around line 57-62: Conditionally assign aria-errormessage in the TextArea
ariaAttrs object only when hasError is true, otherwise use undefined; apply this
change in src/components/text-area/TextArea.tsx (lines 57-62) and
src/components/text-area/TextArea.js.flow (lines 55-60).

In `@src/components/text-area/TextAreaField.tsx`:
- Around line 13-25: Update TextAreaField in
src/components/text-area/TextAreaField.tsx#L13-L25 to forward
isRequired={isRequired} to TextAreaPrimitive while preserving the
caller-provided hideOptionalLabel value. Mirror the same prop-forwarding
correction in src/components/text-area/TextAreaField.js.flow#L12-L18.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 838a920e-29f7-45da-971b-4a53799ab359

📥 Commits

Reviewing files that changed from the base of the PR and between 5d273fe and 42d689c.

⛔ Files ignored due to path filters (2)

• src/components/text-area/__tests__/__snapshots__/TextArea.test.tsx.snap is excluded by !**/*.snap
• src/components/text-area/__tests__/__snapshots__/TextAreaField.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (8)

• src/components/text-area/TextArea.js.flow
• src/components/text-area/TextArea.tsx
• src/components/text-area/TextAreaField.js.flow
• src/components/text-area/TextAreaField.tsx
• src/components/text-area/__tests__/TextArea.test.tsx
• src/components/text-area/__tests__/TextAreaField.test.tsx
• src/components/text-area/index.js.flow
• src/components/text-area/index.ts

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-11 15:14 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks skipped · PR is already up-to-date
• ✅ Merged — 2026-08-11 15:15 UTC · at 42d689c6bc1bc5b7ba4f84b7c7ecefa2315456d2 · squash

This pull request spent 45 seconds in the queue, including 2 seconds running CI.

Required conditions to merge

• github-review-approved [🛡 GitHub branch protection]
  • refactor(text-area): migrate TextArea from Flow to TypeScript #4761
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request