Release/40.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/metamask-design-system",
-  "version": "39.0.0",
+  "version": "40.0.0",
   "private": true,
   "description": "The MetaMask Design System monorepo",
   "repository": {

packages/design-system-react-native/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.25.0]
+
+### Added
+
+- Added `SelectButton`, `SegmentButton`, and `SegmentGroup` for option rows, single-choice segments, and grouped segment controls ([#1172](https://github.com/MetaMask/metamask-design-system/pull/1172))
+- Added `SensitiveText` for masking and revealing sensitive strings, matching the cross-platform contract used on web ([#1164](https://github.com/MetaMask/metamask-design-system/pull/1164))
+- Added `HeaderStandardAnimated` and `useHeaderStandardAnimated` for standard headers with coordinated scroll-driven motion ([#1151](https://github.com/MetaMask/metamask-design-system/pull/1151))
+- Added `TextArea` for multi-line text entry ([#1141](https://github.com/MetaMask/metamask-design-system/pull/1141))
+
+### Changed
+
+- `ButtonBase` now derives label typography, start and end icon sizes, and internal spacing from the `size` prop for every supported `ButtonBaseSize`, keeping defaults aligned without manual per-size tuning ([#1150](https://github.com/MetaMask/metamask-design-system/pull/1150))
+  - If you wrap **`ButtonBase`** and override label, icon, or spacing, see [Migration guide](./MIGRATION.md#buttonbase-size-defaults).
+- `BannerBase` close control behavior is simplified and aligned with the shared dismiss contract ([#1166](https://github.com/MetaMask/metamask-design-system/pull/1166))
+
 ## [0.24.0]
 
 ### Added
@@ -419,7 +434,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/[email protected]
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
+[0.25.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.24.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]

packages/design-system-react-native/MIGRATION.md

@@ -65,6 +65,45 @@ This guide provides detailed instructions for migrating your project from one ve
 
 - Existing **`@metamask/design-system-react-native`** consumers that relied on **`closeButtonProps.onPress`** or on rendering a close button without **`onClose`** must update those call sites.
 
+<a id="buttonbase-size-defaults"></a>
+
+#### ButtonBase: let `size` drive label, icons, and spacing
+
+**What changed:**
+
+- **`ButtonBase`** maps each **`ButtonBaseSize`** to a recommended label **`Text`** variant, matching start and end **`Icon`** sizes, and consistent spacing between accessories and the label.
+
+**Recommendation:**
+
+For any product-specific button built on **`ButtonBase`** (wrappers that forward **`textProps`**, **`textClassName`**, **`startIconProps`**, **`endIconProps`**, **`iconClassName`**, **`spinnerProps`**, or layout **`twClassName`**):
+
+- Remove **icon size** overrides on **`startIconProps`**, **`endIconProps`**, and loading **`spinnerProps`** unless a written design exception requires them.
+- Remove **label typography overrides** in **`textProps`** / **`textClassName`** so the label follows the mapping for the chosen **`size`**.
+- Remove **spacing overrides** (extra gap/margin **`twClassName`** on the root or content row) that only existed to nudge icon–label rhythm; **`ButtonBase`** now owns that layout.
+
+**Migration:**
+
+```tsx
+// Before: overrides that duplicate what size already encodes
+<ButtonBase
+  size={ButtonBaseSize.Md}
+  startIconProps={{ name: IconName.Add, size: IconSize.Md }}
+  textProps={{ variant: TextVariant.BodyLg }}
+  twClassName="gap-4"
+>
+  Continue
+</ButtonBase>
+
+// After: rely on size-driven defaults
+<ButtonBase size={ButtonBaseSize.Md} startIconProps={{ name: IconName.Add }}>
+  Continue
+</ButtonBase>
+```
+
+**Impact:**
+
+- Custom **`ButtonBase`** wrappers that hard-coded icon sizes, text variants, or gaps may render slightly differently after removing overrides; visually they should match the current design spec for that **`size`**.
+
 <!-- Backward-compatible anchor for the 0.24.0 changelog entry that shipped with the old placeholder link. -->
 
 <a id="from-version-0230-to-0x0"></a>

packages/design-system-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-react-native",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Design System React Native",
   "keywords": [
     "MetaMask",

packages/design-system-react/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.23.0]
+
+### Added
+
+- Added `PopoverHeader` for popover title rows and trailing actions, aligned with MetaMask extension screen patterns ([#1158](https://github.com/MetaMask/metamask-design-system/pull/1158))
+- Added `ModalHeader` for modal title rows and accessory slots, aligned with MetaMask extension screen patterns ([#1144](https://github.com/MetaMask/metamask-design-system/pull/1144))
+- Added `Label` for accessible captions paired with form controls ([#1152](https://github.com/MetaMask/metamask-design-system/pull/1152))
+- Added `SensitiveText` for masking and revealing sensitive strings (addresses, secrets, recovery phrases) with configurable visible length ([#1164](https://github.com/MetaMask/metamask-design-system/pull/1164))
+- Added `HelpText` for helper, success, warning, and error copy beneath inputs and other controls ([#1169](https://github.com/MetaMask/metamask-design-system/pull/1169))
+
+### Changed
+
+- `ButtonBase` now derives label typography, start and end icon sizes, and internal spacing from the `size` prop for every supported `ButtonBaseSize`, keeping defaults aligned without manual per-size tuning ([#1150](https://github.com/MetaMask/metamask-design-system/pull/1150))
+  - If you wrap **`ButtonBase`** and override label, icon, or spacing, see [Migration guide](./MIGRATION.md#buttonbase-size-defaults).
+- `BannerBase` close control behavior is simplified and aligned with the shared dismiss contract ([#1166](https://github.com/MetaMask/metamask-design-system/pull/1166))
+
 ## [0.22.0]
 
 ### Added
@@ -304,7 +320,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/[email protected]
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
+[0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.21.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]

packages/design-system-react/MIGRATION.md

@@ -2513,6 +2513,45 @@ Codemod-friendly: every `isLoading=` token in the extension's existing call site
 
 - Existing **`@metamask/design-system-react`** consumers that relied on **`closeButtonProps.onClick`** or on rendering a close button without **`onClose`** must update those call sites.
 
+<a id="buttonbase-size-defaults"></a>
+
+### ButtonBase: let `size` drive label, icons, and spacing
+
+**What changed:**
+
+- **`ButtonBase`** maps each **`ButtonBaseSize`** to a recommended label **`Text`** variant, matching start and end **`Icon`** sizes, and consistent spacing between accessories and the label.
+
+**Recommendation:**
+
+For any product-specific button built on **`ButtonBase`** (wrappers that forward **`textProps`**, **`startIconProps`**, **`endIconProps`**, **`loadingIconProps`**, or extra layout classes):
+
+- Remove **icon size** overrides on **`startIconProps`**, **`endIconProps`**, and **`loadingIconProps`** unless a written design exception requires them.
+- Remove **label typography overrides** in **`textProps`** (for example a different **`variant`**) so the label follows the mapping for the chosen **`size`**.
+- Remove **spacing or gap overrides** (extra **`className`** / layout utilities on the root or content row) that only existed to nudge icon–label rhythm; **`ButtonBase`** now owns that layout.
+
+**Migration:**
+
+```tsx
+// Before: overrides that duplicate what size already encodes
+<ButtonBase
+  size={ButtonBaseSize.Md}
+  startIconProps={{ name: IconName.Add, size: IconSize.Md }}
+  textProps={{ variant: TextVariant.BodyLg }}
+  className="gap-4"
+>
+  Continue
+</ButtonBase>
+
+// After: rely on size-driven defaults
+<ButtonBase size={ButtonBaseSize.Md} startIconProps={{ name: IconName.Add }}>
+  Continue
+</ButtonBase>
+```
+
+**Impact:**
+
+- Custom **`ButtonBase`** wrappers that hard-coded icon sizes, text variants, or gaps may render slightly differently after removing overrides; visually they should match the current design spec for that **`size`**.
+
 This section covers version-to-version breaking changes within `@metamask/design-system-react`.
 
 ## From version 0.17.0 to 0.18.0

packages/design-system-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-react",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",

packages/design-system-shared/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.18.0]
+
+### Added
+
+- Exported `SelectButton` prop and variant types (`SelectButtonPropsShared`, `SelectButtonVariant`, `SelectButtonEndArrow`), `SegmentGroupPropsShared`, and `SegmentGroupContext` so mobile and web packages share one segment and select contract ([#1172](https://github.com/MetaMask/metamask-design-system/pull/1172))
+- Exported `SensitiveTextLength`, `SensitiveTextPropsShared`, and related types for cross-platform masking and reveal behavior ([#1164](https://github.com/MetaMask/metamask-design-system/pull/1164))
+- Exported `HelpTextSeverity`, `HelpTextPropsShared`, and related types for cross-platform helper and validation text ([#1169](https://github.com/MetaMask/metamask-design-system/pull/1169))
+- Exported `TextAreaPropsShared` for cross-platform multi-line input wrappers ([#1141](https://github.com/MetaMask/metamask-design-system/pull/1141))
+
 ## [0.17.0]
 
 ### Added
@@ -180,7 +189,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/[email protected]
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]
+[0.18.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]
 [0.15.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/[email protected]...@metamask/[email protected]

packages/design-system-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-shared",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Shared types for design system libraries",
   "keywords": [
     "MetaMask",

yarn.lock

@@ -3398,9 +3398,11 @@ __metadata:
     "@ts-bridge/cli": "npm:^0.6.3"
     "@types/jest": "npm:^27.4.1"
     "@types/react": "npm:^18.2.0"
+    "@types/react-test-renderer": "npm:^18"
     deepmerge: "npm:^4.2.2"
     jest: "npm:^29.7.0"
     react: "npm:18.3.1"
+    react-test-renderer: "npm:^18.3.1"
     ts-jest: "npm:^29.2.5"
     tsx: "npm:^4.20.6"
     typescript: "npm:~5.2.2"