POC: Exploring Backwards Compatibility and Migration Strategies for the Design System Library

[georgewrmarshall]

Description

Create a POC using the Text component from the design system React library to explore strategies addressing migration concerns. This involves analyzing the compatibility between the proposed Tailwind-based design system and the existing styled system props used in the Snaps SDK and MetaMask products. Additionally, provide a migration path that ensures backwards compatibility and maintains the Snaps SDK's API integrity.

Technical Details

• Use the Text component to showcase a dual-compatibility strategy:
  • Retain key styled system props critical to the Snaps SDK.
  • Introduce Tailwind class names as part of the new design system.
• Investigate the extent of styled system prop usage across the Snaps SDK.
• Implement examples of:
  • Current styled system-based props in action.
  • Migration to Tailwind class names, side-by-side for comparison.
• Propose a transition plan that ensures:
  • Backwards support for existing Snaps SDK users.
  • A clear and minimal-effort migration path for developers.
• Align the POC with design tokens for consistency across the library.

Acceptance Criteria

• A working POC showcasing:
  • Support for key styled system props.
  • Use of Tailwind classes for extensibility.
  • Side-by-side examples of current and migrated approaches.
• Documented list of styled system props used in the Snaps SDK and their support status.
• A detailed migration guide for developers transitioning from styled system to Tailwind.
• Feedback on how the POC aligns with the requirements and expectations outlined in the references.

References

• Feedback on the Design System Library proposal
• Snaps Documentation
• MetaMask Extension Repository