MetaMask / MetaMask/metamask-design-system
Update Enum Sizes and Add Spacing Mappings Across `@metamask/design-system-react` and `@metamask/design-system-react-native`
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
#### **Summary**
The current enum sizes in `@metamask/design-system-react` and `@metamask/design-system-react-native` use numerical values. To improve clarity and maintainability, this issue updates enum sizes to use descriptive string-based values instead. Additionally, spacing mappings should be introduced to standardize spacing usage across both packages.
#### **Tasks**
1. **Refactor existing enum sizes** to use descriptive string-based values instead of numbers.
2. **Ensure all components using these enums are updated** to reflect the new values.
3. **Introduce spacing mappings** that align with the design system’s spacing scale.
4. **Apply spacing mappings** to components where applicable.
5. **Update documentation** to reflect the new enum size values and spacing mappings.
6. **Run Storybook and tests** to verify the changes do not introduce regressions.
#### **Acceptance Criteria**
- Enum sizes no longer use numerical values and instead use descriptive names.
- A spacing mapping system is introduced and implemented where necessary.
- All affected components are updated accordingly.
- Documentation is updated to explain the new enum size values and spacing mappings.
- Storybook and tests run successfully without errors.
#### **Additional Notes**
- Consider aligning enum names with existing design tokens for consistency.
- Spacing mappings should be flexible enough to cover different use cases but remain standardized across both packages.
Contributor guide
Assessment
This issue has not been assessed yet.