MetaMask / MetaMask/metamask-design-system

Create Migration Document: From CSS-in-JS Box Component to MetaMask Design System with Tailwind

Open
#137 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**

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.