diff --git a/package.json b/package.json index b42ee64b6..f586043ab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@metamask/metamask-design-system", - "version": "34.0.0", + "version": "35.0.0", "private": true, "description": "The MetaMask Design System monorepo", "repository": { diff --git a/packages/design-system-react-native/CHANGELOG.md b/packages/design-system-react-native/CHANGELOG.md index 118dd4608..1199d6927 100644 --- a/packages/design-system-react-native/CHANGELOG.md +++ b/packages/design-system-react-native/CHANGELOG.md @@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.20.0] + +### Added + +- Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows ([#1051](https://github.com/MetaMask/metamask-design-system/pull/1051)) +- Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts ([#1059](https://github.com/MetaMask/metamask-design-system/pull/1059)) +- Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories ([#1053](https://github.com/MetaMask/metamask-design-system/pull/1053)) + +### Changed + +- `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)) +- Updated `ButtonTertiary` to use the default text color for more consistent contrast across states ([#1099](https://github.com/MetaMask/metamask-design-system/pull/1099)) +- **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)) + - See [Migration Guide](./MIGRATION.md#from-version-0190-to-0200) +- **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)) + - Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative` + - See [Migration Guide](./MIGRATION.md#from-version-0190-to-0200) + ## [0.19.0] ### Added @@ -312,13 +330,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Added 5 new Text component variants with responsive typography support ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)): +- Added 5 new Text component variants with responsive typography support: ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)) - `TextVariant.PageHeading` - For main page titles with large, bold styling - `TextVariant.SectionHeading` - For section titles with medium, bold styling - `TextVariant.ButtonLabelMd` - For medium-sized button labels with optimized button text styling - `TextVariant.ButtonLabelLg` - For large-sized button labels with optimized button text styling - `TextVariant.AmountDisplayLg` - For large amount/value displays with prominent numeric styling -- 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)): +- 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)) - **Margin props:** `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical` - **Padding props:** `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical` - **Border props:** `borderWidth`, `borderColor` @@ -343,7 +361,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Full TypeScript support with type definitions and enums - React Native integration with TWRNC preset support -[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.19.0...HEAD +[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.20.0...HEAD +[0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.19.0...@metamask/design-system-react-native@0.20.0 [0.19.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.18.0...@metamask/design-system-react-native@0.19.0 [0.18.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.17.0...@metamask/design-system-react-native@0.18.0 [0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.16.0...@metamask/design-system-react-native@0.17.0 diff --git a/packages/design-system-react-native/MIGRATION.md b/packages/design-system-react-native/MIGRATION.md index 1aa8731a1..6bf8a334e 100644 --- a/packages/design-system-react-native/MIGRATION.md +++ b/packages/design-system-react-native/MIGRATION.md @@ -23,6 +23,7 @@ This guide provides detailed instructions for migrating your project from one ve - [TextField Component](#textfield-component) - [ListItem Component](#listitem-component) - [Version Updates](#version-updates) + - [From version 0.19.0 to 0.20.0](#from-version-0190-to-0200) - [From version 0.18.0 to 0.19.0](#from-version-0180-to-0190) - [From version 0.16.0 to 0.17.0](#from-version-0160-to-0170) - [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 ## Version Updates +### From version 0.19.0 to 0.20.0 + +#### Box: Enum exports now use const objects and string unions + +**What Changed:** + +`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now follow the ADR-0003 const-object + string-union pattern instead of local enums. + +**Migration:** + +```tsx +// Before (0.19.0) +import { BoxBackgroundColor } from '@metamask/design-system-react-native'; + +// After (0.20.0) +import { BoxBackgroundColor } from '@metamask/design-system-react-native'; +``` + +#### Box: Removed stale `-alternative` color tokens + +**What Changed:** + +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: + +| Removed Entry | Replacement | +| --------------------------------------- | ----------------------------------- | +| `BoxBackgroundColor.WarningAlternative` | `BoxBackgroundColor.WarningDefault` | +| `BoxBackgroundColor.SuccessAlternative` | `BoxBackgroundColor.SuccessDefault` | +| `BoxBorderColor.WarningAlternative` | `BoxBorderColor.WarningDefault` | +| `BoxBorderColor.SuccessAlternative` | `BoxBorderColor.SuccessDefault` | +| `BoxBorderColor.InfoAlternative` | `BoxBorderColor.InfoDefault` | + +**Migration:** + +These tokens had no backing CSS custom property, so any usage was already producing no visible style. Replace with `-default` or `-muted` as appropriate: + +```tsx +// Before (0.19.0) + + + + + + +// After (0.20.0) + + + + + +``` + +**Impact:** + +- Any reference to the removed entries will produce a TypeScript error after upgrading. + ### From version 0.18.0 to 0.19.0 #### HeaderRoot: `titleAccessory` no longer renders without `title` @@ -99,14 +156,16 @@ If TypeScript now flags props you were previously passing to `Icon`, those props ``` -#### Box: Type imports moved to `@metamask/design-system-shared` +#### Box: Enum exports now use const objects and string unions -`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. +`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now use const-object + string-union types instead of enums. ```tsx -// Both of these work — shared is the source of truth +// Before (0.18.0) +import { BoxBackgroundColor } from '@metamask/design-system-react-native'; + +// After (0.19.0) import { BoxBackgroundColor } from '@metamask/design-system-react-native'; -import { BoxBackgroundColor } from '@metamask/design-system-shared'; ``` #### Box: Removed stale `-alternative` color tokens @@ -127,9 +186,9 @@ These tokens had no backing CSS custom property, so any usage was already produc ### From version 0.16.0 to 0.17.0 -#### Text: Typography const values moved to `@metamask/design-system-shared` +#### Text: Typography enum exports now use const objects and string unions -`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. +`FontWeight`, `FontStyle`, `FontFamily`, `TextVariant`, and `TextColor` now follow the ADR-0003 const-object + string-union pattern instead of enums. #### `FontWeight` values changed @@ -242,7 +301,7 @@ import { BoxRow, BoxColumn } from '@metamask/design-system-react-native'; - `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`. - Layout is handled inside the component (`BoxRow` / `Box`). The old stub API used to compose custom rows is removed. -- `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. +- `KeyValueRowVariant` now follows the ADR-0003 / ADR-0004 const-object + string-union pattern; React Native–specific props remain on `KeyValueRowProps` in this package. **Removed from the public API:** @@ -382,7 +441,7 @@ Custom React nodes for key or value remain supported: **Instructions for downstream consumers:** -- 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. +- 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. - Remove imports of deleted symbols (`KeyValueRowStubs`, `KeyValueRowFieldIconSides`, `KeyValueRowSectionAlignments`, `TooltipSizes`, `IconSizes`, and the removed types). - 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. @@ -2496,8 +2555,8 @@ This section covers version-to-version breaking changes within `@metamask/design ### BadgeWrapper types now use const-object + union definitions -- `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. -- 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. +- `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 exported names and import paths stay the same, so no import-path change is required. ## From version 0.11.0 to 0.12.0 diff --git a/packages/design-system-react-native/package.json b/packages/design-system-react-native/package.json index 88c5667bb..f21328ec8 100644 --- a/packages/design-system-react-native/package.json +++ b/packages/design-system-react-native/package.json @@ -1,6 +1,6 @@ { "name": "@metamask/design-system-react-native", - "version": "0.19.0", + "version": "0.20.0", "description": "Design System React Native", "keywords": [ "MetaMask", diff --git a/packages/design-system-react/CHANGELOG.md b/packages/design-system-react/CHANGELOG.md index 053f54ca8..848dc476e 100644 --- a/packages/design-system-react/CHANGELOG.md +++ b/packages/design-system-react/CHANGELOG.md @@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.18.0] + +### Changed + +- **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)) + - See [Migration Guide](./MIGRATION.md#from-version-0170-to-0180) +- **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)) + - Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative` + - See [Migration Guide](./MIGRATION.md#from-version-0170-to-0180) +- Updated `ButtonTertiary` to use the default text color for more consistent contrast across states ([#1099](https://github.com/MetaMask/metamask-design-system/pull/1099)) + ## [0.17.1] ### Changed @@ -214,13 +225,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added -- Added 5 new Text component variants with responsive typography support ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)): +- Added 5 new Text component variants with responsive typography support: ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)) - `TextVariant.PageHeading` - For main page titles (renders as `

` by default) - `TextVariant.SectionHeading` - For section titles (renders as `

` by default) - `TextVariant.ButtonLabelMd` - For medium-sized button labels (renders as `` by default) - `TextVariant.ButtonLabelLg` - For large-sized button labels (renders as `` by default) - `TextVariant.AmountDisplayLg` - For large amount/value displays (renders as `` by default) -- 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)): +- 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)) - **Margin props:** `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical` - **Padding props:** `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical` - **Border props:** `borderWidth`, `borderColor` @@ -246,7 +257,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Full TypeScript support with type definitions and enums - Tailwind CSS integration with design token support -[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.1...HEAD +[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.18.0...HEAD +[0.18.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.1...@metamask/design-system-react@0.18.0 [0.17.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.0...@metamask/design-system-react@0.17.1 [0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.16.0...@metamask/design-system-react@0.17.0 [0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.15.0...@metamask/design-system-react@0.16.0 diff --git a/packages/design-system-react/MIGRATION.md b/packages/design-system-react/MIGRATION.md index e89146280..e2c205a1d 100644 --- a/packages/design-system-react/MIGRATION.md +++ b/packages/design-system-react/MIGRATION.md @@ -841,18 +841,26 @@ This section covers version-to-version breaking changes within `@metamask/design ## From version 0.17.0 to 0.18.0 -### Box: Type imports moved to `@metamask/design-system-shared` +### Box: Enum exports now use const objects and string unions -`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`. All existing import paths through `@metamask/design-system-react` continue to work without change. +**What Changed:** + +`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, and `BoxBorderWidth` now follow the ADR-0003 const-object + string-union pattern instead of local enums. + +**Migration:** ```tsx -// Both of these work — shared is the source of truth +// Before (0.17.1) +import { BoxBackgroundColor } from '@metamask/design-system-react'; + +// After (0.18.0) import { BoxBackgroundColor } from '@metamask/design-system-react'; -import { BoxBackgroundColor } from '@metamask/design-system-shared'; ``` ### Box: Removed stale `-alternative` color tokens +**What Changed:** + 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: | Removed Entry | Replacement | @@ -863,15 +871,37 @@ The following `BoxBackgroundColor` and `BoxBorderColor` entries have been remove | `BoxBorderColor.SuccessAlternative` | `BoxBorderColor.SuccessDefault` | | `BoxBorderColor.InfoAlternative` | `BoxBorderColor.InfoDefault` | -These tokens had no backing CSS custom property, so any usage was already producing no visible style. Replace with `-default` or `-muted` as appropriate. +**Migration:** + +These tokens had no backing CSS custom property, so any usage was already producing no visible style. Replace with `-default` or `-muted` as appropriate: + +```tsx +// Before (0.17.1) + + + + + + +// After (0.18.0) + + + + + +``` + +**Impact:** + +- Any reference to the removed entries will produce a TypeScript error after upgrading. --- ## From version 0.16.0 to 0.17.0 -### Text: Typography const values moved to `@metamask/design-system-shared` +### Text: Typography enum exports now use const objects and string unions -`FontWeight`, `FontStyle`, `FontFamily`, `TextVariant`, and `TextColor` are now defined in `@metamask/design-system-shared` and re-exported from `@metamask/design-system-react`. All existing import paths through `@metamask/design-system-react` continue to work without change. +`FontWeight`, `FontStyle`, `FontFamily`, `TextVariant`, and `TextColor` now follow the ADR-0003 const-object + string-union pattern instead of enums. #### `FontWeight`, `FontStyle`, and `FontFamily` values changed @@ -902,7 +932,7 @@ if (fontWeight === FontWeight.Bold) { ... } #### Breaking: Tailwind content scanning -If your project scans `node_modules/@metamask/design-system-react` for Tailwind class names (e.g. to include `text-primary-default` from `TextColor`), you must also scan `@metamask/design-system-shared` because the class name strings now live in the shared package's compiled output. +If your project scans `node_modules` for Tailwind class names (for example to include `text-primary-default` from `TextColor`), widen your MMDS content globs after upgrading so the generated class name strings are still discovered. **Before (0.16.0):** @@ -918,8 +948,7 @@ content: [ ```js // tailwind.config.js content: [ - './node_modules/@metamask/design-system-react/**/*.{mjs,cjs}', - './node_modules/@metamask/design-system-shared/**/*.{mjs,cjs}', + './node_modules/@metamask/design-system-*/**/*.{mjs,cjs}', ], ``` @@ -935,7 +964,7 @@ content: [ ### BadgeWrapper types now use const-object + union definitions -- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come from const objects annotated `as const`, producing string union types instead of TypeScript enums; this follows ADR-0003 and ADR-0004 so the same canonical values power both React and React Native without duplicating the runtime constants (see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md). +- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now come from const objects annotated `as const`, producing string union types instead of TypeScript enums; this follows ADR-0003 and ADR-0004 (see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md). - The exports remain available through `@metamask/design-system-react` (and the platform-specific bundles), so your import path stays the same; only the underlying type shape shifted to a const-object/union pattern so you gain string-literal widening while keeping the previously exported names. ## From version 0.10.0 to 0.11.0 diff --git a/packages/design-system-react/package.json b/packages/design-system-react/package.json index ddbe998fd..9894f9dbd 100644 --- a/packages/design-system-react/package.json +++ b/packages/design-system-react/package.json @@ -1,6 +1,6 @@ { "name": "@metamask/design-system-react", - "version": "0.17.1", + "version": "0.18.0", "description": "Design system react ui components", "keywords": [ "MetaMask", diff --git a/packages/design-system-shared/CHANGELOG.md b/packages/design-system-shared/CHANGELOG.md index 89b93ffa7..2ad4fba3b 100644 --- a/packages/design-system-shared/CHANGELOG.md +++ b/packages/design-system-shared/CHANGELOG.md @@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.13.0] + +### Added + +- Added `TitleStandardPropsShared` and `TitleSubpagePropsShared` for shared header composition across platform packages ([#1051](https://github.com/MetaMask/metamask-design-system/pull/1051), [#1059](https://github.com/MetaMask/metamask-design-system/pull/1059)) +- Added `TagSeverity` and `TagPropsShared` for shared Tag contracts consumed by platform packages ([#1053](https://github.com/MetaMask/metamask-design-system/pull/1053)) + +### Changed + +- **BREAKING:** Updated shared `Box` exports (`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, `BoxBorderWidth`, `BoxPropsShared`) from enums to const objects with derived string unions ([#1026](https://github.com/MetaMask/metamask-design-system/pull/1026)) + - Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative` + - See [Migration Guide](./MIGRATION.md#from-version-0120-to-0130) +- **BREAKING:** Updated shared `Icon` exports (`IconName`, `IconColor`, `IconSize`, `IconPropsShared`) to use const objects with derived string unions and made `@metamask/design-system-shared` the source of truth for icon names and assets across React and React Native ([#1042](https://github.com/MetaMask/metamask-design-system/pull/1042)) + - See [Migration Guide](./MIGRATION.md#from-version-0120-to-0130) + ## [0.12.0] ### Added @@ -135,7 +150,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - **Initial release** - MetaMask Design System Shared - Adding CAIP-10 address utilities ([#817](https://github.com/MetaMask/metamask-design-system/pull/817)) -[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.12.0...HEAD +[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.13.0...HEAD +[0.13.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.12.0...@metamask/design-system-shared@0.13.0 [0.12.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.11.0...@metamask/design-system-shared@0.12.0 [0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.10.0...@metamask/design-system-shared@0.11.0 [0.10.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.9.0...@metamask/design-system-shared@0.10.0 diff --git a/packages/design-system-shared/MIGRATION.md b/packages/design-system-shared/MIGRATION.md index 5720ae816..ae3b144f0 100644 --- a/packages/design-system-shared/MIGRATION.md +++ b/packages/design-system-shared/MIGRATION.md @@ -5,11 +5,53 @@ This guide provides detailed instructions for migrating your project from one ve ## Table of Contents - [Version Updates](#version-updates) + - [From version 0.12.0 to 0.13.0](#from-version-0120-to-0130) - [From version 0.11.0 to 0.12.0](#from-version-0110-to-0120) ## Version Updates -### From version 0.11.0 to 0.12.0 +### From version 0.12.0 to 0.13.0 + +#### Icon: Shared exports now use const objects and string unions + +**What Changed:** + +`IconName`, `IconColor`, `IconSize`, and `IconPropsShared` are now defined in `@metamask/design-system-shared` as const objects with derived string-union types rather than TypeScript enums. The shared package is also now the single source of truth for icon names and generated assets used by both React and React Native. + +**Migration:** + +Typical usage does not need a code change. Continue using the same members as before: + +```tsx +// Before (0.12.0) +import { IconColor, IconName, IconSize } from '@metamask/design-system-shared'; + +const iconName: IconName = IconName.Add; +const iconColor: IconColor = IconColor.IconDefault; +const iconSize: IconSize = IconSize.Md; + +// After (0.13.0) +import { IconColor, IconName, IconSize } from '@metamask/design-system-shared'; + +const iconName: IconName = IconName.Add; +const iconColor: IconColor = IconColor.IconDefault; +const iconSize: IconSize = IconSize.Md; +``` + +**Impact:** + +- Any code that depended on these exports being TypeScript `enum`s rather than const objects may need to update its typing assumptions. +- Typical usage with `IconName.Add`, `IconColor.IconDefault`, and `IconSize.Md` continues to work unchanged. + +#### Box: Shared exports now use const objects and string unions + +**What Changed:** + +`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, `BoxBorderWidth`, and `BoxPropsShared` are now defined in `@metamask/design-system-shared` using the ADR-0003 const-object + string-union pattern rather than TypeScript enums. + +**Migration:** + +Typical usage does not need an import-path change. Continue importing the same names from `@metamask/design-system-shared`. #### Removed: Stale `BoxBackgroundColor` and `BoxBorderColor` `-alternative` tokens @@ -30,14 +72,14 @@ The following `BoxBackgroundColor` and `BoxBorderColor` entries have been remove These tokens had no backing CSS custom property, so any usage was already producing no visible style. Remove references and use the corresponding `-default` or `-muted` token instead: ```tsx -// Before (0.11.0) +// Before (0.12.0) -// After (0.12.0) — use -default or -muted as appropriate +// After (0.13.0) — use -default or -muted as appropriate @@ -50,7 +92,7 @@ These tokens had no backing CSS custom property, so any usage was already produc - Any reference to the removed entries will produce a TypeScript error after upgrading. - No visual regression — the removed tokens had no backing design token since `@metamask/design-tokens` v4.0.0. ---- +### From version 0.11.0 to 0.12.0 #### Removed: `isReactNodeRenderable` utility diff --git a/packages/design-system-shared/package.json b/packages/design-system-shared/package.json index f6c4ebf24..c3726ec0b 100644 --- a/packages/design-system-shared/package.json +++ b/packages/design-system-shared/package.json @@ -1,6 +1,6 @@ { "name": "@metamask/design-system-shared", - "version": "0.12.0", + "version": "0.13.0", "description": "Shared types for design system libraries", "keywords": [ "MetaMask",