You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Release 35.0.0
This release adds new React Native title primitives, continues the
enum-to-const-object/string-union migration for public type exports, and
updates the release documentation so breaking changes are
consumer-focused and migration-oriented.
### Package Versions
- `@metamask/design-system-shared`: **0.13.0**
- `@metamask/design-system-react`: **0.18.0**
- `@metamask/design-system-react-native`: **0.20.0**
- `@metamask/design-system-tailwind-preset`: **0.6.2**
### Shared Type Updates (0.13.0)
#### Added (#1051, #1053, #1059)
**What Changed:**
- Added `TitleStandardPropsShared` and `TitleSubpagePropsShared`
- Added `TagSeverity` and `TagPropsShared`
**Impact:**
- Supports the new React Native `TitleStandard`, `TitleSubpage`, and
`Tag` APIs
#### Changed (#1026, #1042)
**What Changed:**
- **BREAKING:** Updated shared `Box` and `Icon` exports from enums to
const objects with derived string-union types
- Removed stale Box `WarningAlternative`, `SuccessAlternative`, and
`InfoAlternative` color entries that no longer map to design tokens
**Impact:**
- Affects consumers of `@metamask/design-system-shared` directly
- Platform package consumers should continue importing from
`@metamask/design-system-react` or
`@metamask/design-system-react-native`
### React Web Updates (0.18.0)
#### Changed
- **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports
to use const-object + string-union types instead of enums (#1042, #1101)
- **BREAKING:** Updated `Box` type exports to use const-object +
string-union types and removed stale Box color entries (#1026)
- Updated `ButtonTertiary` to use the default text color for more
consistent contrast across states (#1099)
### React Native Updates (0.20.0)
#### Added
- Added `TitleStandard` for mobile title layouts with optional top and
bottom accessory rows (#1051)
- Added `TitleSubpage` for subpage headers with avatar, title, subtitle,
amount, and bottom-label layouts (#1059)
- Added `Tag` for compact severity-based metadata labels with optional
icons or custom accessories (#1053)
#### Changed
- **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports
to use const-object + string-union types instead of enums (#1042)
- **BREAKING:** Updated `Box` type exports to use const-object +
string-union types and removed stale Box color entries (#1026)
- `Box` now forwards refs to the underlying `View` (#1102)
- Updated `ButtonTertiary` to use the default text color for more
consistent contrast across states (#1099)
### Tailwind Preset Updates (0.6.2)
#### Changed
- No consumer-facing API or behavior changes in this release; this patch
republishes the existing preset without requiring changes in consuming
apps
### Breaking Changes
#### Icon and Box enum exports migrated to const objects plus string
unions (Both Platforms)
**What Changed:**
- `IconName`, `IconColor`, and `IconSize` now use const objects with
derived string-union types instead of enums
- `BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`,
`BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`,
`BoxSpacing`, and `BoxBorderWidth` now use const objects with derived
string-union types instead of enums
- Removed stale Box color entries with no backing design token:
- `BoxBackgroundColor.WarningAlternative`
- `BoxBackgroundColor.SuccessAlternative`
- `BoxBorderColor.WarningAlternative`
- `BoxBorderColor.SuccessAlternative`
- `BoxBorderColor.InfoAlternative`
**Migration:**
```tsx
// Before
import {
BoxBackgroundColor,
IconColor,
IconName,
} from '@metamask/design-system-react-native';
<Box backgroundColor={BoxBackgroundColor.WarningAlternative} />
<Icon name={IconName.Add} color={IconColor.IconDefault} />
// After
import {
BoxBackgroundColor,
IconColor,
IconName,
} from '@metamask/design-system-react-native';
<Box backgroundColor={BoxBackgroundColor.WarningDefault} />
<Icon name={IconName.Add} color={IconColor.IconDefault} />
```
**Impact:**
- Affects consumers relying on enum-specific TypeScript behavior for
`Icon*` and `Box*` exports
- Import paths stay the same for platform-package consumers
- Any use of the removed Box `*Alternative` color entries will need to
switch to the corresponding `*Default` or `*Muted` token
See migration guides for complete instructions:
- [React Migration
Guide](./packages/design-system-react/MIGRATION.md#from-version-0170-to-0180)
- [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0190-to-0200)
### Validation
- `yarn changelog:validate`
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> **Medium Risk**
> Medium risk because it publishes new versions with **breaking
TypeScript surface changes** (Box/Icon enums → const-object/string-union
and removal of stale Box color members), which can break downstream
builds despite minimal runtime behavior changes.
>
> **Overview**
> Bumps the monorepo release to `35.0.0` and publishes new package
versions for `@metamask/design-system-react` (`0.18.0`),
`@metamask/design-system-react-native` (`0.20.0`), and
`@metamask/design-system-shared` (`0.13.0`).
>
> Updates changelogs/migration guides to reflect the release: adds React
Native primitives (`TitleStandard`, `TitleSubpage`, `Tag`) and shared
prop contracts, and documents **breaking** shifts of `Box*` and `Icon*`
exports from enums to const-object + string-union types (plus removal of
stale `*Alternative` Box color entries) with consumer-facing migration
steps.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
addbae5. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Copy file name to clipboardExpand all lines: packages/design-system-react-native/CHANGELOG.md
+22-3Lines changed: 22 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
8
8
## [Unreleased]
9
9
10
+
## [0.20.0]
11
+
12
+
### Added
13
+
14
+
- Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows ([#1051](https://github.com/MetaMask/metamask-design-system/pull/1051))
15
+
- Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts ([#1059](https://github.com/MetaMask/metamask-design-system/pull/1059))
16
+
- Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories ([#1053](https://github.com/MetaMask/metamask-design-system/pull/1053))
17
+
18
+
### Changed
19
+
20
+
-`Box` now forwards refs to the underlying `View`, which makes imperative measurement and focus flows easier to integrate ([#1102](https://github.com/MetaMask/metamask-design-system/pull/1102))
21
+
- Updated `ButtonTertiary` to use the default text color for more consistent contrast across states ([#1099](https://github.com/MetaMask/metamask-design-system/pull/1099))
22
+
-**BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of local enums; existing imports from `@metamask/design-system-react-native` continue to work, but enum-specific type assumptions may need updating ([#1042](https://github.com/MetaMask/metamask-design-system/pull/1042))
23
+
- See [Migration Guide](./MIGRATION.md#from-version-0190-to-0200)
24
+
-**BREAKING:** Updated `Box` type exports (`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, `BoxBorderWidth`) to use const-object + string-union types, and removed stale Box color entries that no longer map to design tokens ([#1026](https://github.com/MetaMask/metamask-design-system/pull/1026))
25
+
- Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative`
26
+
- See [Migration Guide](./MIGRATION.md#from-version-0190-to-0200)
27
+
10
28
## [0.19.0]
11
29
12
30
### Added
@@ -312,13 +330,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
312
330
313
331
### Added
314
332
315
-
- Added 5 new Text component variants with responsive typography support ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)):
333
+
- Added 5 new Text component variants with responsive typography support: ([#777](https://github.com/MetaMask/metamask-design-system/pull/777))
316
334
-`TextVariant.PageHeading` - For main page titles with large, bold styling
317
335
-`TextVariant.SectionHeading` - For section titles with medium, bold styling
318
336
-`TextVariant.ButtonLabelMd` - For medium-sized button labels with optimized button text styling
319
337
-`TextVariant.ButtonLabelLg` - For large-sized button labels with optimized button text styling
320
338
-`TextVariant.AmountDisplayLg` - For large amount/value displays with prominent numeric styling
321
-
- Added comprehensive utility props to Box component for enhanced layout control ([#779](https://github.com/MetaMask/metamask-design-system/pull/779)) and fixes ([#781](https://github.com/MetaMask/metamask-design-system/pull/781)):
339
+
- Added comprehensive utility props to Box component for enhanced layout control and fixes: ([#779](https://github.com/MetaMask/metamask-design-system/pull/779), [#781](https://github.com/MetaMask/metamask-design-system/pull/781))
Copy file name to clipboardExpand all lines: packages/design-system-react-native/MIGRATION.md
+69-10Lines changed: 69 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,6 +23,7 @@ This guide provides detailed instructions for migrating your project from one ve
23
23
-[TextField Component](#textfield-component)
24
24
-[ListItem Component](#listitem-component)
25
25
-[Version Updates](#version-updates)
26
+
-[From version 0.19.0 to 0.20.0](#from-version-0190-to-0200)
26
27
-[From version 0.18.0 to 0.19.0](#from-version-0180-to-0190)
27
28
-[From version 0.16.0 to 0.17.0](#from-version-0160-to-0170)
28
29
-[From version 0.15.0 to 0.16.0](#from-version-0150-to-0160)
@@ -34,6 +35,62 @@ This guide provides detailed instructions for migrating your project from one ve
34
35
35
36
## Version Updates
36
37
38
+
### From version 0.19.0 to 0.20.0
39
+
40
+
#### Box: Enum exports now use const objects and string unions
41
+
42
+
**What Changed:**
43
+
44
+
`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now follow the ADR-0003 const-object + string-union pattern instead of local enums.
#### Box: Removed stale `-alternative` color tokens
57
+
58
+
**What Changed:**
59
+
60
+
The following `BoxBackgroundColor` and `BoxBorderColor` entries have been removed. These tokens were removed from `@metamask/design-tokens` in v4.0.0 but were incorrectly carried over into the Box const objects:
These tokens had no backing CSS custom property, so any usage was already producing no visible style. Replace with `-default` or `-muted` as appropriate:
- Any reference to the removed entries will produce a TypeScript error after upgrading.
93
+
37
94
### From version 0.18.0 to 0.19.0
38
95
39
96
#### HeaderRoot: `titleAccessory` no longer renders without `title`
@@ -99,14 +156,16 @@ If TypeScript now flags props you were previously passing to `Icon`, those props
99
156
</View>
100
157
```
101
158
102
-
#### Box: Type imports moved to `@metamask/design-system-shared`
159
+
#### Box: Enum exports now use const objects and string unions
103
160
104
-
`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth`are now defined in `@metamask/design-system-shared` and re-exported from `@metamask/design-system-react-native`. All existing import paths through `@metamask/design-system-react-native` continue to work without change.
161
+
`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now use const-object + string-union types instead of enums.
105
162
106
163
```tsx
107
-
// Both of these work — shared is the source of truth
#### Box: Removed stale `-alternative` color tokens
@@ -127,9 +186,9 @@ These tokens had no backing CSS custom property, so any usage was already produc
127
186
128
187
### From version 0.16.0 to 0.17.0
129
188
130
-
#### Text: Typography const values moved to `@metamask/design-system-shared`
189
+
#### Text: Typography enum exports now use const objects and string unions
131
190
132
-
`FontWeight`, `FontStyle`, `FontFamily`, `TextVariant`, and `TextColor`are now defined in `@metamask/design-system-shared` and re-exported from `@metamask/design-system-react-native`. All existing import paths through `@metamask/design-system-react-native` continue to work without change.
191
+
`FontWeight`, `FontStyle`, `FontFamily`, `TextVariant`, and `TextColor` now follow the ADR-0003 const-object + string-union pattern instead of enums.
-`KeyValueRow` no longer accepts `field` and `value` configuration objects. Use flat props: `keyLabel`, `value`, optional `variant`, start/end accessories, optional `keyTextProps` / `valueTextProps`, and optional `keyEndButtonIconProps` / `valueEndButtonIconProps`.
244
303
- Layout is handled inside the component (`BoxRow` / `Box`). The old stub API used to compose custom rows is removed.
245
-
-`KeyValueRowVariant`is defined in `@metamask/design-system-shared` (shared props follow ADR-0003 / ADR-0004); React Native–specific props remain on `KeyValueRowProps` in this package.
304
+
-`KeyValueRowVariant`now follows the ADR-0003 / ADR-0004 const-object + string-union pattern; React Native–specific props remain on `KeyValueRowProps` in this package.
246
305
247
306
**Removed from the public API:**
248
307
@@ -382,7 +441,7 @@ Custom React nodes for key or value remain supported:
382
441
383
442
**Instructions for downstream consumers:**
384
443
385
-
- In **MetaMask Mobile**, **MetaMask extension**, and any shared packages, search for`KeyValueRow`and migrate every usage away from `field` / `value` objects to the new props.
444
+
- In **MetaMask Mobile**, **MetaMask extension**, and any other packages that consume`KeyValueRow`, search for usages and migrate every callsite away from `field` / `value` objects to the new props.
386
445
- Remove imports of deleted symbols (`KeyValueRowStubs`, `KeyValueRowFieldIconSides`, `KeyValueRowSectionAlignments`, `TooltipSizes`, `IconSizes`, and the removed types).
387
446
- If your app defines **KeyValueColumn** or another wrapper that forwards the old `KeyValueRow` props, update that component’s API and all call sites to match the new shape.
388
447
@@ -2496,8 +2555,8 @@ This section covers version-to-version breaking changes within `@metamask/design
2496
2555
2497
2556
### BadgeWrapper types now use const-object + union definitions
2498
2557
2499
-
-`BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come from const objects annotated `as const`, which produce string union types rather than TypeScript enums (ADR-0003/ADR-0004). The shared package defines the canonical values and the platform entry points keep re-exporting those names so React Native consumers use the same import paths they already rely on.
2500
-
- The switch lets React, React Native, and shared code stay aligned on the string-literal surface without duplicating runtime enums; no import-path change is required.
2558
+
-`BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come from const objects annotated `as const`, which produce string union types rather than TypeScript enums (ADR-0003/ADR-0004).
2559
+
- The exported names and import paths stay the same, so no import-path change is required.
Copy file name to clipboardExpand all lines: packages/design-system-react/CHANGELOG.md
+15-3Lines changed: 15 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
8
8
## [Unreleased]
9
9
10
+
## [0.18.0]
11
+
12
+
### Changed
13
+
14
+
-**BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of local enums; existing imports from `@metamask/design-system-react` continue to work, but enum-specific type assumptions may need updating ([#1042](https://github.com/MetaMask/metamask-design-system/pull/1042), [#1101](https://github.com/MetaMask/metamask-design-system/pull/1101))
15
+
- See [Migration Guide](./MIGRATION.md#from-version-0170-to-0180)
16
+
-**BREAKING:** Updated `Box` type exports (`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, `BoxBorderWidth`) to use const-object + string-union types, and removed stale Box color entries that no longer map to design tokens ([#1026](https://github.com/MetaMask/metamask-design-system/pull/1026))
17
+
- Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative`
18
+
- See [Migration Guide](./MIGRATION.md#from-version-0170-to-0180)
19
+
- Updated `ButtonTertiary` to use the default text color for more consistent contrast across states ([#1099](https://github.com/MetaMask/metamask-design-system/pull/1099))
20
+
10
21
## [0.17.1]
11
22
12
23
### Changed
@@ -214,13 +225,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
214
225
215
226
### Added
216
227
217
-
- Added 5 new Text component variants with responsive typography support ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)):
228
+
- Added 5 new Text component variants with responsive typography support: ([#777](https://github.com/MetaMask/metamask-design-system/pull/777))
218
229
-`TextVariant.PageHeading` - For main page titles (renders as `<h1>` by default)
219
230
-`TextVariant.SectionHeading` - For section titles (renders as `<h2>` by default)
220
231
-`TextVariant.ButtonLabelMd` - For medium-sized button labels (renders as `<span>` by default)
221
232
-`TextVariant.ButtonLabelLg` - For large-sized button labels (renders as `<span>` by default)
222
233
-`TextVariant.AmountDisplayLg` - For large amount/value displays (renders as `<span>` by default)
223
-
- Added comprehensive utility props to Box component for enhanced layout control ([#779](https://github.com/MetaMask/metamask-design-system/pull/779)) and fixes ([#781](https://github.com/MetaMask/metamask-design-system/pull/781)):
234
+
- Added comprehensive utility props to Box component for enhanced layout control and fixes: ([#779](https://github.com/MetaMask/metamask-design-system/pull/779), [#781](https://github.com/MetaMask/metamask-design-system/pull/781))
0 commit comments