MetaMask / MetaMask/metamask-design-system
Create Migration Document: From CSS-in-JS Box Component to MetaMask Design System with Tailwind
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
Start a migration document outlining the approach to transition from the CSS-in-JS `Box` component in the MetaMask extension to the MetaMask Design System monorepo, leveraging Tailwind for styling. This document will focus on ensuring backwards compatibility while providing a clear and structured migration path for developers.
### **Technical Details**
- Analyze the current usage of the `Box` component across the MetaMask extension.
- Identify compatibility gaps between the CSS-in-JS implementation and the Tailwind-based design system.
- Define strategies for:
- Retaining backwards compatibility during the migration.
- Incrementally replacing `Box` component instances with the new design system components.
- Mapping styled system props to Tailwind class equivalents.
- Document best practices for:
- Using Tailwind in the context of the MetaMask Design System.
- Ensuring design token consistency during the migration.
- Include examples of migrated components to demonstrate the process.
### **Acceptance Criteria**
- A draft migration document including:
- Step-by-step instructions for migrating `Box` components.
- Guidelines for handling backwards compatibility.
- Examples of component migration (before and after).
- Feedback from stakeholders to validate the proposed approach.
- Clear next steps for expanding the migration process to other components.
### **References**
- Current implementation of `Box` component in the MetaMask extension.
- [MetaMask Design System Documentation](https://github.com/MetaMask/metamask-design-system).
- Tailwind documentation for styling reference.
Contributor guide
Research direction
Start by reviewing the current Box component implementation and its usage across the MetaMask extension, then consult the linked MetaMask Design System and Tailwind documentation. The work is done when a draft covers step-by-step migration, backwards compatibility, styled-system-to-Tailwind mapping, token consistency, before-and-after examples, stakeholder feedback, and next steps.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- design, documentation, frontend
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100