Release 39.0.0

This release ships Extension-aligned modal and loading primitives on web, new icons across shared + both platforms, matching Tailwind preset animations, and a breaking follow-up to the React Native Toast API introduced in 0.23.0.

Package versions

• @metamask/design-tokens: 8.4.0
• @metamask/design-system-shared: 0.17.0
• @metamask/design-system-react: 0.22.0
• @metamask/design-system-react-native: 0.24.0
• @metamask/design-system-tailwind-preset: 0.8.0
• @metamask/design-system-twrnc-preset: 0.4.2

Shared updates (0.17.0)

Icon additions (#1157, #1161, #1162, #1163)

What changed

• Extended shared IconName with ListArrow, Musd, MusdFilled, refreshed Candlestick, and added Group, PieChart, and Predictions.

Impact

• React and React Native stay aligned on icon names and assets when consuming @metamask/design-system-shared.

React web (0.22.0)

Added

• Modal and useModalContext for composing modal dialogs (#1136)
• ModalContent (with ModalContentSize and MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR) (#1139)
• Skeleton loading placeholders (#1146)
• HeaderBase for flexible headers during Extension migration (#1142)
• Icons: ListArrow, Musd, MusdFilled, Candlestick refresh, Group, PieChart, Predictions (#1157, #1161, #1162, #1163)

React Native (0.24.0)

Added

• Same icon set as web (shared asset alignment) (#1157, #1161, #1162, #1163)

Changed

• BREAKING: Toast API tightened after the 0.23.0 Toaster migration (#1143): use toast(...) / toast.dismiss(), rename iconProps → iconAlertProps, remove ToastSeverity.Info, optional hasNoTimeout with auto-dismiss default, close affordance always shown. See React Native migration guide.
• Expanded HeaderBase migration guidance for Mobile (#1100)

Tailwind preset (0.8.0)

Added

• animate-skeleton-pulse / skeleton-pulse for design-system Skeleton (#1146)
• animate-slide-up / slide-up for ModalContent entrance (#1139)

TWRNC preset (0.4.2)

Changed

• Broadened react peer range to >=18.2.0 for RN 0.76 / React 19 stacks (#844)

Breaking changes

Toast runtime API (React Native only)

What changed

• toast.show → toast(...); toast.hide → toast.dismiss()
• iconProps → iconAlertProps
• ToastSeverity.Info removed
• hasNoTimeout optional (defaults to timed dismiss)
• Close control always on surface

Migration

// Before (0.23.x patterns targeted by this follow-up)
toast.show({
  title: 'Saved',
  severity: ToastSeverity.Info,
  iconProps: { testID: 'toast-icon' },
});
toast.hide();

// After (0.24.0)
toast({
  title: 'Saved',
  severity: ToastSeverity.Default,
  iconAlertProps: { testID: 'toast-icon' },
});
toast.dismiss();

Impact

• Apps already on <Toaster /> from 0.23.0 must adjust call sites that still used toast.show / toast.hide, ToastSeverity.Info, or iconProps.

See Toast version bump section (update the 0.x.0 placeholder heading/TOC to 0.24.0 when you finalize the migration anchor).

✅ Checklist

• Changelogs updated with human-readable descriptions
• Changelog validation passed (yarn changelog:validate)
• Version bumps follow semantic versioning
  • design-system-shared: minor (0.16.0 → 0.17.0) — shared icon set additions and asset fixes
  • design-system-react: minor (0.21.0 → 0.22.0) — extension migration components and icons
  • design-system-react-native: minor (0.23.0 → 0.24.0) — breaking Toast follow-up (refactor: align Toast API with severity and accessory #1143), icons, Musd fix
  • design-system-tailwind-preset: minor (0.7.0 → 0.8.0) — animate-slide-up and animate-skeleton-pulse for ModalContent / Skeleton
  • design-system-twrnc-preset: patch (0.4.1 → 0.4.2) — wider react peer range
• Breaking changes documented with migration guidance (React Native Toast — see MIGRATION.md link above)
• Migration guides updated with before/after examples (Toast 0.23 → 0.24)
• 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 (React Native Toast — 0.23.0 → 0.24.0)
• All unreleased changes are accounted for in changelogs