Skip to content

fix: Polish React BannerBase spacing for consistency - #1394

Merged
georgewrmarshall merged 3 commits into
mainfrom
polish/react-banner-spacing
Jul 21, 2026
Merged

fix: Polish React BannerBase spacing for consistency#1394
georgewrmarshall merged 3 commits into
mainfrom
polish/react-banner-spacing

Conversation

@amandaye0h

@amandaye0h amandaye0h commented Jul 21, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Polishes React BannerBase spacing so padding and content gaps match design more closely, aligning with the React Native updates in #1393.

Alignments

  • Top padding: paddingTop={3} (12px)
  • Bottom padding: paddingBottom={4} (16px) when an action button is below; otherwise paddingBottom={3} (12px)
  • Left padding: paddingLeft={4} (16px)
  • Right padding: paddingRight={2} (8px) when a close button is present; otherwise paddingRight={4} (16px)
  • Title → description gap: mt-0.5 (2px) when both title and description are present; no extra top margin for description-only
  • Action button (Below): mt-2 (8px) above the action button
  • Close button offset: -mt-1 on the close ButtonIcon

Impacted components

  • BannerAlert
  • Toast

Related issues

Related: #1393

Manual testing steps

  1. Run yarn storybook and open BannerBase / BannerAlert / Toast stories (they compose BannerBase).
  2. Confirm default padding: 12px top/bottom, 16px left/right when there is no close button and no below action button.
  3. With a close button: right padding is 8px; close button uses -mt-1.
  4. With an action button in Below layout: bottom padding is 16px; action button has mt-2 (8px) above it.
  5. With title + description: 2px gap between them; description-only has no extra top margin.

Screenshots/Recordings

Before

Screen.Recording.2026-07-21.at.5.43.23.PM.mov

After

Screen.Recording.2026-07-21.at.5.38.10.PM.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

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: Polish React BannerBase spacing for consistency
39685c3 
Co-authored-by: Cursor <cursoragent@cursor.com>
@amandaye0h
amandaye0h requested a review from a team as a code owner July 21, 2026 09:40
@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 @cursoragent
fix: Format BannerBase action button JSX for prettier
78be7b5 
Co-authored-by: Cursor <cursoragent@cursor.com>
@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 mentioned this pull request Jul 21, 2026
Merged
6 tasks
@georgewrmarshall
georgewrmarshall enabled auto-merge (squash) July 21, 2026 21:15
@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)

@georgewrmarshall
georgewrmarshall merged commit c7aca4a into main Jul 21, 2026
31 checks passed
@georgewrmarshall
georgewrmarshall deleted the polish/react-banner-spacing branch July 21, 2026 21:19
georgewrmarshall pushed a commit that referenced this pull request Jul 22, 2026
@amandaye0h @cursoragent
fix: Polish RN BannerBase spacing for consistency (#1393)
540cb51 
## **Description**

Polishes React Native `BannerBase` spacing so padding and
title/description gap match design more closely.

1. **Bottom padding:** When an action button is below content, use
`paddingBottom={4}` (16px); otherwise keep `3` (12px).
2. **Right padding:** When a close button is present, use
`paddingRight={2}` (8px); otherwise keep `4` (16px).
3. **Title → description gap:** When both are present, add `mt-0.5`
(2px) above the description.

### Impacted components

* `BannerAlert`
* `Toast`

## **Related issues**

Fixes:
#1304
#1391
#1394

## **Manual testing steps**

1. Run `yarn storybook:ios` (or Android) and open **BannerBase** /
**BannerAlert** / **Toast** stories (they compose `BannerBase`).
2. Confirm default padding: 12px vertical, 16px horizontal when there is
no close button and no below action button.
3. With a close button: right padding is 8px.
4. With an action button in `Below` layout: bottom padding is 16px.
5. With title + description: 2px gap between them; description-only has
no extra top margin.

## **Screenshots/Recordings**

### **Before**



https://github.com/user-attachments/assets/070f0754-9b52-45a7-b543-988e10ebbd6f



### **After**



https://github.com/user-attachments/assets/02764783-f984-4e4b-9f02-ba9e18206eca



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/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](https://jsdoc.app/) 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](https://cursor.com)

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
@brianacnguyen brianacnguyen mentioned this pull request Jul 23, 2026
Merged
18 tasks
georgewrmarshall pushed a commit that referenced this pull request Jul 23, 2026
@brianacnguyen @cursoragent
Release/56.0.0 (#1414)
891a9de 
<!--
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 56.0.0

This release ships React `IconAlert` + `HelpText` `showIcon`, React
Native `KeyValueSelect` / `HelpText` / sensitive-text `isHidden`
support, shared type additions for those APIs, BannerBase spacing polish
on both platforms, and RN Slider/Content fixes. It includes one React
Native breaking change: `KeyValueRow` now defaults to `px-4` horizontal
padding.

### 📦 Package Versions

- `@metamask/design-system-shared`: **0.31.0**
- `@metamask/design-system-react`: **0.34.0**
- `@metamask/design-system-react-native`: **0.38.0**

### 🔄 Shared Type Updates (0.31.0)

#### Component Type Additions (#1410, #1409)

**What Changed:**

- Added `KeyValueSelectPropsShared`,
`KeyValueSelectSelectButtonPropsShared`, and `KeyValueSelectVariant` for
cross-platform `KeyValueSelect` support (#1410)
- Added `showIcon` to `HelpTextPropsShared` (default `false`) for an
optional leading severity icon on `HelpText` (#1409)

**Impact:**

- Enables React Native `KeyValueSelect` and cross-platform `HelpText`
`showIcon` without divergent prop shapes
- Continues ADR-0003/0004 const-object + string-union pattern adoption

### 🌐 React Web Updates (0.34.0)

#### Added

- Added `IconAlert` for severity-mapped icon glyphs aligned with the
React Native primitive (#1409)
- Added `showIcon` to `HelpText` (default `false`) to render a leading
`IconAlert` when `severity` is set (#1409)

#### Changed

- Updated `BannerBase` spacing (padding, title/description gap, action
button margin, and close button offset) to match Figma; inherited by
`BannerAlert` and `Toast` (#1394)

### 📱 React Native Updates (0.38.0)

#### Added

- Added `KeyValueSelect` for pressable key/value rows with a
non-interactive `SelectButton` value (opens a picker or bottom sheet via
`onPress`) (#1410)
- Added `HelpText` for field-level helper and validation copy with
optional `HelpTextSeverity` coloring (#1405)
- Added `showIcon` to `HelpText` (default `false`) to render a leading
`IconAlert` when `severity` is set (#1409)
- Added `isHidden` / `length` support on string slots for `Content`,
`ListItem`, `TitleHub`, and `KeyValueRow` via `SensitiveText` (e.g.
`valueProps`, `amountProps`, `valueTextProps`) (#1406)

#### Changed

- **BREAKING:** `KeyValueRow` now defaults to `px-4` (16px) horizontal
padding so rows align with other full-width list surfaces without a
parent padding wrapper (#1410)
- Call sites that already wrap rows in `px-4` / `paddingHorizontal={4}`
will double-pad unless that wrapper padding is removed
  - Flush rows can override with `twClassName="px-0"`
- Migration: [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0370-to-0380)
- Updated `BannerBase` spacing (conditional bottom/right padding and
title/description gap) to match Figma; inherited by `BannerAlert` and
`Toast` (#1393)

#### Fixed

- Fixed `Slider` thumb rewind on rapid taps and fast pans (#1397)
- Fixed `Content` description stretching the end accessory when the
description wraps (#1404)

### ⚠️ Breaking Changes

#### `KeyValueRow` default horizontal padding (React Native Only)

**What Changed:**

- `KeyValueRow` previously had no default horizontal padding (parents
often supplied `px-4`)
- `KeyValueRow` now defaults to `px-4` (16px) on the outer row

**Migration:**

```tsx
// Before (0.37.0) — parent owned the horizontal inset
import { Box, KeyValueRow } from '@metamask/design-system-react-native';

<Box twClassName="px-4">
  <KeyValueRow keyLabel="Network" value="Ethereum Mainnet" />
</Box>;

// After (0.38.0) — KeyValueRow owns the inset
import { KeyValueRow } from '@metamask/design-system-react-native';

<KeyValueRow keyLabel="Network" value="Ethereum Mainnet" />;

// If you still need flush/edge content, override the default
<KeyValueRow keyLabel="Network" value="Ethereum Mainnet" twClassName="px-0" />;
```

**Impact:**

- Call sites that already wrap `KeyValueRow` in a `px-4` /
`paddingHorizontal={4}` container will get double horizontal padding
unless that wrapper padding is removed
- Call sites that intentionally used flush rows should set
`twClassName="px-0"` after upgrading

See migration guide for complete instructions:

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

### ✅ 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.30.0 → 0.31.0) - additive shared
types (`KeyValueSelect*`, `HelpText` `showIcon`)
- [x] design-system-react: minor (0.33.0 → 0.34.0) - new `IconAlert` +
`HelpText` `showIcon`; BannerBase spacing polish
- [x] design-system-react-native: minor (0.37.0 → 0.38.0) - new
components/APIs + breaking `KeyValueRow` default padding (pre-1.0 minor
may include breaking changes)
- [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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Mostly additive releases, but React Native consumers must migrate
around the breaking `KeyValueRow` default padding and updated
`BannerBase`/`Toast` layout.
> 
> **Overview**
> **Release 56.0.0** cuts published versions and finalizes changelogs
for `@metamask/design-system-shared` **0.31.0**,
`@metamask/design-system-react` **0.34.0**, and
`@metamask/design-system-react-native` **0.38.0** (root monorepo
**56.0.0**).
> 
> Shared **0.31.0** adds cross-platform types for `KeyValueSelect` and
`showIcon` on `HelpText`. React **0.34.0** adds web `IconAlert`,
optional severity icons on `HelpText`, and Figma-aligned `BannerBase`
spacing (affects `BannerAlert` / `Toast`). React Native **0.38.0** adds
`KeyValueSelect`, `HelpText`, `HelpText` `showIcon`, and `SensitiveText`
masking props on several list/title components; polishes `BannerBase`;
fixes `Slider` thumb behavior and `Content` end-accessory layout.
> 
> **Breaking (RN only):** `KeyValueRow` now defaults to `px-4`—remove
duplicate parent horizontal padding or use `twClassName="px-0"` for
flush rows (see RN `MIGRATION.md`).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
38854b0. 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 <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