Skip to content

fix: Merge Toast descriptionProps defaults in JSX - #1396

Merged
amandaye0h merged 2 commits into
mainfrom
toast/description-props
Jul 21, 2026
Merged

fix: Merge Toast descriptionProps defaults in JSX#1396
amandaye0h merged 2 commits into
mainfrom
toast/description-props

Conversation

@amandaye0h

@amandaye0h amandaye0h commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Description

Follow-up to #1391 (Toast polish: background, description color, border radius).

What issues does this PR address?

  • descriptionProps defaults replace instead of merge: In #1391, Toast defaulted descriptionProps in the destructure (descriptionProps = { color: TextColor.TextAlternative }). Passing any consumer object (e.g. { numberOfLines: 2 } or { testID: '...' }) replaced the whole default, so TextAlternative was silently dropped.

Key improvements

  • Merge the default description color inline in JSX: descriptionProps={{ color: TextColor.TextAlternative, ...descriptionProps }}, matching the team convention for props objects.
  • Add a regression test that passes partial descriptionProps and asserts the default color is still applied.

Notes for reviewers

  • Addresses George’s post-merge follow-up on #1391: merge descriptionProps in JSX instead of defaulting in the destructure.

Related issues

Follow-up to: #1391

Manual testing steps

  1. Open React Native Storybook (yarn storybook:ios or yarn storybook:android) and navigate to Toast stories.
  2. Confirm description text still uses the alternative text color by default.
  3. Optionally verify a toast with descriptionProps={{ testID: '...' }} (or numberOfLines) keeps the alternative color.

Screenshots/Recordings

Before

N/A — behavior fix; visual default is unchanged when descriptionProps is omitted

After

N/A — behavior fix; visual default is unchanged when descriptionProps is omitted

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

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.

Made with Cursor

@amandaye0h @cursoragent
fix: merge Toast descriptionProps defaults in JSX
865890a 
Co-authored-by: Cursor <cursoragent@cursor.com>
@amandaye0h
amandaye0h requested a review from a team as a code owner July 21, 2026 16:02
@github-actions

github-actions Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🌳 Main Branch (Latest)

@amandaye0h amandaye0h changed the title fix: merge Toast descriptionProps defaults in JSX fix: Merge Toast descriptionProps defaults in JSX Jul 21, 2026
@amandaye0h
amandaye0h enabled auto-merge (squash) July 21, 2026 16:43
@github-actions

github-actions Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

🌳 Main Branch (Latest)

@amandaye0h
amandaye0h merged commit ca1d550 into main Jul 21, 2026
31 checks passed
@amandaye0h
amandaye0h deleted the toast/description-props branch July 21, 2026 16:47
@amandaye0h amandaye0h mentioned this pull request Jul 21, 2026
Merged
16 tasks
georgewrmarshall pushed a commit that referenced this pull request Jul 22, 2026
@amandaye0h @cursoragent
Release/55.0.0 (#1398)
3950fe3 
<!--
Release PR Template

Use this template for release PRs by creating your PR with:

https://github.com/MetaMask/metamask-design-system/compare/main...release/VERSION?template=release.md

Or use the default PR template and manually copy this structure.
-->

## Release 55.0.0

React Native Toast moves to iOS-style top placement with spring motion,
related offset/padding renames, and surface polish (theme background,
description color, border radius).

### 📦 Package Versions

- `@metamask/design-system-react-native`: **0.37.0**

### 📱 React Native Updates (0.37.0)

#### Changed

- **BREAKING:** Updated `Toast` / `Toaster` to slide in from the top of
the screen (below the safe area) with spring-based enter/exit motion
([#1304](#1304))
  - Renamed `bottomOffset` and `customTopOffset` to `topOffset`
- Renamed exported `TOAST_BOTTOM_PADDING` to `TOAST_TOP_PADDING`
(default padding 36 → 8)
- Migration: [Toast topOffset
renames](./packages/design-system-react-native/MIGRATION.md#toast-bottomoffset-to-topoffset)
- Updated `Toast` surface styling for light/dark themes: light uses
`background.default` with medium shadow; dark uses `background.section`
with no shadow; border radius 12px → 16px; description defaults to
`TextColor.TextAlternative`
([#1391](#1391))

#### Fixed

- Fixed `Toast` `descriptionProps` so partial consumer props merge with
the default `TextAlternative` color instead of replacing it
([#1396](#1396))

### ⚠️ Breaking Changes

#### Toast top placement and offset renames (React Native Only)

**What Changed:**

- Toasts now appear from the **top** of the screen (below the safe area)
instead of the bottom
- `bottomOffset` / `customTopOffset` → `topOffset`
- `TOAST_BOTTOM_PADDING` → `TOAST_TOP_PADDING` (default 36 → 8)

**Migration:**

```tsx
// Before (0.36.0)
import {
  TOAST_BOTTOM_PADDING,
  toast,
} from '@metamask/design-system-react-native';

toast({
  hasNoTimeout: false,
  title: 'Saved',
  bottomOffset: 24,
});

const padding = TOAST_BOTTOM_PADDING;

// After (0.37.0)
import { TOAST_TOP_PADDING, toast } from '@metamask/design-system-react-native';

toast({
  hasNoTimeout: false,
  title: 'Saved',
  topOffset: 24,
});

const padding = TOAST_TOP_PADDING;
```

**Impact:**

- Call sites using `bottomOffset`, `customTopOffset`, or
`TOAST_BOTTOM_PADDING` must rename and re-evaluate numeric offsets tuned
for bottom placement

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

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
- [x] design-system-react-native: minor (0.36.0 → 0.37.0) - Toast top
placement feature + breaking offset/padding renames
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
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
- [x] 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 with examples
- [ ] All unreleased changes are accounted for in changelogs

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@georgewrmarshall georgewrmarshall georgewrmarshall approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@amandaye0h @georgewrmarshall