MetaMask / MetaMask/metamask-design-system

[React Native]: Create `ButtonHero` component in shared UI component library

Open
#866 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Create a reusable `ButtonHero` component for the React Native shared UI component library. The component should implement the ButtonHero design standards as implemented in the React package. This is a branded, high-impact button reserved for the most important actions in Trade, such as swapping tokens, claiming rewards, and other critical, high-value actions. This task is part of the migration to the new shared UI component library, ensuring consistency with the React implementation and existing component conventions.

### **Technical Details**

- **Component Implementation**:
- Build using React Native and TypeScript
- Based on the existing React implementation at `packages/design-system-react/src/components/ButtonHero/`
- Uses `ButtonBase` component as foundation (similar to React version)
- Locked to light theme with primary colors (`bg-primary-default`, `text-primary-inverse`)
- Implements pressed state handling (React Native equivalent of hover/active states)

- **Props to Implement**:
- `size`: ButtonHeroSize (Sm: 32px, Md: 40px, Lg: 48px) - default Lg
- `isFullWidth`: boolean - default false
- `startIconName`: IconName - optional
- `endIconName`: IconName - optional
- `isDisabled`: boolean - default false
- `isLoading`: boolean - default false
- `twClassName`: string - for custom Tailwind classes
- `style`: React Native StyleProp
- All ButtonBase props

- **Integration**:
- Use `twrnc` for styling via `@metamask/design-system-twrnc-preset`
- Implement pressed states using React Native Pressable
- Apply `data-theme="light"` equivalent behavior (always use light theme colors)
- Ensure compatibility with design system tokens (spacing, colors, typography)

- **Testing**:
- Integrate unit tests using Jest and React Native Testing Library
- Add accessibility tests to ensure proper accessibility labels and states
- Test all size variants, loading states, disabled states, and icon placements

- **Documentation**:
- Create README.mdx with detailed usage examples
- Provide Storybook stories for each variant, size, and state
- Document the specific use cases (swapping tokens, claiming rewards, etc.)
- Include warnings about sparing usage for high-impact actions only

### **Acceptance Criteria**

- The `ButtonHero` component should match the React implementation's behavior and visual design
- Component implementation must cover the following:
- All size variants (Sm, Md, Lg) with proper dimensions
- Full-width and fixed-width layouts
- Start and end icon support
- Disabled and loading states
- Pressed state handling (equivalent to hover/active on web)
- Always uses light theme primary colors regardless of app theme
- Proper focus and accessibility support
- Unit tests must cover at least 80% of the component's functionality, including interactivity and accessibility
- Component must be reviewed and approved by both engineering and design teams
- Documentation for the component should be added, covering usage, available props, and examples
- Storybook stories must demonstrate all props and states
- Ensure all aspects meet the [Definition of Done](https://www.notion.so/metamask-consensys/Definition-of-Done-778a1a8b231d4b8a99b6ad4bc115056a?pvs=4#c63409afae6b47d6a92e975d47c3737c)

### **References**

- React ButtonHero implementation: `packages/design-system-react/src/components/ButtonHero/`
- [Definition of Done](https://www.notion.so/metamask-consensys/Definition-of-Done-778a1a8b231d4b8a99b6ad4bc115056a?pvs=4#c63409afae6b47d6a92e975d47c3737c)
- [MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)

Contributor guide

Open the contributing guide

Research direction

Start by comparing packages/design-system-react/src/components/ButtonHero/ with the React Native shared UI component conventions and the ButtonBase foundation. Implement the listed props, sizes, states, icons, light-theme behavior, tests, README.mdx, and Storybook stories, then verify that the acceptance criteria and accessibility requirements are covered.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, storybook, typescript
Domain
documentation, frontend, mobile, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.