feat: migrate MainActionButton to design-system-react-native by georgewrmarshall · Pull Request #952 · MetaMask/metamask-design-system

georgewrmarshall · 2026-03-03T21:00:28Z

Description

migrate MainActionButton from MetaMask Mobile component-library temp components into @metamask/design-system-react-native
add component source, types, constants, styles, stories, tests, and README under packages/design-system-react-native/src/components/MainActionButton
export MainActionButton from RN components barrel

Related issue

https://consensyssoftware.atlassian.net/browse/DSYS-296

Screenshots

Mobile

mobile.main.action.button.mov

MMDS

mainactionbutton.mov

Notes

migration followed the component migration rule from PR docs: add component-migration.md cursor rule #946 and existing component creation/documentation/styling rules in this repo

Note

Low Risk
Low risk: primarily adds a new UI component with isolated exports plus Storybook wiring and tests; minimal impact on existing runtime behavior aside from the new barrel export.

Overview
Adds a new MainActionButton component to design-system-react-native, including its implementation, typed props, README docs, Storybook stories, and a test suite covering disabled/press handling, prop forwarding, and style merging.

Wires the component into the library and RN Storybook by exporting it from the components barrel and registering the new story; also makes a small cleanup to TabEmptyState story’s onAction handler comment.

^{Written by Cursor Bugbot for commit e67d853. This will update automatically on new commits. Configure here.}

github-actions · 2026-03-04T05:00:20Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-04T16:59:35Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-05T00:17:59Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall

Left some comments

georgewrmarshall · 2026-03-05T17:25:29Z

+export const ActionButtonOnPress: Story = {
+  args: {
+    iconName: IconName.Add,
+    label: 'Tap me',
+    isDisabled: false,
+  },
+};


Let's remove this story

georgewrmarshall · 2026-03-05T17:26:10Z

+export const TWCLASS_MAINACTIONBUTTON_BASE =
+  'items-center justify-center rounded-xl px-1 py-4 min-w-[68px]';
+
+export const TWCLASS_MAINACTIONBUTTON_CONTAINER =
+  'items-center justify-center w-full';
+
+export const TWCLASS_MAINACTIONBUTTON_LABEL =
+  'mt-0.5 w-full text-center shrink';


These can all be applied directly in the component file

github-actions · 2026-03-05T18:45:38Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-05T19:05:51Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-03-05T19:10:29Z

+    onPress: {
+      action: 'pressed',
+      description: 'Callback fired when the action button is pressed.',
+    },


Intentionally not adding twClassName here as it causes errors in storybook

github-actions · 2026-03-05T19:10:40Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-05T19:35:52Z

📖 Storybook Preview

View PR Storybook

cursor

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

Autofix Details

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

✅ Fixed: labelProps type allows props silently overridden at runtime
- Added 'numberOfLines' and 'ellipsizeMode' to the labelProps Omit type to align types with hardcoded Text props.

Or push these changes by commenting:

@cursor push 7f0a0c1dfe

Preview (7f0a0c1dfe)

diff --git a/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.types.ts b/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.types.ts
--- a/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.types.ts
+++ b/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.types.ts
@@ -31,7 +31,13 @@
    */
   labelProps?: Omit<
     Partial<TextProps>,
-    'children' | 'variant' | 'fontWeight' | 'color' | 'twClassName'
+    | 'children'
+    | 'variant'
+    | 'fontWeight'
+    | 'color'
+    | 'twClassName'
+    | 'numberOfLines'
+    | 'ellipsizeMode'
   >;
   /**
    * Disables the button interaction and applies disabled styling.

georgewrmarshall · 2026-03-05T22:10:14Z

+      disabled={isDisabled}
+      accessible
+      onPress={!isDisabled ? onPress : undefined}
+      onPressIn={!isDisabled ? onPressIn : undefined}


Disabled state explicitly removes onPressIn and onPressOut alongside onPress so integrations do not run side effects while the button is non-interactive.

georgewrmarshall · 2026-03-05T22:10:32Z

+        ) as StyleProp<ViewStyle>;
+
+        const additionalStyle =
+          typeof style === 'function' ? style({ pressed }) : style;


The style callback runs for both pressed and idle states and merges after base tokens so consumers can layer interaction overrides without replacing layout defaults.

georgewrmarshall · 2026-03-05T22:10:37Z

+   * Optional props forwarded to the internal Text component.
+   * Useful for test IDs and accessibility metadata.
+   */
+  labelProps?: Omit<


iconProps and labelProps intentionally omit controlled visual props so size, color, and typography stay consistent while still allowing test IDs and accessibility metadata.

georgewrmarshall · 2026-03-05T22:10:42Z

+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call press handlers when disabled', () => {


This disabled interaction test exercises press, pressIn, and pressOut together because guarding all three handlers prevents downstream side effects in analytics and navigation hooks.

github-actions · 2026-03-06T00:54:40Z

📖 Storybook Preview

View PR Storybook

… tests

github-actions · 2026-03-06T01:10:24Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-03-06T01:11:31Z

      description="No results found"
      actionButtonText="Try Again"
      onAction={() => {
-        // eslint-disable-next-line no-console


Fixes eslint warning for unused eslint disablle comment

github-actions · 2026-03-06T01:13:38Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-06T02:01:15Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-06T02:02:43Z

📖 Storybook Preview

View PR Storybook

cursor

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

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

✅ Fixed: Story export IconName shadows imported enum IconName
- Renamed the story export from IconName to IconStory and set name: 'IconName' so references in renders now resolve to the imported enum without changing the story's displayed name.

Or push these changes by commenting:

@cursor push a0de1bc250

Preview (a0de1bc250)

diff --git a/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx b/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx
--- a/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx
+++ b/packages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx
@@ -89,7 +89,8 @@
   },
 };
 
-export const IconName: Story = {
+export const IconStory: Story = {
+  name: 'IconName',
   parameters: {
     actions: {
       disable: true,

github-actions · 2026-03-06T19:53:22Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-06T19:54:48Z

📖 Storybook Preview

View PR Storybook

## Release 25.0.0 This release includes new components migrated from Extension and Mobile, breaking API improvements to ButtonIcon and Input components, and continued ADR-0003/0004 type migrations. ### 📦 Package Versions - `@metamask/design-system-shared`: **0.4.0** - `@metamask/design-system-react`: **0.11.0** - `@metamask/design-system-react-native`: **0.11.0** ### 🔄 Shared Type Updates (0.4.0) #### Component Type Additions (#964, #955) Added shared types for newly migrated components following ADR-0003 and ADR-0004 patterns: **What Changed:** - Added `ButtonFilter` shared types with `ButtonFilterVariant` const object and `ButtonFilterPropsShared` - Added `BannerBase` shared types with `BannerBaseSeverity` const object and `BannerBasePropsShared` **Impact:** - Enables consistent ButtonFilter and BannerBase implementations across React and React Native - Continues ADR-0003/0004 const-object + string-union pattern adoption ### 🌐 React Web Updates (0.11.0) #### Added - Added `ButtonFilter` component for filter button functionality (#964) - Added `BannerBase` component for creating custom banner notifications (#961) #### Changed - **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead of `isInverse` and `isFloating` boolean props (#948) - Updated `Ai` icon to filled version for visual consistency (#970) ### 📱 React Native Updates (0.11.0) #### Added - Added `ButtonFilter` component (#964) - Added `BottomSheet` component for modal interactions (#963) - Added `MainActionButton` component for primary CTAs (#952) - Added `BannerBase` component for custom banners (#955) - Added `ListItem` component for standardized list rows (#958) - Added `TabEmptyState` component for empty states (#949) - Added `BottomSheetDialog` component for dialogs (#905) #### Changed - **BREAKING:** Updated `ButtonIcon` API to use `variant` prop instead of `isInverse` and `isFloating` boolean props (#948) - **BREAKING:** `Input` component now requires `value` prop and is controlled-only (#960) - Updated `Ai` icon to filled version (#970) #### Fixed - Fixed iOS placeholder alignment issue in `Input` component (#960) - Fixed missing component exports (#967) ### ⚠️ Breaking Changes #### ButtonIcon Variant Prop (Both Platforms) **What Changed:** - Removed `isInverse` and `isFloating` boolean props - Added `variant` prop with three options: - `ButtonIconVariant.Default` (transparent background - default) - `ButtonIconVariant.Filled` (muted background with rounded corners - new) - `ButtonIconVariant.Floating` (colored background with inverse icon - replaces `isFloating`) **Migration:** ```tsx // Before <ButtonIcon name={IconName.Add} isFloating /> // After <ButtonIcon name={IconName.Add} variant={ButtonIconVariant.Floating} /> ``` See migration guides for complete instructions: - [React Migration Guide](./packages/design-system-react/MIGRATION.md#from-version-0100-to-0110) - [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0100-to-0110) #### Input Controlled-Only (React Native Only) **What Changed:** - Removed `defaultValue` prop - `value` prop is now required - All Input instances must be controlled with state management **Migration:** ```tsx // Before <Input placeholder="Enter text" defaultValue="Initial" onChange={handleChange} /> // After const [text, setText] = useState('Initial'); <Input placeholder="Enter text" value={text} onChange={setText} /> ``` **Impact:** - Affects `Input` and `TextField` components - Provides consistent behavior and fixes iOS placeholder alignment See [React Native Migration Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0100-to-0110) for complete instructions. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - design-system-shared: minor (0.3.0 → 0.4.0) - new shared types - design-system-react: minor (0.10.0 → 0.11.0) - new components + breaking ButtonIcon change - design-system-react-native: minor (0.10.0 → 0.11.0) - new components + breaking ButtonIcon and Input changes - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples - [x] PR references included in changelog entries  --- > [!NOTE] > **Medium Risk** > Although this PR is mostly versioning/docs, it formalizes breaking public API changes (`ButtonIcon` and RN `Input`) that will require downstream updates and could cause consumer build failures if missed. > > **Overview** > Bumps the monorepo release to `25.0.0` and publishes new package versions (`@metamask/design-system-react@0.11.0`, `@metamask/design-system-react-native@0.11.0`, `@metamask/design-system-shared@0.4.0`) with updated changelogs. > > Documents newly added components/types (`ButtonFilter`, `BannerBase`, plus several React Native-only additions like `BottomSheet`, `ListItem`, etc.) and **breaking API changes**: `ButtonIcon` replaces `isInverse`/`isFloating` with a `variant` prop (React + RN), and React Native `Input` becomes controlled-only (requires `value`, removes `defaultValue`). Migration guides are updated with before/after examples and new compare links. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 0148a27. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>

georgewrmarshall force-pushed the feat/dsys-296-main-action-button-rn branch from dd39cd1 to d06237a Compare March 4, 2026 04:59

georgewrmarshall force-pushed the feat/dsys-296-main-action-button-rn branch from e91636c to 3ccca16 Compare March 5, 2026 00:16

georgewrmarshall commented Mar 5, 2026

View reviewed changes

georgewrmarshall force-pushed the feat/dsys-296-main-action-button-rn branch from 3ccca16 to 9844bbb Compare March 5, 2026 18:44

georgewrmarshall self-assigned this Mar 5, 2026

georgewrmarshall commented Mar 5, 2026

View reviewed changes

cursor Bot reviewed Mar 5, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/MainActionButton/MainActionButton.types.ts

georgewrmarshall marked this pull request as ready for review March 5, 2026 22:07

georgewrmarshall requested a review from a team as a code owner March 5, 2026 22:07

georgewrmarshall commented Mar 5, 2026

View reviewed changes

brianacnguyen previously approved these changes Mar 5, 2026

View reviewed changes

georgewrmarshall dismissed brianacnguyen’s stale review via a19f71a March 6, 2026 00:53

georgewrmarshall force-pushed the feat/dsys-296-main-action-button-rn branch from 0e46f38 to a19f71a Compare March 6, 2026 00:53

georgewrmarshall added 6 commits March 5, 2026 17:08

feat(rn): migrate MainActionButton to design system

e8662e7

chore: format MainActionButton README

ebc9113

fix(rn): resolve MainActionButton build typing and story actions

8d428b8

chore(stories): add ActionButtonOnPress and consolidate prop docs

61a84fb

test: cover MainActionButton pressed style branches

a50258e

chore: storybook update

c2d0340

georgewrmarshall added 8 commits March 5, 2026 17:08

refactor(rn): address MainActionButton review comments

b035806

chore: update

f4c5004

chore: update

121f43d

docs(stories): set MainActionButton IconName story display name

9fef19f

docs(stories): adjust MainActionButton IconName story naming

8e30185

feat(rn): add MainActionButton child prop objects for test IDs

60c0513

refactor(rn): inline MainActionButton tw classes and refine tests/docs

324c29d

refactor(rn): simplify MainActionButton twClassName and pressed-state…

bb0880b

… tests

georgewrmarshall enabled auto-merge (squash) March 6, 2026 01:09

georgewrmarshall force-pushed the feat/dsys-296-main-action-button-rn branch from a19f71a to bb0880b Compare March 6, 2026 01:09

georgewrmarshall commented Mar 6, 2026

View reviewed changes

georgewrmarshall added 2 commits March 5, 2026 17:11

docs(react-native): group MainActionButton related props in README

fb33e3d

style(react-native): format MainActionButton README

ba65d80

georgewrmarshall added 2 commits March 5, 2026 17:59

docs(react-native): align MainActionButton docs and stories with rules

71b60a2

chore: remove usage heading

40166f6

georgewrmarshall requested a review from brianacnguyen March 6, 2026 02:02

cursor Bot reviewed Mar 6, 2026

View reviewed changes

Comment thread ...ages/design-system-react-native/src/components/MainActionButton/MainActionButton.stories.tsx

chore: fix story name

e67d853

georgewrmarshall force-pushed the feat/dsys-296-main-action-button-rn branch from a3a299e to e67d853 Compare March 6, 2026 19:53

brianacnguyen approved these changes Mar 6, 2026

View reviewed changes

georgewrmarshall merged commit 4159128 into main Mar 6, 2026
43 checks passed

georgewrmarshall deleted the feat/dsys-296-main-action-button-rn branch March 6, 2026 20:34

georgewrmarshall mentioned this pull request Mar 10, 2026

Release/25.0.0 #972

Merged

6 tasks

Uh oh!

Conversation

georgewrmarshall commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue

Screenshots

Mobile

MMDS

Notes

Uh oh!

github-actions Bot commented Mar 4, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 4, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 5, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 5, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 5, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 5, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 5, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

cursor Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

georgewrmarshall commented Mar 3, 2026 •

edited

Loading

georgewrmarshall Mar 5, 2026 •

edited

Loading

cursor Bot left a comment •

edited

Loading

cursor Bot left a comment •

edited

Loading