MetaMask / MetaMask/metamask-design-system
[React Native]: Create `ButtonHero` component in shared UI component library
- 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
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