Skip to content

feat: [DSRN] Added HeaderSearch#1031

Open
brianacnguyen wants to merge 16 commits intomainfrom
dsrn/headersearch
Open

feat: [DSRN] Added HeaderSearch#1031
brianacnguyen wants to merge 16 commits intomainfrom
dsrn/headersearch

Conversation

@brianacnguyen
Copy link
Copy Markdown
Contributor

@brianacnguyen brianacnguyen commented Apr 1, 2026

Description

This PR adds HeaderSearch to @metamask/design-system-react-native: a header row that pairs TextFieldSearch with navigation actions, so product teams get a consistent search header instead of reimplementing layout and behavior.


Related issues

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


Manual testing steps

  1. From the repo root, run React Native Storybook (e.g. yarn storybook:ios or yarn storybook:android).
  2. Open Components → HeaderSearch.
  3. Confirm Screen story: back control, typing, and clear behave as expected; confirm Inline story: Cancel and search field layout.
  4. (Optional) Run yarn workspace @metamask/design-system-react-native run test -- HeaderSearch or yarn jest with the package’s test pattern if you want to double-check tests locally.

Screenshots/Recordings

If applicable, add screenshots and/or recordings to visualize the before and after of your change.

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-04-01.at.15.27.53.mov

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 (HeaderSearch.test.tsx)
  • I’ve documented my code using JSDoc format if applicable (component JSDoc + README)
  • 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

Low Risk
Low risk: this PR is additive (new component, types, stories, and tests) with no changes to existing component behavior; main risk is minor API/export integration issues for consumers.

Overview
Introduces HeaderSearch to @metamask/design-system-react-native, providing a single header row that pairs TextFieldSearch with either a back icon (Screen variant) or a tertiary Cancel action (Inline variant), with variant-driven (discriminated) props.

Exports HeaderSearch and HeaderSearchVariant via the package component index and adds corresponding shared HeaderSearch* types to @metamask/design-system-shared. Includes Storybook stories, a README, and a comprehensive test suite covering prop forwarding, handler precedence (preventing override of onPress), and twClassName merging.

Reviewed by Cursor Bugbot for commit 19d089a. Bugbot is set up for automated code reviews on this repo. Configure here.

@brianacnguyen brianacnguyen self-assigned this Apr 1, 2026
@brianacnguyen brianacnguyen requested a review from a team as a code owner April 1, 2026 22:36
Copy link
Copy Markdown
Contributor

@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 1 potential issue.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

📖 Storybook Preview

Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

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

Nice work! Component API and tests are in good shape, and coverage for HeaderSearch itself looks strong. I left a few non-blocking comments to align with our Cursor conventions on architecture, stories, and README consistency.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 3, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 3, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Copy link
Copy Markdown
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

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

LGTM! Made a small update fb8c61f to the stories to align with the readme

Image

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

amandaye0h
amandaye0h previously approved these changes Apr 7, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

📖 Storybook Preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants