MetaMask / MetaMask/metamask-design-system

[Docs] Button, ButtonBase, Checkbox, TextButton migration documentation

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

Description

## Summary

Add migration documentation for Button-related components and form components that have been migrated from Extension to MMDS.

## Components

- Button
- ButtonBase
- Checkbox
- TextButton

Note: ButtonPrimary, ButtonSecondary, ButtonLink are variants of Button and covered by the same migration docs.

## Definition of Done

### 1. MIGRATION.md Sections
Add migration sections with API maps to:
- `packages/design-system-react/MIGRATION.md`
- `packages/design-system-react-native/MIGRATION.md` (if applicable)

Include:
- Breaking changes between Extension/Mobile and MMDS
- Prop mapping tables (size, variant enums, etc.)
- Before/after code examples

### 2. README Links
Add migration section to each component's README.mdx:
- Link to relevant MIGRATION.md section

### 3. @deprecated Updates
Add migration links to JSDoc in:
- Extension: `ui/components/component-library/button*`, `checkbox*`, `text-button*`
- Mobile: Check if similar components exist

## Example Reference
ButtonIcon version migration: https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react/MIGRATION.md#buttonicon-variant-prop

## Labels
documentation

Contributor guide

Open the contributing guide

Research direction

Start with the ButtonIcon migration section in packages/design-system-react/MIGRATION.md, then inspect the corresponding MIGRATION.md files, component README.mdx files, and Extension/Mobile component paths named in the issue. Document Button, ButtonBase, Checkbox, and TextButton migration mappings, examples, README links, and @deprecated links, then verify that each requested component is covered in the relevant React and React Native documentation.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.