Release 33.0.0

[georgewrmarshall]

Release 33.0.0

This release captures two features that landed on main after Release 32.0.0 was cut — IconAlert (new React Native component) and the AvatarFavicon ADR-0003/0004 type migration — plus the Text typography type migration that was inadvertently omitted from Release 32.0.0.

📦 Package Versions

• @metamask/design-system-shared: 0.11.0
• @metamask/design-system-react: 0.17.0
• @metamask/design-system-react-native: 0.18.0

🔄 Shared Type Updates (0.11.0)

IconAlert and AvatarFavicon shared types (#1060, #1062)

What Changed:

• Added IconAlertSeverity and IconAlertPropsShared shared types for cross-platform use
• Added AvatarFaviconSize and AvatarFaviconPropsShared shared types for cross-platform use

Impact:

• Continues ADR-0003/0004 const-object + string-union pattern adoption

🌐 React Web Updates (0.17.0)

Changed

• BREAKING: Migrated Text typography types (TextVariant, TextColor, FontWeight, FontStyle, FontFamily) to @metamask/design-system-shared; all imports through @metamask/design-system-react continue to work without change (#1047)
  • FontWeight, FontStyle, and FontFamily underlying string values changed to semantic identifiers (e.g. FontWeight.Bold was 'font-bold', now 'bold'); idiomatic usage is unaffected
  • Projects scanning node_modules for Tailwind class names must also scan @metamask/design-system-shared
  • See Migration Guide
• Updated AvatarFavicon type internals to use ADR-0003/ADR-0004 shared types; imports from @metamask/design-system-react are unchanged (#1062)

📱 React Native Updates (0.18.0)

Added

• Added IconAlert component for mapping a severity (info, success, warning, error) to a fixed icon glyph and theme color (#1060)

Changed

• Updated AvatarFavicon type internals to use ADR-0003/ADR-0004 shared types; imports from @metamask/design-system-react-native are unchanged (#1062)

⚠️ Breaking Changes

Text typography types moved to shared package (React Web Only)

What Changed:

• FontWeight, FontStyle, FontFamily, TextVariant, and TextColor now defined in @metamask/design-system-shared and re-exported from @metamask/design-system-react
• FontWeight, FontStyle, and FontFamily underlying string values changed to semantic identifiers

Migration:

// ✅ Idiomatic usage — no change needed
import { FontWeight } from '@metamask/design-system-react';
<Text fontWeight={FontWeight.Bold} />

// ❌ Rare: comparing against raw string value — update to const member
if (fontWeight === 'font-bold') { ... }  // Before
if (fontWeight === FontWeight.Bold) { ... }  // After

// Tailwind config — add shared package scan if scanning node_modules
content: [
  './node_modules/@metamask/design-system-react/**/*.{mjs,cjs}',
  './node_modules/@metamask/design-system-shared/**/*.{mjs,cjs}', // Add this
]

See React Migration Guide for complete instructions.

✅ Checklist

• Changelogs updated with human-readable descriptions
• Changelog validation passed (yarn changelog:validate)
• Version bumps follow semantic versioning
  • design-system-shared: minor (0.10.0 → 0.11.0) - new shared types added
  • design-system-react: minor (0.16.0 → 0.17.0) - breaking type value changes
  • design-system-react-native: minor (0.17.0 → 0.18.0) - new component + type migration
• 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

---

Note

Low Risk
This is primarily a release bookkeeping PR (version bumps + changelog entries) with no code changes; risk is limited to publishing the intended package versions and documenting the noted breaking type migration.

Overview
Bumps the monorepo release to 33.0.0 and increments package versions for @metamask/design-system-shared (0.11.0), @metamask/design-system-react (0.17.0), and @metamask/design-system-react-native (0.18.0).

Updates changelogs to capture the included releases, including new shared types for IconAlert/AvatarFavicon and the documented breaking Text typography type migration to @metamask/design-system-shared.

^{Reviewed by Cursor Bugbot for commit 3360891. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

📖 Storybook Preview

• View PR Storybook

[georgewrmarshall]

This entry covers two commits that landed after Release 32.0.0 was cut: the Text migration (#1047) that was omitted when design-system-react was inadvertently left at 0.16.0, and the AvatarFavicon type migration (#1062) that arrived afterward. This release corrects both gaps in one shot.

[georgewrmarshall]

The Tailwind scanning note is the less-obvious half of this breaking change. Consumers who scan node_modules for Tailwind class names (e.g. to include text-primary-default from TextColor) will silently miss classes after this release because the string values now live in @metamask/design-system-shared's compiled output. Full migration details are in MIGRATION.md.

[georgewrmarshall]

Both additions follow the same ADR-0003/0004 pattern: a const object (e.g. IconAlertSeverity) paired with a PropsShared type. Centralising them here means both React and React Native packages can derive their platform-specific prop types from a single source of truth without duplicating the enum values.