Skip to content

chore: Align severity API: Error→Danger, Default→Neutral across components#1159

Merged
georgewrmarshall merged 5 commits into
mainfrom
cursor/align-severity-api-eab4
Jun 8, 2026
Merged

chore: Align severity API: Error→Danger, Default→Neutral across components#1159
georgewrmarshall merged 5 commits into
mainfrom
cursor/align-severity-api-eab4

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented May 6, 2026

Copy link
Copy Markdown
Contributor

Description

BREAKING Standardizes severity vocabularies across the design system to use Danger instead of Error and Neutral instead of Default where applicable. This aligns component APIs per the design decision to avoid the TypeScript naming pitfall with Error and to use a severity-oriented neutral state.

Changes include:

  • Shared types: IconAlertSeverity, AvatarIconSeverity, TagSeverity now expose Danger ("danger") instead of Error ("error").
  • React & React Native components updated to consume the new severities:
    • AvatarIcon (web + RN): constants, stories, Figma connectors, and docs updated to Danger.
    • IconAlert (RN): mapping updated and docs changed to Danger.
    • Tag (RN): shared type, constants, stories, Figma, and docs updated to Danger.
  • MIGRATION docs updated to call out the severity alignment and the canonical use of Neutral over any legacy default-like state.
  • CI: Opted JS actions into Node 24 by setting FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true across workflows to resolve the deprecation failure.

No design tokens were renamed (e.g., ErrorDefault remains as internal token naming); component Danger maps to the existing Error-colored tokens.

Related issues

Fixes: Align severity component APIs per internal discussion.

Manual testing steps

  1. Storybook (web): run yarn storybook and verify AvatarIcon severity controls include Danger and render correctly.
  2. Storybook (RN): run yarn storybook:ios|android and verify AvatarIcon, IconAlert, and Tag display Danger variants and Neutral defaults.
  3. Search for usages of *.Error in component APIs to confirm no remaining references outside design tokens.

Screenshots/Recordings

N/A

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 (existing tests updated where necessary)
  • I’ve documented changes in component READMEs and MIGRATION docs

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 and includes necessary testing evidence.

Slack Thread

Open in Web Open in Cursor 

@github-actions

github-actions Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

github-actions Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@github-actions

github-actions Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall changed the title Align severity API: Error→Danger, Default→Neutral across components chore: Align severity API: Error→Danger, Default→Neutral across components Jun 8, 2026
@georgewrmarshall georgewrmarshall force-pushed the cursor/align-severity-api-eab4 branch from 510d7be to ac38c4f Compare June 8, 2026 17:15
@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

Neutral: 'neutral',
Success: 'success',
Error: 'error',
Danger: 'danger',

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.

This is the public breaking API point for Tag consumers; downstream libraries should migrate from Error to Danger while retaining the same destructive visual treatment.

[TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,
[TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,
[TagSeverity.Error]: BoxBackgroundColor.ErrorMuted,
[TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,

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 public severity name changes here, but the token mapping intentionally stays on the existing error-colored tokens so the rendered danger variant remains visually unchanged.

[ToastSeverity.Success]: IconAlertSeverity.Success,
[ToastSeverity.Warning]: IconAlertSeverity.Warning,
[ToastSeverity.Danger]: IconAlertSeverity.Error,
[ToastSeverity.Danger]: IconAlertSeverity.Danger,

@georgewrmarshall georgewrmarshall Jun 8, 2026

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.

Toast continues to compose through IconAlertSeverity, so aligning this map prevents ToastSeverity.Danger from depending on a removed IconAlertSeverity.Error member.

ImageImage


##### Severity Alignment

The public severity APIs now use `Danger` instead of `Error` for destructive

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.

This note separates the public API rename from internal token naming, which is important because the color tokens intentionally keep their existing Error names.


- `TagSeverity.Neutral`
- `TagSeverity.Success`
- `TagSeverity.Danger`

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 docs list the full supported enum surface here so consumers see Danger as the canonical value instead of relying only on Storybook controls.

@github-actions

github-actions Bot commented Jun 8, 2026

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: Tag README mismatches Default story
    • Updated Tag README intro example to use Neutral severity and children 'Tag' to match Default story.

Create PR

Or push these changes by commenting:

@cursor push a412ccffff
Preview (a412ccffff)
diff --git a/packages/design-system-react/src/components/Tag/README.mdx b/packages/design-system-react/src/components/Tag/README.mdx
--- a/packages/design-system-react/src/components/Tag/README.mdx
+++ b/packages/design-system-react/src/components/Tag/README.mdx
@@ -12,7 +12,7 @@
 import { Tag } from '@metamask/design-system-react';
 import { TagSeverity } from '@metamask/design-system-shared';
 
-<Tag severity={TagSeverity.Danger}>Danger</Tag>;
+<Tag severity={TagSeverity.Neutral}>Tag</Tag>;
```

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

Reviewed by Cursor Bugbot for commit 589021d. Configure here.

Comment thread packages/design-system-react/src/components/Tag/README.mdx Outdated
@georgewrmarshall georgewrmarshall marked this pull request as ready for review June 8, 2026 17:22
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner June 8, 2026 17:22
@georgewrmarshall

Copy link
Copy Markdown
Contributor Author

@cursor push a412ccf

@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall enabled auto-merge (squash) June 8, 2026 17:50
[AvatarIconSeverity.Info]: IconColor.InfoDefault,
[AvatarIconSeverity.Success]: IconColor.SuccessDefault,
[AvatarIconSeverity.Error]: IconColor.ErrorDefault,
[AvatarIconSeverity.Danger]: IconColor.ErrorDefault,

@georgewrmarshall georgewrmarshall Jun 8, 2026

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.

Before / After

Screenshot 2026-06-08 at 11 18 39 AMImage

@@ -20,7 +20,7 @@ export const ICON_ALERT_SEVERITY_MAP: Record<
name: IconName.Danger,

@georgewrmarshall georgewrmarshall Jun 8, 2026

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.

Before / After

Screenshot 2026-06-08 at 11 19 32 AM Image

@@ -11,23 +11,23 @@ export const MAP_TAG_SEVERITY_BACKGROUND: Record<
> = {

@georgewrmarshall georgewrmarshall Jun 8, 2026

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.

Before / After

Screenshot 2026-06-08 at 11 20 07 AMImage

[AvatarIconSeverity.Success]: IconColor.SuccessDefault,
[AvatarIconSeverity.Error]: IconColor.ErrorDefault,
[AvatarIconSeverity.Danger]: IconColor.ErrorDefault,
[AvatarIconSeverity.Warning]: IconColor.WarningDefault,

@georgewrmarshall georgewrmarshall Jun 8, 2026

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.

Before

Screenshot 2026-06-08 at 11 20 55 AM

After

Image

@@ -10,8 +10,9 @@ A tag is a compact label used to categorize, annotate, or highlight metadata.

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.

After

Image

@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

📖 Storybook Preview

@georgewrmarshall georgewrmarshall merged commit 0a79ef5 into main Jun 8, 2026
36 checks passed
@georgewrmarshall georgewrmarshall deleted the cursor/align-severity-api-eab4 branch June 8, 2026 22:04
@georgewrmarshall georgewrmarshall mentioned this pull request Jun 9, 2026
18 tasks
georgewrmarshall added a commit that referenced this pull request Jun 9, 2026
## Release 44.0.0

This release adds `Toast`/`Toaster` and `Tag` to React, `ListItem` to
React Native, aligns the `TextButton` API across platforms, and
standardizes severity vocabulary (`Error` → `Danger`) across
`AvatarIcon`, `IconAlert`, and `Tag`.

### 📦 Package Versions

- `@metamask/design-system-shared`: **0.22.0**
- `@metamask/design-system-react`: **0.26.0**
- `@metamask/design-system-react-native`: **0.29.0**

### 🔄 Shared Type Updates (0.22.0)

#### New shared types (#1190, #1203, #1224, #1225)

**What Changed:**

- Added `ToastPropsShared` and `ToastSeverity` for cross-platform
`Toast` support
- Added `ListItemPropsShared` and related types for cross-platform
`ListItem` support
- Added `TextButtonPropsShared` to align `TextButton` API across React
and React Native
- Added `AvatarNetworkSize` as a named export from the shared package

**Impact:**

- Enables consistent `Toast` and `ListItem` implementations across both
platforms
- Continues ADR-0003/0004 const-object + string-union pattern adoption

#### Severity vocabulary: `.Error` → `.Danger`
([#1159](#1159))

**What Changed:**

- `AvatarIconSeverity.Error` → `AvatarIconSeverity.Danger`
- `IconAlertSeverity.Error` → `IconAlertSeverity.Danger`
- `TagSeverity.Error` → `TagSeverity.Danger`

**Impact:**

- Breaking change for any consumer using `.Error` on these three const
objects. Rendered colors are unchanged.

### 🌐 React Web Updates (0.26.0)

#### Added

- Added `Tag` component for categorization and filtering labels
([#1211](#1211))
- Added `Toast` component with `Toaster` provider and imperative
`toast()` API
([#1190](#1190))

#### Changed

- **BREAKING:** `TextButton` API aligned with React Native —
`size`/`TextButtonSize` replaced by `variant`/`TextVariant`;
`isInverse`, `isDisabled`, `textProps`, and icon/accessory props
removed; `asChild` added
([#1224](#1224))
- **BREAKING:** `AvatarIconSeverity.Error` → `AvatarIconSeverity.Danger`
([#1159](#1159))

#### Fixed

- Fixed `Toast` to support `toast()` calls made before `Toaster` mounts
([#1217](#1217))

### 📱 React Native Updates (0.29.0)

#### Added

- Added `ListItem` component for list row layouts
([#1203](#1203))
- Added `Toast` component with `Toaster` provider and imperative
`toast()` API
([#1190](#1190))

#### Changed

- **BREAKING:** `AvatarIconSeverity.Error`, `IconAlertSeverity.Error`,
and `TagSeverity.Error` → `.Danger`
([#1159](#1159))

### ⚠️ Breaking Changes

#### TextButton rewrite (React Web Only)

**What Changed:**

- `size` / `TextButtonSize` removed — use `variant` / `TextVariant`
instead
- `isInverse`, `isDisabled`, `textProps`, start/end icons, and accessory
slots removed
- `asChild` added for semantic link composition

**Migration:**

```tsx
// Before (0.25.0)
import { TextButton, TextButtonSize } from '@metamask/design-system-react';
<TextButton size={TextButtonSize.BodySm}>Learn more</TextButton>

// After (0.26.0)
import { TextButton } from '@metamask/design-system-react';
import { TextVariant } from '@metamask/design-system-shared';
<TextButton variant={TextVariant.BodySm}>Learn more</TextButton>
```

See [React Migration
Guide](./packages/design-system-react/MIGRATION.md#from-version-0250-to-0260)

#### Severity vocabulary: `.Error` → `.Danger` (Both Platforms)

**What Changed:**

- `AvatarIconSeverity.Error` → `AvatarIconSeverity.Danger` (React +
React Native)
- `IconAlertSeverity.Error` → `IconAlertSeverity.Danger` (React Native)
- `TagSeverity.Error` → `TagSeverity.Danger` (React Native)

**Migration:**

```tsx
// Before
<AvatarIcon severity={AvatarIconSeverity.Error} />
<IconAlert severity={IconAlertSeverity.Error} />
<Tag severity={TagSeverity.Error}>High risk</Tag>

// After
<AvatarIcon severity={AvatarIconSeverity.Danger} />
<IconAlert severity={IconAlertSeverity.Danger} />
<Tag severity={TagSeverity.Danger}>High risk</Tag>
```

See migration guides for complete instructions:

- [React Migration
Guide](./packages/design-system-react/MIGRATION.md#from-version-0250-to-0260)
- [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0280-to-0290)

### ✅ 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.21.0 → 0.22.0) - new shared types +
breaking severity rename
- [x] design-system-react: minor (0.25.0 → 0.26.0) - new components +
breaking API changes
- [x] design-system-react-native: minor (0.28.0 → 0.29.0) - new
components + breaking severity rename
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples
- [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 with examples
- [ ] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> The release documents multiple breaking consumer APIs (TextButton on
web, severity `.Error`→`.Danger`); upgrading without following
MIGRATION.md will cause compile/runtime mismatches, though this PR does
not change component implementation itself.
> 
> **Overview**
> **Release 44.0.0** cuts new versions of the design-system packages and
records what shipped since the last release: monorepo root **43.0.0 →
44.0.0**, `@metamask/design-system-shared` **0.22.0**,
`@metamask/design-system-react` **0.26.0**, and
`@metamask/design-system-react-native` **0.29.0**.
> 
> Changelogs document **React** additions (`Tag`,
`Toast`/`Toaster`/`toast()`), a **breaking** `TextButton` rewrite
(`size`/`TextButtonSize` → `variant`/`TextVariant`, dropped
inverse/disabled/icons, added `asChild`), and
**`AvatarIconSeverity.Error` → `.Danger`**. **React Native** adds
**`ListItem`** and the same **severity rename** on `AvatarIcon`,
`IconAlert`, and `Tag`. **Shared** adds cross-platform types
(`ListItem`, `Toast`, `TextButton`, `AvatarNetworkSize`) and the shared
**`.Error` → `.Danger`** severity vocabulary.
> 
> **MIGRATION.md** on React and React Native gains **0.25→0.26** and
**0.28→0.29** sections with before/after examples. The only non-release
code change in the diff is reordering the `react-native-worklets`
devDependency in `apps/storybook-react-native/package.json`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9c3345f. 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