feat: migrate ButtonFilter component to MMDS by georgewrmarshall · Pull Request #964 · MetaMask/metamask-design-system

georgewrmarshall · 2026-03-06T20:55:20Z

Description

Migrates the ButtonFilter component from MetaMask Mobile into MMDS across @metamask/design-system-react-native and @metamask/design-system-react. The migration includes shared props in @metamask/design-system-shared, component implementations, stories, tests, and package exports.

The implementation preserves mobile behavior (isActive visual state with ButtonBase wrapping) while aligning with MMDS architecture rules (ADR-0003/0004 style layering and shared type ownership).

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-294

Related: https://consensyssoftware.atlassian.net/browse/DSYS-272

Manual testing steps

git checkout button-filter && yarn install
Run checks:
yarn build
yarn lint
yarn test
Verify focused coverage for migrated files:
yarn workspace @metamask/design-system-react jest --verbose ButtonFilter.test.tsx --coverage --collectCoverageFrom='src/components/ButtonFilter/**/*.{ts,tsx}' --runInBand --watchman=false
yarn workspace @metamask/design-system-react-native jest --verbose ButtonFilter.test.tsx --coverage --collectCoverageFrom='src/components/ButtonFilter/ButtonFilter.tsx' --runInBand --watchman=false
Open Storybook and verify ButtonFilter stories render in both web and native storybooks.

Screenshots/Recordings

N/A (component migration with tests and stories updated).

Before

N/A

After

buttonfilter.mov

buttonfilter.docs.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
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

Medium Risk
Adds a new cross-platform ButtonFilter and shared types, plus a small change to ButtonBase text rendering that could impact styling/props for any button with string children.

Overview
Introduces a new ButtonFilter component in both @metamask/design-system-react and @metamask/design-system-react-native, exposing an isActive state that toggles background/text styles while delegating behavior to ButtonBase.

Adds shared ButtonFilterPropsShared to @metamask/design-system-shared, wires up package exports, and includes Storybook stories/docs plus unit tests for active/inactive, disabled, and interaction behavior.

Updates React Native ButtonBase to render string children with Text (instead of TextOrChildren) and explicitly merges textProps.twClassName into the computed twClassName.

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

github-actions · 2026-03-06T20:56:30Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-08T23:15:16Z

📖 Storybook Preview

View PR Storybook

…ext rendering

github-actions · 2026-03-09T15:15:10Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-09T16:03:55Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-09T16:14:28Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-09T16:16:01Z

📖 Storybook Preview

View PR Storybook

github-actions · 2026-03-09T16:31:57Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2026-03-09T17:41:18Z

+  const [activeFilter, setActiveFilter] = useState<FilterOption>('All');
+
+  return (
+    <Box flexDirection={BoxFlexDirection.Column} gap={4}>


Story to show a production like layout

georgewrmarshall · 2026-03-09T17:41:35Z

          {typeof children === 'string' ? (
-            <TextOrChildren
-              textProps={{
-                variant: TextVariant.BodyMd,
-                fontWeight: FontWeight.Medium,
-                color: TextColor.TextDefault,
-                twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
-                ...textProps,
-              }}
+            <Text
+              variant={TextVariant.BodyMd}
+              fontWeight={FontWeight.Medium}
+              color={TextColor.TextDefault}
+              {...textProps}
+              twClassName={`shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''} ${textProps?.twClassName ?? ''}`}
            >
              {children}
-            </TextOrChildren>
+            </Text>
          ) : (
            <View style={tw.style(isLoading && 'opacity-0')}>{children}</View>
          )}


Because we need to wrap the children in a view that is linked to isLoading, TextOrChildren is redundant here and adds bloat

…r/ButtonFilter.stories.tsx

github-actions · 2026-03-09T17:45:38Z

📖 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 added 3 commits March 8, 2026 17:09

feat: migrate ButtonFilter component to MMDS

b01eb53

refactor: align rn ButtonFilter styling api and simplify ButtonBase t…

120d8b6

…ext rendering

chore: updating storybook requires

5024a8a

georgewrmarshall force-pushed the button-filter branch from 7b1414c to 5024a8a Compare March 9, 2026 15:13

georgewrmarshall commented Mar 9, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/ButtonFilter/ButtonFilter.stories.tsx Outdated

Comment thread packages/design-system-react-native/src/components/ButtonFilter/ButtonFilter.stories.tsx Outdated

Update ButtonFilter stories and docs

05d5cd0

georgewrmarshall force-pushed the button-filter branch from 1eb0ff1 to 05d5cd0 Compare March 9, 2026 16:13

Align React imports in ButtonFilter stories

b97472a

Fix import ordering in ButtonFilter stories

c6e0431

georgewrmarshall commented Mar 9, 2026

View reviewed changes

Comment thread packages/design-system-react-native/src/components/ButtonFilter/ButtonFilter.stories.tsx Outdated

Add React import to ButtonFilter stories

8df0312

georgewrmarshall marked this pull request as ready for review March 9, 2026 17:39

georgewrmarshall requested a review from a team as a code owner March 9, 2026 17:39

georgewrmarshall self-assigned this Mar 9, 2026

georgewrmarshall commented Mar 9, 2026

View reviewed changes

Update packages/design-system-react-native/src/components/ButtonFilte…

20026ba

…r/ButtonFilter.stories.tsx

brianacnguyen approved these changes Mar 9, 2026

View reviewed changes

georgewrmarshall merged commit 5765f69 into main Mar 9, 2026
43 checks passed

georgewrmarshall deleted the button-filter branch March 9, 2026 21:21

georgewrmarshall mentioned this pull request Mar 10, 2026

Release/25.0.0 #972

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: migrate ButtonFilter component to MMDS#964

feat: migrate ButtonFilter component to MMDS#964
georgewrmarshall merged 8 commits into
mainfrom
button-filter

georgewrmarshall commented Mar 6, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Mar 6, 2026

Uh oh!

github-actions Bot commented Mar 8, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

georgewrmarshall Mar 9, 2026 •

edited

Loading

Uh oh!

georgewrmarshall Mar 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

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

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 6, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 8, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

github-actions Bot commented Mar 9, 2026

📖 Storybook Preview

Uh oh!

georgewrmarshall Mar 9, 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!

georgewrmarshall Mar 9, 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 9, 2026

📖 Storybook Preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

georgewrmarshall commented Mar 6, 2026 •

edited by cursor Bot

Loading

georgewrmarshall Mar 9, 2026 •

edited

Loading

georgewrmarshall Mar 9, 2026 •

edited

Loading