Skip to content

chore: migrate Button and ButtonBase to ADR-0003 and ADR-0004 shared types (DSYS-483)#1034

Merged
georgewrmarshall merged 8 commits intomainfrom
cursor/enum-shared-type-migration-341b
Apr 28, 2026
Merged

chore: migrate Button and ButtonBase to ADR-0003 and ADR-0004 shared types (DSYS-483)#1034
georgewrmarshall merged 8 commits intomainfrom
cursor/enum-shared-type-migration-341b

Conversation

@cursor
Copy link
Copy Markdown
Contributor

@cursor cursor Bot commented Apr 2, 2026

Description

Migrates Button and ButtonBase components to follow ADR-0003 (String Unions) and ADR-0004 (Centralized Types Architecture) as part of DSYS-483.

What changed:

  • Created ButtonBaseSize const object (ADR-0003) and ButtonBasePropsShared type (ADR-0004) in @metamask/design-system-shared
  • Created ButtonVariant const object (ADR-0003) and ButtonPropsShared type (ADR-0004) in @metamask/design-system-shared
  • Added shared ButtonSize alias for the public Button API, while keeping ButtonHeroSize as a separate shared alias
  • Removed old ButtonBaseSize and ButtonVariant enums from both platform src/types/index.ts files
  • Updated ButtonBase, Button, ButtonHero, and downstream consumers in both React and React Native packages to import shared size and variant ownership directly from @metamask/design-system-shared
  • Replaced internal variant-specific size names (ButtonPrimarySize, ButtonSecondarySize, ButtonTertiarySize) with ButtonSize so the public API surface matches the actual component ownership
  • Updated variant docs and code comments to clarify that ButtonPrimary, ButtonSecondary, and ButtonTertiary are internal Button variants and that consumers should use Button with variant
  • Updated stories, tests, and related files that previously imported these enums or aliases from platform type barrels or sibling components

ADR compliance:

  • ADR-0003: ButtonBaseSize and ButtonVariant are now as const objects with derived union types
  • ADR-0004: ButtonBasePropsShared, ButtonPropsShared, ButtonSize, and ButtonHeroSize are now owned in @metamask/design-system-shared

Verification:

  • yarn lint ✅ (2 existing warnings in create-component scripts)
  • yarn test
  • yarn build

Related issues

Fixes: DSYS-483

Manual testing steps

  1. Import ButtonBaseSize, ButtonVariant, and ButtonSize from @metamask/design-system-shared and verify the values are correct
  2. Import Button, ButtonSize, and ButtonVariant from @metamask/design-system-react and verify the public API still works
  3. Import Button, ButtonSize, and ButtonVariant from @metamask/design-system-react-native and verify the public API still works
  4. Confirm the variant READMEs/comments direct consumers to Button plus variant rather than treating ButtonPrimary/ButtonSecondary/ButtonTertiary as public entry points

Screenshots/Recordings

After

no visual changes

after720.mov

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests if applicable
  • I've documented my code using JSDoc format if applicable
  • I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
Open in Web View Automation 

Note

Medium Risk
Moderate risk because it changes exported runtime symbols (enums to as const objects) and centralizes Button/ButtonBase types across React and React Native, which can break downstream imports or assumptions about enum behavior.

Overview
Migrates Button, ButtonBase, and related consumers in both React and React Native to use centralized shared types from @metamask/design-system-shared, replacing platform-local src/types exports.

Adds shared ButtonBaseSize/ButtonSize/ButtonHeroSize and ButtonVariant (now as const string-union objects) plus ButtonBasePropsShared/ButtonPropsShared, updates component prop typings and story/test imports accordingly, and removes the old button size/variant enums and variant-specific size aliases from the platform type barrels.

Updates variant docs/comments to clarify ButtonPrimary/ButtonSecondary/ButtonTertiary are internal variants and consumers should use Button with variant.

Reviewed by Cursor Bugbot for commit cc5e4d5. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 2, 2026

📖 Storybook Preview

@georgewrmarshall georgewrmarshall force-pushed the cursor/enum-shared-type-migration-341b branch from 7bdea48 to 14df379 Compare April 28, 2026 04:51
@github-actions
Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall changed the title feat(shared): migrate Button and ButtonBase to ADR-0003 and ADR-0004 shared types (DSYS-483) chore: migrate Button and ButtonBase to ADR-0003 and ADR-0004 shared types (DSYS-483) Apr 28, 2026
@georgewrmarshall georgewrmarshall self-assigned this Apr 28, 2026

import type { ButtonPrimaryProps } from './ButtonPrimary.types';

// Internal Button variant.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variant components remain in the tree as styling implementations behind Button, but the comment makes it explicit that consumers should treat variant as the public API boundary. That distinction matters here because the migration intentionally keeps shared/public ownership on Button and ButtonBase rather than promoting ButtonPrimary to a first-class API owner.

export type ButtonBaseSize =
(typeof ButtonBaseSize)[keyof typeof ButtonBaseSize];

export const ButtonSize = ButtonBaseSize;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ButtonSize stays as a shared alias of ButtonBaseSize so the public Button API keeps its semantic name without inventing separate size owners for each internal variant. Variant-specific aliases were intentionally dropped because ButtonPrimary, ButtonSecondary, and ButtonTertiary are implementation detail, not public API surfaces.

@@ -1,3 +1,3 @@
export { ButtonVariant, ButtonSize } from '../../types';
export { ButtonVariant, ButtonSize } from '@metamask/design-system-shared';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Button re-exports ButtonSize directly from shared because Button owns that public semantic name. This keeps the package entry point aligned with ADR-0004 and avoids hiding shared ownership behind platform-local aliases.

control: 'select',
options: Object.keys(ButtonPrimarySize),
mapping: ButtonPrimarySize,
options: Object.keys(ButtonSize),
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The size controls here now use ButtonSize on purpose. The earlier ButtonPrimarySize/ButtonSecondarySize/ButtonTertiarySize names were removed because those variants are not public API owners, so keeping a single public ButtonSize makes the exported type surface match the actual architecture.

# ButtonPrimary

`ButtonPrimary` is a button for most important and desired action to guide the user.
`ButtonPrimary` is an internal variant of the public `Button` component.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The README now says to use Button with ButtonVariant instead of documenting ButtonPrimary as if it were a consumer-facing entry point. That keeps the generated docs aligned with the actual package exports and the internal-variant decision in code.


import type { ButtonPrimaryProps } from './ButtonPrimary.types';

// Internal Button variant.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This inline note is here to make the architectural boundary obvious when someone opens the variant file directly: styling still lives in these components, but the supported public API is Button plus ButtonVariant. That helps future migrations avoid reintroducing variant-owned shared types or exports by accident.

@georgewrmarshall georgewrmarshall marked this pull request as ready for review April 28, 2026 17:35
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner April 28, 2026 17:35
@georgewrmarshall georgewrmarshall force-pushed the cursor/enum-shared-type-migration-341b branch from fd4554d to aa53d6a Compare April 28, 2026 17:39
@github-actions
Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions
Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall enabled auto-merge (squash) April 28, 2026 17:44
brianacnguyen
brianacnguyen previously approved these changes Apr 28, 2026
@georgewrmarshall georgewrmarshall dismissed stale reviews from brianacnguyen and themself via 4c91bf9 April 28, 2026 18:32
@georgewrmarshall georgewrmarshall force-pushed the cursor/enum-shared-type-migration-341b branch from c804307 to 4c91bf9 Compare April 28, 2026 18:32
@github-actions
Copy link
Copy Markdown
Contributor

📖 Storybook Preview

Comment on lines +26 to +36
export {
ButtonBaseSize,
ButtonVariant,
ButtonIconSize,
ButtonIconVariant,
} from '@metamask/design-system-shared';
export { ButtonBaseSize as ButtonPrimarySize } from '@metamask/design-system-shared';
export { ButtonBaseSize as ButtonSecondarySize } from '@metamask/design-system-shared';
export { ButtonBaseSize as ButtonTertiarySize } from '@metamask/design-system-shared';
export { ButtonBaseSize as ButtonHeroSize } from '@metamask/design-system-shared';
export { ButtonBaseSize as ButtonSize } from '@metamask/design-system-shared';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove

@github-actions
Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall merged commit 578dec4 into main Apr 28, 2026
44 checks passed
@georgewrmarshall georgewrmarshall deleted the cursor/enum-shared-type-migration-341b branch April 28, 2026 19:07
georgewrmarshall added a commit that referenced this pull request Apr 28, 2026
…types (DSYS-483) (#1034)

## **Description**

Migrates `Button` and `ButtonBase` components to follow ADR-0003 (String
Unions) and ADR-0004 (Centralized Types Architecture) as part of
DSYS-483.

**What changed:**

- Created `ButtonBaseSize` const object (ADR-0003) and
`ButtonBasePropsShared` type (ADR-0004) in
`@metamask/design-system-shared`
- Created `ButtonVariant` const object (ADR-0003) and
`ButtonPropsShared` type (ADR-0004) in `@metamask/design-system-shared`
- Added shared `ButtonSize` alias for the public `Button` API, while
keeping `ButtonHeroSize` as a separate shared alias
- Removed old `ButtonBaseSize` and `ButtonVariant` enums from both
platform `src/types/index.ts` files
- Updated `ButtonBase`, `Button`, `ButtonHero`, and downstream consumers
in both React and React Native packages to import shared size and
variant ownership directly from `@metamask/design-system-shared`
- Replaced internal variant-specific size names (`ButtonPrimarySize`,
`ButtonSecondarySize`, `ButtonTertiarySize`) with `ButtonSize` so the
public API surface matches the actual component ownership
- Updated variant docs and code comments to clarify that
`ButtonPrimary`, `ButtonSecondary`, and `ButtonTertiary` are internal
Button variants and that consumers should use `Button` with `variant`
- Updated stories, tests, and related files that previously imported
these enums or aliases from platform type barrels or sibling components

**ADR compliance:**
- ADR-0003: `ButtonBaseSize` and `ButtonVariant` are now `as const`
objects with derived union types
- ADR-0004: `ButtonBasePropsShared`, `ButtonPropsShared`, `ButtonSize`,
and `ButtonHeroSize` are now owned in `@metamask/design-system-shared`

**Verification:**
- `yarn lint` ✅ (2 existing warnings in create-component scripts)
- `yarn test` ✅
- `yarn build` ✅

## **Related issues**

Fixes:
[DSYS-483](https://consensyssoftware.atlassian.net/browse/DSYS-483)

## **Manual testing steps**

1. Import `ButtonBaseSize`, `ButtonVariant`, and `ButtonSize` from
`@metamask/design-system-shared` and verify the values are correct
2. Import `Button`, `ButtonSize`, and `ButtonVariant` from
`@metamask/design-system-react` and verify the public API still works
3. Import `Button`, `ButtonSize`, and `ButtonVariant` from
`@metamask/design-system-react-native` and verify the public API still
works
4. Confirm the variant READMEs/comments direct consumers to `Button`
plus `variant` rather than treating
`ButtonPrimary`/`ButtonSecondary`/`ButtonTertiary` as public entry
points

## **Screenshots/Recordings**

### **After**

no visual changes


https://github.com/user-attachments/assets/183e5fe9-a309-4de6-8281-70ea0ead1be2


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<div><a
href="https://cursor.com/agents/bc-b2a86da3-4b2f-4406-8749-503c5375746c"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/automations/864f6729-e11f-445a-9607-65e9539d53c1"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/view-automation-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/view-automation-light.png"><img
alt="View Automation" width="141" height="28"
src="https://cursor.com/assets/images/view-automation-dark.png"></picture></a>&nbsp;</div>

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because it changes exported type sources and switches
`ButtonVariant`/sizes from platform enums to shared `as const` objects,
which can break downstream imports/typing if any consumers relied on the
old enums/aliases.
> 
> **Overview**
> Migrates `Button`, `ButtonBase`, and related consumers in both React
and React Native to import `ButtonVariant`,
`ButtonBaseSize`/`ButtonSize`, `ButtonHeroSize`, and shared prop types
from `@metamask/design-system-shared` (ADR-0003/ADR-0004), and removes
the old button size/variant enums from the platform `types` barrels.
> 
> Adds new shared definitions (`ButtonBaseSize`/`ButtonVariant` as `as
const` objects plus `ButtonBasePropsShared`/`ButtonPropsShared`) and
updates component props, stories/tests, and docs to use `ButtonSize`
(dropping
`ButtonPrimarySize`/`ButtonSecondarySize`/`ButtonTertiarySize`) and to
clarify the variant components are *internal* and consumers should use
`Button` with `variant`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
c804307. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
cursor Bot added a commit that referenced this pull request Apr 28, 2026
…types (DSYS-483) (#1034)

## **Description**

Migrates `Button` and `ButtonBase` components to follow ADR-0003 (String
Unions) and ADR-0004 (Centralized Types Architecture) as part of
DSYS-483.

**What changed:**

- Created `ButtonBaseSize` const object (ADR-0003) and
`ButtonBasePropsShared` type (ADR-0004) in
`@metamask/design-system-shared`
- Created `ButtonVariant` const object (ADR-0003) and
`ButtonPropsShared` type (ADR-0004) in `@metamask/design-system-shared`
- Added shared `ButtonSize` alias for the public `Button` API, while
keeping `ButtonHeroSize` as a separate shared alias
- Removed old `ButtonBaseSize` and `ButtonVariant` enums from both
platform `src/types/index.ts` files
- Updated `ButtonBase`, `Button`, `ButtonHero`, and downstream consumers
in both React and React Native packages to import shared size and
variant ownership directly from `@metamask/design-system-shared`
- Replaced internal variant-specific size names (`ButtonPrimarySize`,
`ButtonSecondarySize`, `ButtonTertiarySize`) with `ButtonSize` so the
public API surface matches the actual component ownership
- Updated variant docs and code comments to clarify that
`ButtonPrimary`, `ButtonSecondary`, and `ButtonTertiary` are internal
Button variants and that consumers should use `Button` with `variant`
- Updated stories, tests, and related files that previously imported
these enums or aliases from platform type barrels or sibling components

**ADR compliance:**
- ADR-0003: `ButtonBaseSize` and `ButtonVariant` are now `as const`
objects with derived union types
- ADR-0004: `ButtonBasePropsShared`, `ButtonPropsShared`, `ButtonSize`,
and `ButtonHeroSize` are now owned in `@metamask/design-system-shared`

**Verification:**
- `yarn lint` ✅ (2 existing warnings in create-component scripts)
- `yarn test` ✅
- `yarn build` ✅

## **Related issues**

Fixes:
[DSYS-483](https://consensyssoftware.atlassian.net/browse/DSYS-483)

## **Manual testing steps**

1. Import `ButtonBaseSize`, `ButtonVariant`, and `ButtonSize` from
`@metamask/design-system-shared` and verify the values are correct
2. Import `Button`, `ButtonSize`, and `ButtonVariant` from
`@metamask/design-system-react` and verify the public API still works
3. Import `Button`, `ButtonSize`, and `ButtonVariant` from
`@metamask/design-system-react-native` and verify the public API still
works
4. Confirm the variant READMEs/comments direct consumers to `Button`
plus `variant` rather than treating
`ButtonPrimary`/`ButtonSecondary`/`ButtonTertiary` as public entry
points

## **Screenshots/Recordings**

### **After**

no visual changes


https://github.com/user-attachments/assets/183e5fe9-a309-4de6-8281-70ea0ead1be2


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<div><a
href="https://cursor.com/agents/bc-b2a86da3-4b2f-4406-8749-503c5375746c"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/automations/864f6729-e11f-445a-9607-65e9539d53c1"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/view-automation-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/view-automation-light.png"><img
alt="View Automation" width="141" height="28"
src="https://cursor.com/assets/images/view-automation-dark.png"></picture></a>&nbsp;</div>

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because it changes exported type sources and switches
`ButtonVariant`/sizes from platform enums to shared `as const` objects,
which can break downstream imports/typing if any consumers relied on the
old enums/aliases.
> 
> **Overview**
> Migrates `Button`, `ButtonBase`, and related consumers in both React
and React Native to import `ButtonVariant`,
`ButtonBaseSize`/`ButtonSize`, `ButtonHeroSize`, and shared prop types
from `@metamask/design-system-shared` (ADR-0003/ADR-0004), and removes
the old button size/variant enums from the platform `types` barrels.
> 
> Adds new shared definitions (`ButtonBaseSize`/`ButtonVariant` as `as
const` objects plus `ButtonBasePropsShared`/`ButtonPropsShared`) and
updates component props, stories/tests, and docs to use `ButtonSize`
(dropping
`ButtonPrimarySize`/`ButtonSecondarySize`/`ButtonTertiarySize`) and to
clarify the variant components are *internal* and consumers should use
`Button` with `variant`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
c804307. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
georgewrmarshall added a commit that referenced this pull request Apr 30, 2026
## Release 37.0.0

This release focuses on consumer-facing changelog cleanup for the
packages being published, plus migration-guide coverage for the React
Native `TextField` API changes included in this release.

### 📦 Package Versions

- `@metamask/design-system-shared`: **0.15.0**
- `@metamask/design-system-react`: **0.20.0**
- `@metamask/design-system-react-native`: **0.22.0**

### 🔄 Shared Type Updates (0.15.0)

#### Shared type additions
([#1034](#1034),
[#1038](#1038),
[#1081](#1081))

**What Changed:**

- Added shared `ButtonBaseSize`, `ButtonSize`, `ButtonHeroSize`,
`ButtonVariant`, `ButtonBasePropsShared`, and `ButtonPropsShared`
- Added shared `ButtonIconSize`, `ButtonIconVariant`, and
`ButtonIconPropsShared`
- Added shared `TextFieldPropsShared` for the controlled text-field
contract used across platforms

**Impact:**

- Continues ADR-0003 and ADR-0004 migration toward shared const-object
plus string-union exports
- Gives React and React Native one shared source of truth for these
component contracts

### 🌐 React Web Updates (0.20.0)

#### Changed

- **BREAKING:** Updated `Button`, `ButtonBase`, and `ButtonHero` size
and variant exports to use shared const-object + string-union types
rather than platform-local enum-based definitions
([#1034](#1034))
- No migration required for typical usage; continue importing from
`@metamask/design-system-react` as before
- **BREAKING:** Updated `ButtonIconSize` and `ButtonIconVariant` to use
shared const-object + string-union types rather than platform-local
enum-based definitions
([#1038](#1038))
- No migration required for typical usage; continue importing from
`@metamask/design-system-react` as before
- Updated Figma Code Connect to the live `MMDS Components` file and
aligned `ButtonIcon` and `TextButton` mappings with the current
component APIs shown in Dev Mode
([#1109](#1109))
- Expanded the `TextButton` migration guide for extension consumers
replacing `ButtonLink` and `ButtonVariant.Link` with the current
design-system APIs
([#1098](#1098))

### 📱 React Native Updates (0.22.0)

#### Changed

- **BREAKING:** Updated `Button`, `ButtonBase`, and `ButtonHero` size
and variant exports to use shared const-object + string-union types
rather than platform-local enum-based definitions
([#1034](#1034))
- No migration required for typical usage; continue importing from
`@metamask/design-system-react-native` as before
- **BREAKING:** Updated `ButtonIconSize` and `ButtonIconVariant` to use
shared const-object + string-union types rather than platform-local
enum-based definitions
([#1038](#1038))
- No migration required for typical usage; continue importing from
`@metamask/design-system-react-native` as before
- **BREAKING:** `TextField` and `TextFieldSearch` now use a root
`Box`/`View`, require native `TextInput` props under `inputProps`,
rename `isReadonly` to `isReadOnly`, and use `inputRef` for the inner
input ref
([#1081](#1081))
- Updated Figma Code Connect to the live `MMDS Components` file and
aligned `ButtonIcon` and `TextButton` mappings with the current
component APIs shown in Dev Mode
([#1109](#1109))

### ⚠️ Breaking Changes

#### Shared button size and variant exports (Both Platforms)

**What Changed:**

- `ButtonVariant`, `ButtonBaseSize`, `ButtonSize`, `ButtonHeroSize`,
`ButtonIconSize`, and `ButtonIconVariant` now come from shared
ADR-0003/ADR-0004 definitions instead of platform-local enums
- Runtime values and standard imports remain stable for typical usage

**Impact:**

- Affects TypeScript consumers that depended on enum-specific behavior
rather than the exported members themselves

#### React Native TextField prop layering (React Native)

**What Changed:**

- `TextField` and `TextFieldSearch` now treat the root as a `Box`/`View`
- Native `TextInput` props must move under `inputProps`
- `isReadonly` is renamed to `isReadOnly`
- `ref` now targets the outer container and `inputRef` targets the inner
`TextInput`

**Migration:**

```tsx
// Before (0.21.0)
<TextField
  value={query}
  onChangeText={setQuery}
  placeholder="Search"
  keyboardType="default"
  secureTextEntry
  onFocus={handleFocus}
/>

// After (0.22.0)
<TextField
  value={query}
  onChangeText={setQuery}
  placeholder="Search"
  onFocus={handleFocus}
  inputProps={{
    keyboardType: 'default',
    secureTextEntry: true,
  }}
/>
```

**Impact:**

- Affects React Native consumers passing `TextInput` props or
pressable-only props at the top level of `TextField` / `TextFieldSearch`

See migration guides for complete instructions:

- [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0210-to-0220)

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (`0.14.0` → `0.15.0`) - shared type
additions
- [x] design-system-react: minor (`0.19.0` → `0.20.0`) - includes
breaking changes under pre-1.0 semver
- [x] design-system-react-native: minor (`0.21.0` → `0.22.0`) - includes
breaking changes under pre-1.0 semver
- [x] Breaking changes documented with migration guidance where needed
- [x] Migration guides updated with before/after examples for the React
Native `TextField` changes
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've reviewed the [Release
Workflow](./.cursor/rules/release-workflow.md) cursor rule
- [ ] All tests pass (`yarn build && yarn test && yarn lint`)
- [x] Changelog validation passes (`yarn changelog:validate`)

## **Pre-merge reviewer checklist**

- [ ] I've reviewed the [Reviewing Release
PRs](./docs/reviewing-release-prs.md) guide
- [ ] Package versions follow semantic versioning
- [ ] Changelog entries are consumer-facing (not commit message
regurgitation)
- [ ] Breaking changes are documented in MIGRATION.md where migration
guidance is required
- [ ] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Release-only change: bumps package versions and updates
changelog/migration documentation without modifying runtime code. Low
risk aside from potential downstream confusion if documented breaking
changes don’t match what was actually published.
> 
> **Overview**
> Bumps the monorepo release to `37.0.0` and increments package versions
for `@metamask/design-system-shared` (`0.15.0`),
`@metamask/design-system-react` (`0.20.0`), and
`@metamask/design-system-react-native` (`0.22.0`).
> 
> Updates consumer-facing release notes: adds new changelog entries
(including documented *breaking* type-export contract changes and RN
`TextField` API migration details), refreshes the RN migration guide
section for `0.21.0` → `0.22.0`, and updates changelog compare links
accordingly.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
2140b12. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants