MetaMask / MetaMask/metamask-design-system

Update Enum Sizes and Add Spacing Mappings Across `@metamask/design-system-react` and `@metamask/design-system-react-native`

Open
#494 0 comments 0 reactions 1 assignee Claimed by @brianacnguyen View on GitHub
team-design-system
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.