chore: Added HeaderBase to DSR and DSRN by brianacnguyen · Pull Request #908 · MetaMask/metamask-design-system

brianacnguyen · 2026-02-17T00:10:00Z

Description

This PR adds the HeaderBase component to both @metamask/design-system-react (web) and @metamask/design-system-react-native (mobile).

Reason for the change: A shared, reusable header component is needed across MetaMask products to keep a consistent layout (title with optional start/end accessories) and to avoid duplicating header logic.

What’s included:

HeaderBase in both packages: flexible header with an optional start accessory, center title (children), and optional end accessory. Supports custom content via startAccessory/endAccessory or built-in ButtonIcon usage via startButtonIconProps/endButtonIconProps.
Web (DSR): Uses Box, Text, ButtonIcon; supports className, style, includesTopInset (padding), and data-testid via testID.
Mobile (DSRN): Uses Box, Text, ButtonIcon, useSafeAreaInsets for optional top safe area inset (includesTopInset); supports twClassName, style, and layout balancing so the title stays centered when accessories have different widths.
Exports added in both packages; Storybook (React Native) updated to include HeaderBase stories. Tests and documentation (README/README.mdx) added for both implementations.

Related issues

Fixes: N/A (or add ticket link if applicable)

Manual testing steps

Web: Run yarn storybook and open HeaderBase under the design-system-react components. Confirm default, with start/end ButtonIcons, with custom accessories, and with top inset variants.
React Native: Run yarn storybook:ios or yarn storybook:android and open HeaderBase under the design-system-react-native components. Confirm the same variants and that the header respects safe area when includesTopInset is true.
Confirm existing tests pass: yarn jest (or run tests for the two packages).

Screenshots/Recordings

Before

N/A — new component; no prior header in the design system packages.

After

DSR

Screen.Recording.2026-02-16.at.5.01.38.PM.mov

DSRN

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-02-16.at.15.59.59.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
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 cross-package UI component and updates RN Jest transforms/mocks and testing-library versions, which can cause subtle test or layout regressions despite being largely additive.

Overview
Adds a new HeaderBase component to both the web (design-system-react) and React Native (design-system-react-native) design system packages, providing a centered title area with optional start/end accessories or ButtonIcon-driven actions, optional safe-area top inset handling, and standard test IDs.

Includes Storybook stories and docs for both implementations, adds comprehensive unit tests, exports the component from each package’s components/index.ts, and updates the RN testing setup (Jest transform/mocks) plus bumps @testing-library/react-native to ^13.2.0 (and corresponding lockfile changes) to support the new safe-area dependency usage.

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

github-actions · 2026-02-17T00:11:34Z

📖 Storybook Preview

View PR Storybook

packages/design-system-react/src/components/HeaderBase/HeaderBase.tsx

cursor · 2026-02-17T00:12:14Z

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

+    <View
+      style={[
+        tw.style(resolvedTwClassName),
+        includesTopInset && { marginTop: insets.top },


Top inset uses outer margin

Medium Severity

When includesTopInset is enabled, HeaderBase applies marginTop: insets.top instead of internal top padding. This moves the whole header down rather than expanding it, which breaks safe-area behavior and can create unintended spacing gaps in parent layouts.

This is intended

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

github-actions · 2026-02-17T01:02:32Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T01:22:29Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T01:29:09Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T01:48:59Z

📖 Storybook Preview

View PR Storybook

socket-security · 2026-02-17T01:49:12Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@testing-library/react-native@12.9.0 ⏵ 13.3.3				⁺¹

View full report

github-actions · 2026-02-17T02:05:00Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T02:18:06Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T05:46:58Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T06:11:49Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T06:40:43Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-02-17T16:15:23Z

📖 Storybook Preview

View PR Storybook

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

cursor · 2026-02-17T16:24:44Z

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

+          >
+            {renderEndContent()}
+          </View>
+        </View>


Wrapper style overridden by spread props

Medium Severity

startAccessoryWrapperProps and endAccessoryWrapperProps are spread after the wrapper View’s own style, so a consumer-provided style in those props overwrites the internal width/alignment styles used to keep the title centered, causing layout balancing to break when wrapper styles are customized.

georgewrmarshall

Looking good. Left some comments

georgewrmarshall · 2026-02-17T23:34:10Z

packages/design-system-react-native/src/components/HeaderBase/HeaderBase.png

remove image as it can become out dated

georgewrmarshall · 2026-02-17T23:35:34Z

packages/design-system-react-native/src/components/HeaderBase/HeaderBase.stories.tsx

+export const TwClassName: Story = {
+  render: () => (
+    <HeaderBase twClassName="bg-info-default px-4">
+      Header with Custom Styles
+    </HeaderBase>
+  ),
+};


Don't think we need this story for the twClassName prop just let the readme template explain it. If this was created by the cursor rule, let's update the rule to exclude these props that are taken care of by readme

georgewrmarshall · 2026-02-17T23:36:20Z

packages/design-system-react-native/src/components/HeaderBase/HeaderBase.stories.tsx

+  ),
+};
+
+export const EndButtonIconProps: Story = {


maybe we can be a bit more selective on stories and improve the cursor rule here to exclude prop object, twClassName and style props

georgewrmarshall · 2026-02-17T23:37:30Z

packages/design-system-react-native/src/components/HeaderBase/HeaderBase.test.tsx

+const START_ACCESSORY_TEST_ID = 'start-accessory-wrapper';
+const END_ACCESSORY_TEST_ID = 'end-accessory-wrapper';
+const BUTTON_ICON_TEST_ID = 'button-icon';
+const CUSTOM_CONTENT_TEST_ID = 'custom-content';
+const START_CONTENT_TEST_ID = 'start-content';
+const END_CONTENT_TEST_ID = 'end-content';


I prefer this over keeping the test id consts in the const file.

georgewrmarshall · 2026-02-17T23:38:16Z

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

+  includesTopInset = false,
+  startAccessoryWrapperProps,
+  endAccessoryWrapperProps,
+  testID = HEADERBASE_TEST_ID,


We should never set a default testID, will add this to the cursor rules and check the component script

georgewrmarshall · 2026-02-17T23:39:45Z

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

+      <Box twClassName="flex-1 items-center">
+        {typeof children === 'string' ? (
+          <Text
+            variant={HEADERBASE_TITLE_TEXT_VARIANT}
+            testID={HEADERBASE_TITLE_TEST_ID}
+            style={tw.style('text-center')}
+          >
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Box>


Not sure where we got to on this pattern but I think it's likely better to provide a title prop than do this type checking and rendering.

georgewrmarshall · 2026-02-17T23:40:43Z

packages/design-system-react/src/components/HeaderBase/HeaderBase.types.ts

+   *
+   * @default false
+   */
+  includesTopInset?: boolean;


Do we need this in react?

georgewrmarshall · 2026-02-17T23:41:32Z

packages/design-system-react/src/components/HeaderBase/HeaderBase.types.ts

+  /**
+   * Optional test ID for the header container (maps to data-testid).
+   */
+  testID?: string;


We should use 'data-testid'?: string; here

Added "Anti-Patterns to Avoid" section with 3 key patterns identified in PR reviews: 1. SAMPLE_PROPS constants - Use component default parameters instead 2. Default test IDs - No defaults, consumer provides when needed, React uses data-testid 3. String children type checking - Use explicit props or require Text composition Also condensed Benefits and Quick Decision Rules sections to keep file at 398 lines (within 200-400 target). References: - PR #909 review: #909 (review) - PR #908 discussion: #908 (comment)

Added HeaderBase to DSR and DSRN

3af749d

brianacnguyen self-assigned this Feb 17, 2026

brianacnguyen requested a review from a team as a code owner February 17, 2026 00:10

brianacnguyen added the team-design-system label Feb 17, 2026

cursor bot reviewed Feb 17, 2026

View reviewed changes

Updated headerbase based on suggestions

c0ec125

Updated dsr and dsrn imports from headerbase

498c5df

Added SafeAreaContext to jest setup

1233a95

Updated test coverage

749a4f3

brianacnguyen mentioned this pull request Feb 17, 2026

feat: add HeaderBase component #902

Merged

7 tasks

Updated headerbase test coverage

118d77a

Updated test coverage for headerbase

17ea8ba

Updated headerbase test coverage

09f6c78

Updated component to improve coverage

8666f1d

Updated headerbase test for full coverage

dfab7e7

Add coverage ignore for line 70

a957f35

cursor bot reviewed Feb 17, 2026

View reviewed changes

georgewrmarshall reviewed Feb 17, 2026

View reviewed changes

Uh oh!

Conversation

brianacnguyen 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!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

cursor bot Feb 17, 2026

Choose a reason for hiding this comment

Top inset uses outer margin

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

socket-security bot commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

github-actions bot commented Feb 17, 2026

📖 Storybook Preview

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Feb 17, 2026

Choose a reason for hiding this comment

Wrapper style overridden by spread props

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

brianacnguyen commented Feb 17, 2026 •

edited by cursor bot

Loading

socket-security bot commented Feb 17, 2026 •

edited

Loading