feat: add ButtonHero component to design system react #843

georgewrmarshall · 2025-10-21T21:59:49Z

Description

Implements a new ButtonHero component for @metamask/design-system-react

Related issues

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

Manual testing steps

Start the React Storybook: yarn storybook
Navigate to "React Components/ButtonHero" in the sidebar
Read docs and check stories

Screenshots/Recordings

Before

No ButtonHero component existed in the React design system.

After

ButtonHero component now available

after.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

Introduces ButtonHero component with Storybook docs, Figma Code Connect, tests, exports, and size type alias; adds @testing-library/user-event devDependency.

Components:
- Add ButtonHero built on ButtonBase with light theme styling, interactive/disabled/loading states, and ref forwarding (ButtonHero.tsx).
- New exports in components/index.ts and components/ButtonHero/index.ts.
Docs/Storybook:
- Add ButtonHero.stories.tsx and README.mdx with controls and examples.
- Add Figma Code Connect mapping (ButtonHero.figma.tsx).
Types:
- Export ButtonHeroSize as alias of ButtonBaseSize in src/types/index.ts.
Tests:
- Add ButtonHero.test.tsx covering rendering, interaction, states, and ref.
Tooling:
- Add @testing-library/user-event to devDependencies.

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

github-actions · 2025-10-21T22:02:08Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-10-21T22:53:17Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-10-21T23:06:37Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-10-21T23:07:27Z

packages/design-system-react/src/components/ButtonHero/ButtonHero.figma.tsx

+      </ButtonHero>
+    ),
+  },
+);


Adding Figma Code Connect to allow for code generation in Figma

codeconnect.mov

georgewrmarshall · 2025-10-21T23:07:51Z

packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/react';


Adding storybook stories and controls

georgewrmarshall · 2025-10-21T23:08:14Z

packages/design-system-react/src/components/ButtonHero/ButtonHero.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react';


Adding comprehensive testing 100% coverage

georgewrmarshall · 2025-10-21T23:08:32Z

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

+        className={mergedClassName}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        data-theme="light"


Locked to light theme

georgewrmarshall · 2025-10-21T23:08:56Z

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

+import type { ButtonBaseProps } from '../ButtonBase';
+
+export type ButtonHeroProps = ButtonBaseProps;


Extends button base type

georgewrmarshall · 2025-10-21T23:09:07Z

packages/design-system-react/src/components/ButtonHero/index.ts

+export { ButtonHero } from './ButtonHero';
+export type { ButtonHeroProps } from './ButtonHero.types';
+export { ButtonHeroSize } from '../../types';


Exporting component and props

georgewrmarshall · 2025-10-21T23:09:27Z

packages/design-system-react/src/components/index.ts

+export { ButtonHero, ButtonHeroSize } from './ButtonHero';
+export type { ButtonHeroProps } from './ButtonHero';


Exporting from index

georgewrmarshall · 2025-10-21T23:09:55Z

packages/design-system-react/src/components/ButtonHero/README.mdx

@@ -0,0 +1,253 @@
+import { Controls, Canvas } from '@storybook/addon-docs/blocks';


Adding comphrehensive docs

georgewrmarshall · 2025-10-21T23:10:14Z

packages/design-system-react/src/components/ButtonHero/README.mdx

+A branded, high-impact button reserved for the most important actions in Trade. Use sparingly for key user actions that require emphasis and visual prominence.
+
+Use for:
+
+- Swapping tokens
+- Claiming winnings (e.g., Polymarket bets)
+- Claiming rewards
+  Other critical, high-value actions


Description matches Figma

georgewrmarshall · 2025-10-21T23:10:58Z

packages/design-system-react/src/types/index.ts

 export { ButtonBaseSize as ButtonPrimarySize };
 export { ButtonBaseSize as ButtonSecondarySize };
 export { ButtonBaseSize as ButtonTertiarySize };
+export { ButtonBaseSize as ButtonHeroSize };


Exporting ButtonSize as ButtonHeroSize

github-actions · 2025-10-21T23:31:11Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-10-21T23:32:28Z

packages/design-system-react/package.json

    "@svgr/cli": "^8.1.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",


Use for click events surprising we haven't used it for any other components. Should addd it for ButtonBase. Will do in a separate PR

github-actions · 2025-10-21T23:33:22Z

📖 Storybook Preview

View PR Storybook

Copilot

Pull Request Overview

This PR introduces a new ButtonHero component to the @metamask/design-system-react package, designed as a high-emphasis, branded button for critical user actions in Trade applications. The component is built on top of ButtonBase and enforces a light theme with primary color styling.

Key changes:

New ButtonHero component with full documentation, stories, tests, and Figma integration
Size alias ButtonHeroSize exported for type consistency across button variants
Added @testing-library/user-event dev dependency for improved interaction testing

Reviewed Changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
`src/types/index.ts`	Exports `ButtonHeroSize` as an alias of `ButtonBaseSize`
`src/components/index.ts`	Barrel exports for `ButtonHero`, `ButtonHeroSize`, and `ButtonHeroProps`
`src/components/ButtonHero/index.ts`	Re-exports component and types
`src/components/ButtonHero/README.mdx`	Comprehensive documentation with usage examples and API reference
`src/components/ButtonHero/ButtonHero.types.ts`	Type definition extending `ButtonBaseProps`
`src/components/ButtonHero/ButtonHero.tsx`	Component implementation with light theme enforcement and interactive state handling
`src/components/ButtonHero/ButtonHero.test.tsx`	Unit tests covering render, events, states, ref forwarding, and class merging
`src/components/ButtonHero/ButtonHero.stories.tsx`	Storybook stories demonstrating component variants
`src/components/ButtonHero/ButtonHero.figma.tsx`	Figma Code Connect integration
`package.json`	Adds `@testing-library/user-event` dev dependency

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/design-system-react/src/components/ButtonHero/README.mdx

Co-authored-by: Copilot <[email protected]>

github-actions · 2025-10-22T22:53:51Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-10-22T22:59:17Z

📖 Storybook Preview

View PR Storybook

github-actions · 2025-10-22T23:03:50Z

📖 Storybook Preview

View PR Storybook

## **Description** This PR releases version 17.0.0 of the MetaMask Design System, featuring important fixes for mobile font compatibility, the addition of the ButtonHero component to React, export fixes for React Native, and various dependency updates including ESLint configuration upgrades. ## **Included PRs** #836, #837, #838, #840, #843, #845, #846, #847, #848, #850, #851, #852, #853, #854, #855, #856, #857, #858, #859, #861, #862, #863, #864 ## **Manual testing steps** 1. Check package.json version bumps align with included changes 2. Check changelog accurately reflects the release ## **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** - [ ] 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] > Release 17.0.0 introducing React `ButtonHero`, RN font naming changes and TWRNC preset font family rename (both breaking), plus RN export fix and dependency updates. > > - **Release 17.0.0** > - Bump root `package.json` to `17.0.0`. > - **React (`@metamask/[email protected]`)** > - Add `ButtonHero` component for prominent CTAs. > - Update `@metamask/utils` peer to `^11.8.1`. > - **React Native (`@metamask/[email protected]`)** > - BREAKING: Rename font files to hyphenated PostScript format for iOS Metro compatibility. > - Export missing `TextButtonSize` enum. > - Peer: require `@metamask/design-system-twrnc-preset@^0.3.0`; update `@metamask/utils` peer. > - **TWRNC preset (`@metamask/[email protected]`)** > - BREAKING: Rename font family names to hyphenated PostScript format for iOS/expo-font. > - **Changelogs** > - Update `CHANGELOG.md` links and entries for all packages. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 9a90311. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall self-assigned this Oct 21, 2025

georgewrmarshall changed the title ~~feat: add ButtonHero component for React design system~~ feat: add ButtonHero component to design system react Oct 21, 2025

georgewrmarshall added the team-design-system label Oct 21, 2025

georgewrmarshall commented Oct 21, 2025

View reviewed changes

feat: adding button hero component

455ef16

georgewrmarshall force-pushed the feat/button-hero-dsr branch from 0a87210 to 455ef16 Compare October 21, 2025 23:31

georgewrmarshall commented Oct 21, 2025

View reviewed changes

georgewrmarshall marked this pull request as ready for review October 22, 2025 01:37

georgewrmarshall requested a review from a team as a code owner October 22, 2025 01:37

This comment was marked as outdated.

Sign in to view

amandaye0h previously approved these changes Oct 22, 2025

View reviewed changes

georgewrmarshall requested a review from Copilot October 22, 2025 22:49

Copilot AI reviewed Oct 22, 2025

View reviewed changes

packages/design-system-react/src/components/ButtonHero/README.mdx Outdated Show resolved Hide resolved

Update packages/design-system-react/src/components/ButtonHero/README.mdx

0374d40

Co-authored-by: Copilot <[email protected]>

georgewrmarshall dismissed amandaye0h’s stale review via 0374d40 October 22, 2025 22:52

georgewrmarshall requested a review from amandaye0h October 22, 2025 22:52

chore: operator fix

0784cbe

brianacnguyen approved these changes Oct 22, 2025

View reviewed changes

Merge branch 'main' into feat/button-hero-dsr

1a07daa

georgewrmarshall merged commit a575a14 into main Oct 22, 2025
42 checks passed

georgewrmarshall deleted the feat/button-hero-dsr branch October 22, 2025 23:18

georgewrmarshall mentioned this pull request Dec 9, 2025

Release/17.0.0 #865

Merged

7 tasks

		@@ -0,0 +1,129 @@
		import type { Meta, StoryObj } from '@storybook/react';

		@@ -0,0 +1,104 @@
		import { render, screen } from '@testing-library/react';

		import type { ButtonBaseProps } from '../ButtonBase';

		export type ButtonHeroProps = ButtonBaseProps;

		export { ButtonHero, ButtonHeroSize } from './ButtonHero';
		export type { ButtonHeroProps } from './ButtonHero';

		@@ -0,0 +1,253 @@
		import { Controls, Canvas } from '@storybook/addon-docs/blocks';

Uh oh!

feat: add ButtonHero component to design system react #843

feat: add ButtonHero component to design system react #843

Uh oh!

Conversation

georgewrmarshall commented Oct 21, 2025 • 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 Oct 21, 2025

📖 Storybook Preview

Uh oh!

github-actions bot commented Oct 21, 2025

📖 Storybook Preview

Uh oh!

github-actions bot commented Oct 21, 2025

📖 Storybook Preview

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

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!

github-actions bot commented Oct 21, 2025

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 21, 2025

📖 Storybook Preview

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

github-actions bot commented Oct 22, 2025

📖 Storybook Preview

Uh oh!

github-actions bot commented Oct 22, 2025

📖 Storybook Preview

Uh oh!

github-actions bot commented Oct 22, 2025

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

georgewrmarshall commented Oct 21, 2025 •

edited by cursor bot

Loading