Skip to content

refactor: Update TextField and TextFieldSearch's styling#25684

Merged
brianacnguyen merged 5 commits intomainfrom
update/textfields
Feb 5, 2026
Merged

refactor: Update TextField and TextFieldSearch's styling#25684
brianacnguyen merged 5 commits intomainfrom
update/textfields

Conversation

@brianacnguyen
Copy link
Copy Markdown
Contributor

@brianacnguyen brianacnguyen commented Feb 5, 2026 •
edited
Loading

Description

This PR aligns the TextField and TextFieldSearch components with the MetaMask Design System specifications.

Key changes:

  • Removed the size prop from TextField - the component now uses a consistent fixed height of 48px, simplifying the API and ensuring design consistency across the app
  • Updated TextField styling: increased border radius (8px → 12px), updated colors to use semantic tokens (background.muted, border.muted), and increased accessory margins (8px → 12px)
  • Updated TextFieldSearch styling: uses a pill-shaped border radius (24px), larger icons (IconSize.Md), and updated close icon to CircleX
  • Improved single-line behavior: TextField now explicitly sets numberOfLines={1} and multiline={false} by default
  • Updated all consumers that previously used size={TextFieldSize.Lg} to use the new simplified API
  • Enhanced Storybook stories with more comprehensive examples and better organization
  • Simplified constants files by removing unused sample props

Changelog

CHANGELOG entry: Updated TextField and TextFieldSearch components to align with the MetaMask Design System

Related issues

Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/MDP/boards/2972?assignee=62afb43d33a882e2be47c36f&quickFilter=3325&selectedIssue=MDP-700

Manual testing steps

Feature: TextField component alignment

  Scenario: User sees updated TextField styling
    Given the app is running
    
    When user navigates to any screen with a TextField (e.g., Login, Import Wallet, Search)
    Then the TextField should display with:
      - Height of 48px
      - Border radius of 12px
      - Muted background color
      - Muted border color (default) that becomes darker on focus

  Scenario: User sees updated TextFieldSearch styling
    Given the app is running
    
    When user navigates to a screen with TextFieldSearch (e.g., token search, address book)
    Then the TextFieldSearch should display with:
      - Pill-shaped border radius (24px)
      - Search icon on the left
      - CircleX clear button when text is present

  Scenario: User interacts with TextField
    Given the user is on a screen with a TextField
    
    When user taps on the TextField
    Then the border color should change to indicate focus
    And the TextField should accept text input as a single line

Screenshots/Recordings

Before

After

TextField

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-02-04.at.18.00.30.mov

TextFieldSearch

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-02-04.at.18.00.52.mov

Others

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-02-04.at.18.13.37.mov

Pre-merge author checklist

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
Touches a widely used form primitive and updates default styling/props (including fixed height and focus colors), which could cause subtle visual regressions across many screens; behavior changes are otherwise straightforward and covered by snapshot/test updates.

Overview
Aligns TextField with updated design-system tokens by removing the size API and standardizing the component to a fixed 48px height, updated border/background colors, larger corner radius, and increased accessory spacing; it also forces single-line input via numberOfLines={1}/multiline={false}.

Updates TextFieldSearch to match the new look (pill radius, updated search/clear icons and sizing, and rounded styling via a new TextFieldSearch.styles) and refactors Storybook stories, constants, and unit/snapshot tests accordingly. All consumers that passed size={TextFieldSize.Lg} are migrated to the simplified API.

Written by Cursor Bugbot for commit d7ab35c. This will update automatically on new commits. Configure here.

@brianacnguyen brianacnguyen self-assigned this Feb 5, 2026
@brianacnguyen brianacnguyen requested review from a team as code owners February 5, 2026 02:02
@brianacnguyen brianacnguyen added the No QA Needed Apply this label when your PR does not need any QA effort. label Feb 5, 2026
@brianacnguyen brianacnguyen requested review from a team as code owners February 5, 2026 02:02
@brianacnguyen brianacnguyen added the team-design-system All issues relating to design system in Mobile label Feb 5, 2026
@brianacnguyen brianacnguyen requested review from a team as code owners February 5, 2026 02:02
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 5, 2026

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions github-actions bot added the size-L label Feb 5, 2026
cursor[bot]
cursor bot reviewed Feb 5, 2026
View reviewed changes
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 5, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeRamps, SmokeCard, FlaskBuildTests, SmokeWalletPlatform, SmokeIdentity
  • Selected Performance tags: @PerformanceLogin, @PerformanceOnboarding
  • Risk Level: medium
  • AI Confidence: 82%
click to see 🤖 AI reasoning details

E2E Test Selection:
This PR refactors the TextField component library by removing the size prop and standardizing the component to a fixed 48px height. The changes also update visual styling (border colors, border radius from 8→12, background color, spacing) and update TextFieldSearch with a pill-shaped border radius (24px).

Impacted areas requiring testing:

  1. SmokeAccounts: Changes affect EditAccountName, MultichainAddressRowsList (account selection), and SRP-related flows (SrpInput, SrpInputGrid, ManualBackupStep1) which are used in account management.

  2. SmokeConfirmations: Changes affect recipient-input, asset selection, and text-field-with-label components used in transaction confirmations and send flows.

  3. SmokeRamps: Changes affect DepositTextField, EnterEmail, and various Ramp-related modals that use TextField/TextFieldSearch.

  4. SmokeCard: Extensive changes to Card onboarding components (SignUp, PersonalDetails, PhysicalAddress, SetPhoneNumber, ConfirmPhoneNumber, ConfirmEmail, CardAuthentication, LimitOptionItem).

  5. FlaskBuildTests: Changes affect SnapUIInput, SnapUIAddressInput, and SnapUIDateTimePicker which are core Snap UI components.

  6. SmokeWalletPlatform: Changes affect Login, ChoosePassword, ResetPassword, OAuthRehydration, ImportFromSecretRecoveryPhrase - all critical wallet lifecycle flows. Also affects Rewards components which are part of Trending.

  7. SmokeIdentity: Selected because SmokeAccounts and SmokeWalletPlatform are selected, and account sync/multi-SRP flows may be affected by the SRP input changes.

Not selected:

  • SmokeTrade, SmokePerps, SmokePredictions: No direct TextField usage in trade/perps/predictions flows
  • SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeMultiChainAPI: Network selection uses TextFieldSearch but the changes are visual only and these flows don't have critical TextField interactions

The risk is medium because while the changes are widespread, they are primarily visual/styling changes and removal of an unused size prop. The component behavior remains the same, just with standardized sizing.

Performance Test Selection:
The TextField component changes affect Login and Onboarding flows directly. The Login screen uses TextField for password input, and Onboarding flows (ChoosePassword, ImportFromSecretRecoveryPhrase, SrpInput) heavily use TextField. While the changes are primarily visual (removing size prop, updating styles), the addition of numberOfLines={1} and multiline={false} props to the Input component could potentially affect rendering performance. Running login and onboarding performance tests will help verify there's no regression in these critical user flows.

View GitHub Actions results

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Feb 5, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

mcmire
mcmire approved these changes Feb 5, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@mcmire mcmire left a comment

Choose a reason for hiding this comment

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

LGTM!

auto-merge was automatically disabled February 5, 2026 19:28

Pull Request is not mergeable

@brianacnguyen brianacnguyen added this pull request to the merge queue Feb 5, 2026
Merged via the queue into main with commit 3d1e55f Feb 5, 2026
187 of 189 checks passed
@brianacnguyen brianacnguyen deleted the update/textfields branch February 5, 2026 20:19
@github-actions github-actions bot locked and limited conversation to collaborators Feb 5, 2026
@metamaskbot metamaskbot added the release-7.66.0 Issue or pull request that will be included in release 7.66.0 label Feb 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@mcmire mcmire mcmire approved these changes

@wachunei wachunei wachunei approved these changes

@georgewrmarshall georgewrmarshall georgewrmarshall approved these changes

@pedronfigueiredo pedronfigueiredo pedronfigueiredo approved these changes

@gantunesr gantunesr gantunesr approved these changes

@sophieqgu sophieqgu sophieqgu approved these changes

Assignees

@brianacnguyen brianacnguyen

Labels

No QA Needed Apply this label when your PR does not need any QA effort. release-7.66.0 Issue or pull request that will be included in release 7.66.0 size-L team-design-system All issues relating to design system in Mobile

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

8 participants

@brianacnguyen @mcmire @wachunei @georgewrmarshall @pedronfigueiredo @gantunesr @sophieqgu @metamaskbot