[DSRN] Added TextFieldSearch#1027
Merged
Merged
Conversation
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
Contributor
📖 Storybook Preview |
| ? endAccessory | ||
| : Boolean(value) && clearButton | ||
| } | ||
| testID="textfieldsearch" |
Contributor
There was a problem hiding this comment.
Hardcoded testID silently overrides user-provided value
Medium Severity
testID="textfieldsearch" is placed after {...props}, so any user-provided testID is silently overridden. The TextFieldSearchProps type inherits testID from TextFieldProps, so the type system accepts it but the implementation ignores it. This is inconsistent with TextField, which respects custom testID values, and makes it impossible to distinguish multiple TextFieldSearch instances in tests.
Additional Locations (1)
georgewrmarshall
added a commit
that referenced
this pull request
Apr 6, 2026
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
pushed a commit
that referenced
this pull request
Apr 6, 2026
## **Description** This PR adds **`TextFieldSearch`** to `@metamask/design-system-react-native`, a search-shaped input built on top of **`TextField`**. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/DSYS/boards/1888?search=TextFieldSearch&selectedIssue=DSYS-284 ## **Manual testing steps** 1. From the repo root, run React Native Storybook (e.g. `yarn storybook:ios` or `yarn storybook:android`). 2. Open the **TextFieldSearch** stories and confirm the search icon, placeholder, and typing behavior match design. 3. Enter text and confirm the **clear** control appears; tap it and confirm **`onPressClearButton`** clears the field in the story (controlled examples). 4. With an empty value, confirm the **clear** control is not shown. ## **Screenshots/Recordings** ### **Before** _N/A — new component._ ### **After** https://github.com/user-attachments/assets/fc4cc604-8cc0-408b-947b-2efa94513e86 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: adds a new UI component with Storybook/docs/tests and only a small export surface change, without touching auth, networking, or data handling. > > **Overview** > Adds a new `TextFieldSearch` component to `@metamask/design-system-react-native`, built on top of `TextField` with a default search icon and an auto-visible clear button that triggers `onPressClearButton`. > > Includes Storybook stories, unit tests covering clear-button/accessory behavior, component docs, and exports the new component/types from the design-system `components/index.ts` (and wires it into the RN Storybook requires list). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit b79055a. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
added a commit
that referenced
this pull request
Apr 6, 2026
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
pushed a commit
that referenced
this pull request
Apr 27, 2026
## **Description** This PR adds **`TextFieldSearch`** to `@metamask/design-system-react-native`, a search-shaped input built on top of **`TextField`**. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/DSYS/boards/1888?search=TextFieldSearch&selectedIssue=DSYS-284 ## **Manual testing steps** 1. From the repo root, run React Native Storybook (e.g. `yarn storybook:ios` or `yarn storybook:android`). 2. Open the **TextFieldSearch** stories and confirm the search icon, placeholder, and typing behavior match design. 3. Enter text and confirm the **clear** control appears; tap it and confirm **`onPressClearButton`** clears the field in the story (controlled examples). 4. With an empty value, confirm the **clear** control is not shown. ## **Screenshots/Recordings** ### **Before** _N/A — new component._ ### **After** https://github.com/user-attachments/assets/fc4cc604-8cc0-408b-947b-2efa94513e86 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: adds a new UI component with Storybook/docs/tests and only a small export surface change, without touching auth, networking, or data handling. > > **Overview** > Adds a new `TextFieldSearch` component to `@metamask/design-system-react-native`, built on top of `TextField` with a default search icon and an auto-visible clear button that triggers `onPressClearButton`. > > Includes Storybook stories, unit tests covering clear-button/accessory behavior, component docs, and exports the new component/types from the design-system `components/index.ts` (and wires it into the RN Storybook requires list). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit b79055a. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
added a commit
that referenced
this pull request
Apr 27, 2026
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
cursor Bot
pushed a commit
that referenced
this pull request
Apr 28, 2026
## Release 29.0.0 This release includes new React Native header and layout primitives, BottomSheet API updates, shared type migrations, and documentation/runtime dependency alignment across core design-system packages. ### 📦 Package Versions - @metamask/design-system-shared: 0.7.0 - @metamask/design-system-react: 0.14.0 - @metamask/design-system-react-native: 0.14.0 ### 🔄 Shared Type Updates (0.7.0) #### Added - Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029). - Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003). #### Changed - Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, aligned with ADR-0003/ADR-0004 (#1005). - Updated @metamask/utils dependency to ^11.11.0 (#1033). ### 🌐 React Web Updates (0.14.0) #### Changed - BREAKING: Updated AvatarBase exports to consume shared const-object + string-union types rather than local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for recent releases (#1011). ### 📱 React Native Updates (0.14.0) #### Added - Added HeaderRoot as a new root primitive for React Native header composition (#1029). - Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030). - Added TextFieldSearch for search-style text input flows on mobile (#1027). - Added BoxHorizontal and BoxVertical utility components for directional layout composition (#1003). #### Changed - BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024). - Remove shouldNavigateBack usage and pass goBack when sheet close should navigate back. - See migration guide: packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - Added panGestureHandlerProps support to BottomSheet for gesture-handler customization (#1016). - Migrated React Native package exports from default exports to named exports for consistent import ergonomics (#1032). - BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005). - No migration required for typical usage; continue importing from @metamask/design-system-react-native as before. - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004. - Updated @metamask/utils peer dependency to ^11.11.0 (#1033). - Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011). #### Fixed - Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012). ###⚠️ Breaking Changes - BottomSheet (React Native): replaced shouldNavigateBack with optional goBack callback (#1024). - Migration required where shouldNavigateBack was used; see packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140. - AvatarBase export type migration (React + React Native): moved from local enums to shared const-object + string-union types (#1005). - Marked breaking for type contract changes, but no migration is expected for typical consumer imports/usage. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (yarn changelog:validate) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and dependency alignment - [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type migration and docs/dependency updates - [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new components and API enhancements - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I have followed MetaMask Contributor Docs - [x] I have reviewed the Release Workflow cursor rule - [ ] All tests pass (yarn build && yarn test && yarn lint) - [x] Changelog validation passes (yarn changelog:validate) ## **Pre-merge reviewer checklist** - [x] I have reviewed the Reviewing Release PRs guide - [x] Package versions follow semantic versioning - [x] Changelog entries are consumer-facing (not commit message regurgitation) - [x] Breaking changes are documented in MIGRATION.md with examples - [x] All unreleased changes are accounted for in changelogs <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 87c05a5. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds
TextFieldSearchto@metamask/design-system-react-native, a search-shaped input built on top ofTextField.Related issues
Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/DSYS/boards/1888?search=TextFieldSearch&selectedIssue=DSYS-284
Manual testing steps
yarn storybook:iosoryarn storybook:android).onPressClearButtonclears the field in the story (controlled examples).Screenshots/Recordings
Before
N/A — new component.
After
Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-01.at.09.20.47.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Low risk: adds a new UI component plus stories/tests and a new export, without changing existing component behavior or any security/data-sensitive logic.
Overview
Adds a new
TextFieldSearchcomponent to@metamask/design-system-react-native, implemented as aTextFieldvariant with a default search icon and an auto-shown clear button (unless a customendAccessoryis provided).Includes Storybook stories, unit tests covering clear-button/accessory behavior, component docs (
README.md), and updates the package barrel export and Storybook requires list so the component is available to consumers and in RN Storybook.Written by Cursor Bugbot for commit b79055a. This will update automatically on new commits. Configure here.