Release 38.0.0

[georgewrmarshall]

Release 38.0.0

This release updates the shared, web, native, tokens, and Tailwind packages with new cross-platform input and avatar-group contracts, new modal building blocks for React, a breaking React Native Toast API redesign, and Tailwind CSS v4 support for web consumers.

📦 Package Versions

• @metamask/design-system-shared: 0.16.0
• @metamask/design-system-react: 0.21.0
• @metamask/design-system-react-native: 0.23.0
• @metamask/design-system-tailwind-preset: 0.7.0
• @metamask/design-tokens: 8.4.0

🔄 Shared Type Updates (0.16.0)

Input and AvatarGroup shared contracts (#1043, #1067)

What Changed:

• Added shared Input contracts for controlled value, isReadOnly, and isStateStylesDisabled
• Added shared AvatarGroup size, variant, and prop contracts
• Added the shared Merge icon export (#1155)

Impact:

• React and React Native consumers can build against one aligned input and avatar-group API surface
• Cross-platform wrappers can depend on @metamask/design-system-shared instead of maintaining platform-specific type assumptions

🌐 React Web Updates (0.21.0)

Added

• Added ModalOverlay, ModalBody, ModalFocus, and ModalFooter to support Extension modal migrations into @metamask/design-system-react (#1120, #1121, #1128, #1132)
• Added the Merge icon to the React icon set (#1155)

Changed

• Updated Input to follow the shared controlled input API and use isReadOnly as the public readonly prop name (#1043)
• Updated AvatarGroup to use shared cross-platform size and variant contracts (#1067)

📱 React Native Updates (0.23.0)

Added

• Added the Merge icon to the React Native icon set (#1155)

Changed

• BREAKING: Redesigned Toast to use a single mounted <Toast /> plus static Toast.show(...) and Toast.hide() methods for application usage (#1104)
  • Removed ToastContext, ToastContextWrapper, and ToastContextParams from the public export surface
  • Renamed ToastVariants to ToastVariant, changed icon-only close buttons to ToastCloseButtonVariant.Icon, and renamed customBottomOffset to bottomOffset
  • Toast.show() and Toast.hide() now throw a descriptive error if called before <Toast /> mounts
  • See the React Native Migration Guide
• Updated Input to follow the shared controlled input API and rename isReadonly to isReadOnly (#1043)
• Updated AvatarGroup to use shared cross-platform size and variant contracts (#1067)

🎨 Tokens and Tailwind Updates

@metamask/design-tokens 8.4.0

• Added @metamask/design-tokens/tailwind/theme.css for Tailwind CSS v4 consumers, providing a single import for token variables, theme values, typography, fonts, and shadow utilities (#1117)

@metamask/design-system-tailwind-preset 0.7.0

• Added a fade-in animation utility so consumers can use animate-fade-in for simple opacity entrance transitions, including the new ModalOverlay web migration path (#1120)
• Clarified that Tailwind CSS v3 consumers should keep using this preset, while Tailwind CSS v4 consumers should migrate to @metamask/design-tokens/tailwind/theme.css (#1117)

⚠️ Breaking Changes

Toast API redesign (React Native)

What Changed:

• Toast application usage moved from context/service patterns to static Toast.show(...) and Toast.hide() methods
• ToastContext, ToastContextWrapper, and ToastContextParams were removed from the public API
• ToastVariants was renamed to ToastVariant
• Icon-only close buttons now use ToastCloseButtonVariant.Icon
• customBottomOffset was renamed to bottomOffset

Impact:

• Existing @metamask/design-system-react-native consumers using the old Toast context flow need import, root-mount, and call-site updates
• Existing app code must ensure <Toast /> is mounted before invoking Toast.show() / Toast.hide()

See migration guides for complete instructions:

• React Native Migration Guide

✅ Checklist

• Changelogs updated with human-readable descriptions
• Changelog validation passed (yarn workspace <package> changelog:validate)
• Version bumps follow semantic versioning
• design-system-shared: minor (0.15.0 → 0.16.0) - new shared Input, AvatarGroup, and icon exports
• design-system-react: minor (0.20.0 → 0.21.0) - new modal components, icon, and shared API alignment
• design-system-react-native: minor (0.22.0 → 0.23.0) - breaking Toast redesign, icon, and shared API alignment
• design-system-tailwind-preset: minor (0.6.1 → 0.7.0) - new fade-in utility and Tailwind CSS v4 migration guidance
• design-tokens: minor (8.3.0 → 8.4.0) - Tailwind CSS v4 theme.css export
• Breaking changes documented with migration guidance
• Migration guides updated with before/after examples (if breaking changes)
• PR references included in changelog entries

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• I've reviewed the Release Workflow cursor rule
• All tests pass (yarn build && yarn test && yarn lint)
• Changelog validation passes (yarn changelog:validate)

Pre-merge reviewer checklist

• I've reviewed the Reviewing Release PRs guide
• Package versions follow semantic versioning
• Changelog entries are consumer-facing (not commit message regurgitation)
• Breaking changes are documented in MIGRATION.md with examples
• All unreleased changes are accounted for in changelogs

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

Just formatting updates not any amendments

[github-actions]

📖 Storybook Preview

• View PR Storybook