feat: TextField migration by kirillzyusko · Pull Request #910 · MetaMask/metamask-design-system

kirillzyusko · 2026-02-17T19:05:02Z

Description

Added TextField component.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-278

Manual testing steps

Open StoryBook app
Check TextField example

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Medium Risk
Adds a new interactive input wrapper with custom focus/disabled/error styling and press-to-focus behavior; risk is moderate due to potential UI/UX regressions and event-handling edge cases, but changes are additive with dedicated tests and Storybook coverage.

Overview
Introduces a new TextField component to the React Native design system: a boxed, press-to-focus wrapper around Input with configurable sizes, optional start/end accessories, error and disabled states, and style overrides via twClassName/style.

Exports TextField/TextFieldSize, adds a full Storybook story set (and wires it into the RN Storybook requires file), includes comprehensive unit tests for styling/state/handlers/ref forwarding, and adds component documentation in TextField/README.md.

^{Written by Cursor Bugbot for commit ad2eb69. This will update automatically on new commits. Configure here.}

kirillzyusko · 2026-02-18T13:24:56Z

Depends on #909

packages/design-system-react-native/src/components/TextField/TextField.tsx

cursor · 2026-02-20T14:55:25Z

packages/design-system-react-native/src/components/TextField/TextField.tsx

+              isStateStylesDisabled
+              twClassName="bg-transparent border-0"
+            />
+          )}


Custom inputElement ignores TextField props

High Severity

When inputElement is provided, TextField renders it directly without forwarding any props or ref. This means props like isDisabled, autoFocus, placeholder, and value are silently ignored, and the forwarded ref returns null. The TypeScript types accept these props but they have no effect at runtime, violating the component's API contract and breaking expected functionality.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

cursor · 2026-02-20T17:48:57Z

packages/design-system-react-native/src/components/TextField/TextField.tsx

+      ref,
+      () => inputRef.current,
+      [],
+    );


Forwarded ref can become stale

Medium Severity

useImperativeHandle(ref, () => inputRef.current, []) only runs once, so the exposed ref value can get stuck as the initial inputRef.current. If the inner Input ever remounts (or inputElement toggles on/off), external callers may keep a null/old TextInput ref and focus()/imperative calls won’t work.

cursor · 2026-02-20T17:48:57Z

packages/design-system-react-native/src/components/TextField/TextField.tsx

+        style={[containerStyle, style]}
+        onPress={onPressHandler}
+        accessible={false}
+      >


testID targets Pressable not TextInput

Low Severity

testID is applied to the outer Pressable instead of the actual input element. This can break callers/tests that expect testID to identify the TextInput (e.g., for typing, asserting editable, or querying input-specific props), especially since Input commonly uses testID directly on TextInput.

georgewrmarshall

LGTM!

## Release 23.0.0 This release includes typography updates for improved text hierarchy and the new TextField component for React Native. ### 📦 Package Versions - `@metamask/design-tokens`: **8.2.2** - `@metamask/design-system-react`: **0.9.1** - `@metamask/design-system-react-native`: **0.9.0** ### 🎨 Design Token Updates #### Typography Scale Refinement (#936) Updated the typography scale for improved text hierarchy across all platforms: **What Changed:** - `fontSize.5` increased from 18px to 20px, affecting `HeadingMd`, `SectionHeading`, `BodyLg`, and `ButtonLabelLg` typography tokens - `SectionHeading` on large screens now uses 24px (up from 20px) to maintain consistent hierarchy with `HeadingMd` - Typography documentation updated to reflect the refined sizes **Impact:** - Better visual hierarchy for section and page headings - Improved consistency across responsive breakpoints - More maintainable type scale with fewer similar sizes ### ⚛️ React Web Updates (0.9.1) #### Changed - Updated `Text` component typography sizes for improved text hierarchy (#936) - `TextVariant.HeadingMd` and `TextVariant.SectionHeading` now use 20px on small screens (up from 18px) - `TextVariant.SectionHeading` now uses 24px on large screens (up from 20px) for consistent hierarchy with `HeadingMd` - `TextVariant.BodyLg` and `TextVariant.ButtonLabelLg` also updated to 20px - Typography documentation updated for accuracy ### 📱 React Native Updates (0.9.0) #### Added - Added `TextField` component for text input fields (#910) - Boxed, press-to-focus wrapper around `Input` component - Supports configurable sizes, optional start/end accessories - Includes error and disabled states with custom styling - Full accessibility support and comprehensive test coverage ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - design-tokens: patch (8.2.1 → 8.2.2) - typography refinement - design-system-react: patch (0.9.0 → 0.9.1) - component update using new tokens - design-system-react-native: minor (0.8.0 → 0.9.0) - new TextField component - [x] No breaking changes - [x] PR references included in changelog entries  --- > [!NOTE] > **Low Risk** > Primarily version/changelog updates; the only functional impact described is typography token/`Text` sizing tweaks and a new RN `TextField` component, which may affect UI layout but not security-critical logic. > > **Overview** > Bumps the monorepo release to `23.0.0` and updates package versions: `@metamask/design-tokens` `8.2.1`→`8.2.2`, `@metamask/design-system-react` `0.9.0`→`0.9.1`, and `@metamask/design-system-react-native` `0.8.0`→`0.9.0`. > > Changelogs are updated to document **typography scale adjustments** (notably `fontSize.5` 18px→20px and larger `SectionHeading` on large screens) and the corresponding `Text` variant size updates in React, plus the addition of a new React Native `TextField` component. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit efba7fa. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

kirillzyusko force-pushed the feat/text-field-migration branch from 2115994 to eefd43b Compare February 20, 2026 13:01

kirillzyusko marked this pull request as ready for review February 20, 2026 13:34

kirillzyusko requested a review from a team as a code owner February 20, 2026 13:34

kirillzyusko changed the title ~~[WIP] feat: TextField migration~~ feat: TextField migration Feb 20, 2026

cursor bot reviewed Feb 20, 2026

View reviewed changes

packages/design-system-react-native/src/components/TextField/TextField.tsx Show resolved Hide resolved

packages/design-system-react-native/src/components/TextField/TextField.tsx Outdated Show resolved Hide resolved

cursor bot reviewed Feb 20, 2026

View reviewed changes

kirillzyusko added 4 commits February 20, 2026 17:49

feat: copy code from mobile repo

72a91d5

feat: align with repo standards

8ab6871

feat: re-use Input component

849b2ca

fix: cursor comments

df9901f

kirillzyusko force-pushed the feat/text-field-migration branch from 6db100f to df9901f Compare February 20, 2026 16:50

cursor bot reviewed Feb 20, 2026

View reviewed changes

georgewrmarshall approved these changes Feb 23, 2026

View reviewed changes

kirillzyusko enabled auto-merge (squash) February 26, 2026 12:40

Merge branch 'main' into feat/text-field-migration

ad2eb69

kirillzyusko merged commit 743ab65 into MetaMask:main Feb 26, 2026
43 checks passed

georgewrmarshall mentioned this pull request Feb 26, 2026

Release 23.0.0 #947

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: TextField migration#910

feat: TextField migration#910
kirillzyusko merged 5 commits intoMetaMask:mainfrom
kirillzyusko:feat/text-field-migration

kirillzyusko commented Feb 17, 2026 •

edited by cursor bot

Loading

Uh oh!

kirillzyusko commented Feb 18, 2026

Uh oh!

Uh oh!

Uh oh!

cursor bot Feb 20, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Feb 20, 2026

Uh oh!

cursor bot Feb 20, 2026

Uh oh!

georgewrmarshall left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

kirillzyusko commented Feb 17, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

kirillzyusko commented Feb 18, 2026

Uh oh!

Uh oh!

Uh oh!

cursor bot Feb 20, 2026

Choose a reason for hiding this comment

Custom inputElement ignores TextField props

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Feb 20, 2026

Choose a reason for hiding this comment

Forwarded ref can become stale

Uh oh!

cursor bot Feb 20, 2026

Choose a reason for hiding this comment

testID targets Pressable not TextInput

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kirillzyusko commented Feb 17, 2026 •

edited by cursor bot

Loading