Skip to content

feat: add HeaderBase component#902

Merged
georgewrmarshall merged 11 commits intoMetaMask:mainfrom
kirillzyusko:feat/add-header-base
Feb 20, 2026
Merged

feat: add HeaderBase component#902
georgewrmarshall merged 11 commits intoMetaMask:mainfrom
kirillzyusko:feat/add-header-base

Conversation

@kirillzyusko
Copy link
Collaborator

@kirillzyusko kirillzyusko commented Feb 11, 2026

Description

Added HeaderBase component.

Related issues

Fixes:

Manual testing steps

  1. Open StoryBook app
  2. Check that HeaderBase works as expected

Screenshots/Recordings

Before

After

image

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

Low Risk
Mostly additive UI component work with tests/docs; main risk is subtle layout/centering or safe-area mocking side effects across the Jest suite.

Overview
Adds a new HeaderBase component to design-system-react-native, providing a centered header title with optional start/end accessories or icon buttons, optional safe-area top inset handling, and Tailwind class/style customization.

Registers HeaderBase in the public exports and Storybook, and adds comprehensive unit tests + README docs. Updates Jest setup to globally mock react-native-safe-area-context (and removes a local mock in Toast.test.tsx) to stabilize safe-area dependent tests.

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

@kirillzyusko
Copy link
Collaborator Author

CI fails because it depends on deps re-arrangement from this PR: #901

@kirillzyusko
Copy link
Collaborator Author

@georgewrmarshall this PR is ready for review 👀

@brianacnguyen
Copy link
Contributor

My apologies but I think this is duplicated from #908

@kirillzyusko
Copy link
Collaborator Author

Ah, okay
I re-assigned this task from you @brianacnguyen because my BottomSheetFooter depends on this component

But feel free to merge your PR and close this 🙂

Copy link
Contributor

@brianacnguyen brianacnguyen left a comment

Choose a reason for hiding this comment

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

can you remove the testid const?

@kirillzyusko
Copy link
Collaborator Author

Done @brianacnguyen 🙌

brianacnguyen
brianacnguyen previously approved these changes Feb 18, 2026
@kirillzyusko kirillzyusko marked this pull request as ready for review February 19, 2026 10:48
@kirillzyusko kirillzyusko requested a review from a team as a code owner February 19, 2026 10:48
@brianacnguyen
Copy link
Contributor

@kirillzyusko can you resolve the cursor comments?

Copy link
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.

brianacnguyen
brianacnguyen previously approved these changes Feb 19, 2026
@kirillzyusko kirillzyusko self-assigned this Feb 20, 2026
Copy link
Contributor

Choose a reason for hiding this comment

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

Can remove this image in a follow up PR they tend to become out of date

Comment on lines +45 to +51
export const TwClassName = {
render: () => (
<HeaderBase twClassName="bg-info-default px-4">
Header with Custom Styles
</HeaderBase>
),
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably don't need this story can be removed in a folllow up PR

@georgewrmarshall georgewrmarshall enabled auto-merge (squash) February 20, 2026 16:27
@georgewrmarshall georgewrmarshall merged commit 5b4f18c into MetaMask:main Feb 20, 2026
43 checks passed
georgewrmarshall added a commit that referenced this pull request Feb 20, 2026
## Summary

Reverts the failed Release 20.0.0 (#921) to redo it properly with
complete changelogs and correct yarn.lock.

## Context

Release 20.0.0 was merged to main but the publish workflow failed due to
a yarn.lock issue:
- **Failed workflow:**
https://github.com/MetaMask/metamask-design-system/actions/runs/22198282954
- **Root cause:** yarn.lock not updated when peer dependency changed

After the release was merged, 7 additional PRs were merged to main:
1. Label component (#907)
2. HeaderBase component (#902)
3. Skeleton (#891)
4. Card (#923)
5. BottomSheetFooter (#899)
6. Toast (#892)
7. Input component (#909)

## Why Revert?

To maintain clean version history and proper changelogs:
- Release 20.0.0 was never published to NPM (latest is 19.0.0)
- The 7 PRs merged after are not documented in Release 20.0.0 changelog
- Reverting allows us to create a proper Release 20.0.0 that includes
ALL changes

## Changes

This PR reverts commit `45004196` which:
- Restores package versions to pre-release state (8.1.1, 0.7.0, 0.6.0,
etc.)
- Restores root package.json version from 20.0.0 to 19.0.0
- Removes Release 20.0.0 changelog entries

## Next Steps

After this is merged:
1. Create new `release/20.0.0` branch using standard release process
2. Include all changes (original + 7 PRs) in changelogs
3. **Run `yarn install` to update yarn.lock**
4. Merge new Release 20.0.0 PR
5. Publish workflow will succeed with correct lockfile

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants