refactor(text-input): migrate TextInput from Flow to TypeScript

[bonchevskyi]

Convert TextInput component to TypeScript

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

Changes

• Converted TextInput.js to TextInput.tsx with exported TextInputProps interface
• Converted TextInputField.js to TextInputField.tsx with exported TextInputFieldProps interface
• Converted index.js to index.ts, re-exporting the components and their types
• Converted TextInput.stories.js to TextInput.stories.tsx
• Converted __tests__/TextInput.test.js and TextInputField.test.js to .test.tsx
• Created .js.flow files for backward compatibility
• Updated TimeInput to pass errorPosition (was incorrectly using undeclared position)

Testing

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

Summary by CodeRabbit

• New Features

  • Added reusable text input components with labels, descriptions, validation states, tooltips, icons, loading and verified indicators, accessibility support, and ref forwarding.
  • Added Formik-integrated text input support for form state and validation.
  • Exposed the text input components and their public types for package use.

• Bug Fixes

  • Corrected error tooltip positioning for time inputs.

• Tests

  • Updated text input tests and migrated field tests to TypeScript.

[coderabbitai]

Walkthrough

Added typed TextInput and TextInputField components with Flow compatibility files, public exports, accessibility behavior, validation indicators, updated tests, and a corrected TimeInput tooltip prop.

Changes

TextInput migration

Layer / File(s)	Summary
Typed TextInput primitive src/components/text-input/TextInput.tsx, src/components/text-input/TextInput.js.flow, src/components/text-input/__tests__/TextInput.test.tsx	Adds typed props and rendering for labels, descriptions, errors, tooltips, accessibility attributes, refs, loading, verification, and icons. Updates tooltip-position and rendering tests.
Formik field integration src/components/text-input/TextInputField.tsx, src/components/text-input/TextInputField.js.flow, src/components/text-input/__tests__/TextInputField.test.tsx	Adds Formik wrappers that derive touched-field errors, forward field props and refs, and configure required-label behavior. Migrates the tests to TypeScript.
Public exports and integration src/components/text-input/index.ts, src/components/text-input/index.js.flow, src/components/time-input/TimeInput.tsx	Exports both components and their prop types. Updates TimeInput to pass errorPosition to TextInput.

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

Possibly related PRs

• box/box-ui-elements#4745: Migrates a related form input component with typed implementations, compatibility files, exports, and test updates.
• box/box-ui-elements#4757: Migrates a parallel form component with matching Flow compatibility and TypeScript export changes.
• box/box-ui-elements#4727: Applies the same Flow-to-TypeScript migration pattern to another component.

Suggested labels: ready-to-merge

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

Poem

A rabbit typed the input bright,
With labels clear and errors right.
Formik hops through fields with care,
Refs and icons bloom there.
Exports gather, tests approve—
A tidy carrot-powered move!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary migration from Flow to TypeScript.
Description check	✅ Passed	The description explains the migration, lists the main changes, and reports test 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-input/TextInput.tsx`:
- Line 99: Normalize the effective required value in the TextInput
implementations before spreading native props: remove required from rest, derive
one value with isRequired taking precedence, and reuse it for the label, ARIA
attributes, and input. Apply this in src/components/text-input/TextInput.tsx at
lines 99-99 and src/components/text-input/TextInput.js.flow at lines 96-96, then
add coverage for required without isRequired and conflicting values.

In `@src/components/text-input/TextInputField.tsx`:
- Around line 13-25: Update TextInputField in
src/components/text-input/TextInputField.tsx at lines 13-25 and
src/components/text-input/TextInputField.js.flow at lines 12-17 to destructure
and discard Formik meta before spreading rest into TextInputPrimitive. Add a
shallow-render test that supplies Formik meta and verifies the rendered input
does not receive it.

🪄 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: 0ac7c44d-ff72-4c93-a8bd-4a491c872c11

📥 Commits

Reviewing files that changed from the base of the PR and between 84b90a7 and 323dbdc.

⛔ Files ignored due to path filters (2)

• src/components/text-input/__tests__/__snapshots__/TextInput.test.tsx.snap is excluded by !**/*.snap
• src/components/text-input/__tests__/__snapshots__/TextInputField.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (10)

• src/components/text-input/TextInput.js.flow
• src/components/text-input/TextInput.stories.tsx
• src/components/text-input/TextInput.tsx
• src/components/text-input/TextInputField.js.flow
• src/components/text-input/TextInputField.tsx
• src/components/text-input/__tests__/TextInput.test.tsx
• src/components/text-input/__tests__/TextInputField.test.tsx
• src/components/text-input/index.js.flow
• src/components/text-input/index.ts
• src/components/time-input/TimeInput.tsx

💤 Files with no reviewable changes (1)

• src/components/text-input/TextInput.stories.tsx

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-11 15:22 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ❌ Checks failed · in-place
• 🚫 Left the queue — 2026-08-11 16:03 UTC · at 6abfc34879770271a2830eee6d27e65b6f2495b3

This pull request spent 41 minutes 3 seconds in the queue, with no time running CI.

Waiting for any of

• check-neutral = lint_test_build
• check-skipped = lint_test_build
• check-success = lint_test_build

All conditions

• any of [🛡 GitHub branch protection]:
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
  • check-success = lint_test_build
• github-review-approved [🛡 GitHub branch protection]
  • refactor(text-input): migrate TextInput from Flow to TypeScript #4760
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• 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

Reason

The merge conditions cannot be satisfied due to failing checks

Failing checks:

• 🟠 lint_test_build (job log)

Hint

You may have to fix your CI before adding the pull request to the queue again.
If you update this pull request, to fix the CI, it will automatically be requeued once the queue conditions match again.
If you think this was a flaky issue instead, you can requeue the pull request, without updating it, by posting a @mergifyio queue comment.

Requeued — the merge queue status continues in this comment ↓.

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-08-12 08:37 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks skipped · PR is already up-to-date
• ✅ Merged — 2026-08-12 08:38 UTC · at 7484549fc28f52b8e01128cab5f791b4676c630b · squash

This pull request spent 1 minute 23 seconds in the queue, including 8 seconds running CI.

Required conditions to merge

• github-review-approved [🛡 GitHub branch protection]
  • refactor(text-input): migrate TextInput from Flow to TypeScript #4760
• 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