Skip to content

chore: Forward refs for React Native Box#1102

Merged
georgewrmarshall merged 4 commits into
mainfrom
codex/forward-box-ref-native
Apr 23, 2026
Merged

chore: Forward refs for React Native Box#1102
georgewrmarshall merged 4 commits into
mainfrom
codex/forward-box-ref-native

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Apr 21, 2026

Copy link
Copy Markdown
Contributor

Description

Forward refs through the React Native Box component so consumers can access the underlying View instance when needed. This also adds a single test that asserts the forwarded ref resolves to the rendered native view.

Related issues

Fixes:

Manual testing steps

  1. Run yarn workspace @metamask/design-system-react-native jest --config jest.config.js Box.test.tsx --runInBand --coverage=false
  2. Confirm PASS design-system-react-native src/components/Box/Box.test.tsx
  3. Confirm the new test asserts that Box forwards its ref to the underlying View

Screenshots/Recordings

Not applicable.

Before

Not applicable.

After

Not applicable.

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.

Note

Low Risk
Low risk: change is limited to adding forwardRef support on Box and a corresponding unit test; main risk is minor API/typing fallout for consumers relying on the previous non-ref component type.

Overview
Adds ref forwarding support to React Native Box. Box is converted to React.forwardRef and now passes the received ref to the underlying View (with Box.displayName set).

Tests are updated with a new case asserting that a ref passed to Box resolves to the rendered native View instance.

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

@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall changed the title [codex] Forward refs for React Native Box chore: Forward refs for React Native Box Apr 21, 2026
...props
}: BoxProps) => {
const tw = useTailwind();
export const Box = forwardRef<View, BoxProps>(

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Forwarding the ref at the primitive layer keeps Box consistent with the other React Native building blocks and lets consumers reach the native View without introducing a separate imperative surface.

expect(styles[0]).toStrictEqual(tw.style('flex'));
});

it('forwards ref to the underlying View', () => {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The test asserts the public ref contract instead of style or tree internals, so future refactors can change implementation details as long as Box still exposes the rendered View.

@georgewrmarshall georgewrmarshall marked this pull request as ready for review April 21, 2026 23:19
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner April 21, 2026 23:19
@georgewrmarshall georgewrmarshall self-assigned this Apr 21, 2026
@georgewrmarshall georgewrmarshall enabled auto-merge (squash) April 21, 2026 23:50
@georgewrmarshall georgewrmarshall force-pushed the codex/forward-box-ref-native branch from db2dc59 to 0006fb7 Compare April 22, 2026 21:26
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@cursor cursor Bot left a comment

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.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Missing displayName after forwardRef wrapping
    • Added Box.displayName = 'Box' after the forwardRef to restore component name in DevTools.

Create PR

Or push these changes by commenting:

@cursor push 721f9fcb70
Preview (721f9fcb70)
diff --git a/packages/design-system-react-native/src/components/Box/Box.tsx b/packages/design-system-react-native/src/components/Box/Box.tsx
--- a/packages/design-system-react-native/src/components/Box/Box.tsx
+++ b/packages/design-system-react-native/src/components/Box/Box.tsx
@@ -105,3 +105,5 @@
     );
   },
 );
+
+Box.displayName = 'Box';

You can send follow-ups to the cloud agent here.

Reviewed by Cursor Bugbot for commit 0006fb7. Configure here.

Comment thread packages/design-system-react-native/src/components/Box/Box.tsx
brianacnguyen
brianacnguyen previously approved these changes Apr 22, 2026
@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 23, 2026 19:59
@github-actions

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall merged commit f7dd89a into main Apr 23, 2026
44 checks passed
@georgewrmarshall georgewrmarshall deleted the codex/forward-box-ref-native branch April 23, 2026 20:17
@georgewrmarshall georgewrmarshall mentioned this pull request Apr 23, 2026
georgewrmarshall added a commit that referenced this pull request Apr 23, 2026
## 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 -->
georgewrmarshall added a commit that referenced this pull request Apr 27, 2026
## **Description**

Forward refs through the React Native `Box` component so consumers can
access the underlying `View` instance when needed. This also adds a
single test that asserts the forwarded ref resolves to the rendered
native view.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Run `yarn workspace @metamask/design-system-react-native jest
--config jest.config.js Box.test.tsx --runInBand --coverage=false`
2. Confirm `PASS design-system-react-native
src/components/Box/Box.test.tsx`
3. Confirm the new test asserts that `Box` forwards its ref to the
underlying `View`

## **Screenshots/Recordings**

Not applicable.

### **Before**

Not applicable.

### **After**

Not applicable.

## **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
- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: small, isolated change to `Box` to forward a React ref to
the underlying `View`, with a new unit test to validate behavior.
> 
> **Overview**
> Updates the React Native `Box` component to **forward refs** via
`React.forwardRef`, allowing consumers to access the underlying `View`
instance.
> 
> Adds a focused test asserting that a ref passed to `Box` resolves to a
rendered `View`, and sets `Box.displayName` for clearer debugging.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
4079a04. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
georgewrmarshall added a commit that referenced this pull request Apr 27, 2026
## 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 -->
georgewrmarshall added a commit that referenced this pull request Apr 28, 2026
## 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 -->
cursor Bot pushed a commit that referenced this pull request Apr 28, 2026
## **Description**

Forward refs through the React Native `Box` component so consumers can
access the underlying `View` instance when needed. This also adds a
single test that asserts the forwarded ref resolves to the rendered
native view.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Run `yarn workspace @metamask/design-system-react-native jest
--config jest.config.js Box.test.tsx --runInBand --coverage=false`
2. Confirm `PASS design-system-react-native
src/components/Box/Box.test.tsx`
3. Confirm the new test asserts that `Box` forwards its ref to the
underlying `View`

## **Screenshots/Recordings**

Not applicable.

### **Before**

Not applicable.

### **After**

Not applicable.

## **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
- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: small, isolated change to `Box` to forward a React ref to
the underlying `View`, with a new unit test to validate behavior.
> 
> **Overview**
> Updates the React Native `Box` component to **forward refs** via
`React.forwardRef`, allowing consumers to access the underlying `View`
instance.
> 
> Adds a focused test asserting that a ref passed to `Box` resolves to a
rendered `View`, and sets `Box.displayName` for clearer debugging.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
4079a04. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
cursor Bot pushed a commit that referenced this pull request Apr 28, 2026
## 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 -->
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.

2 participants