feat: update network list item active state to mobile style#39761
Merged
georgewrmarshall merged 14 commits intomainfrom Feb 12, 2026
Merged
feat: update network list item active state to mobile style#39761georgewrmarshall merged 14 commits intomainfrom
georgewrmarshall merged 14 commits intomainfrom
Conversation
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (5 files, +37 -129)
👨🔧 @MetaMask/core-extension-ux (5 files, +7 -47)
🧪 @MetaMask/qa (1 files, +0 -4)
🔄 @MetaMask/swaps-engineers (1 files, +2 -8)
|
Contributor
Builds ready [398adc6]
UI Startup Metrics (1371 ± 92 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.tsx
Show resolved
Hide resolved
Contributor
Builds ready [ceaded0]
UI Startup Metrics (1380 ± 99 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
Update the selected network item styling to match the mobile implementation: - Remove the blue pill indicator (left border) - Update icon/avatar to use primary color when selected - Keep background-muted for selected state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update the selected account item styling to match the mobile implementation: - Remove the blue pill indicator (left border) - Remove showSelectionIndicator prop (no longer needed) - Keep background primaryMuted for selected state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update the selected account cell styling to match the mobile implementation: - Remove the blue pill indicator (left border) - Change background from infoMuted to backgroundMuted for selected state - Update tests to verify is-selected class instead of indicator element 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Update unit tests and E2E page objects to work with the removed blue pill indicators: - Remove AccountListItem showSelectionIndicator test - Update tests to check for --selected class instead of indicator element - Remove E2E wait for removed indicator selector in network-manager Fixes issues found by Cursor bot review. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
ceaded0 to
04a627a
Compare
Contributor
Builds ready [03713fa]
UI Startup Metrics (1458 ± 101 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Update test assertions to check for the is-selected class on cell elements instead of looking for the removed selected-indicator element. Also fix MultichainAccountCell to only apply is-selected styling when startAccessory is not present (preserving the original behavior where the selected indicator wouldn't show when checkboxes are displayed). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove unnecessary negative assertions that check for the absence of the is-selected class. Tests should focus on positive assertions - verifying that selected cells have the is-selected class, not testing that unselected cells don't have it. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Change selectedCell from let to const since it's no longer reassigned after removing the negative assertion. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
ui/components/multichain-accounts/multichain-account-list/multichain-account-list.test.tsx
Show resolved
Hide resolved
Rename test cases to accurately reflect what they test rather than claiming to test behaviors they don't verify: - "checkboxes and selected icons are mutually exclusive" → "shows is-selected class or checkboxes based on showAccountCheckbox prop" - "hides selected bar when startAccessory is present" → "renders with startAccessory when provided" These tests verify positive cases (what IS rendered) without checking negative cases (what is NOT rendered), so the names should reflect that. Addresses Cursor bot review feedback. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.test.tsx
Show resolved
Hide resolved
sleepytanya
approved these changes
Feb 11, 2026
DDDDDanica
approved these changes
Feb 11, 2026
gantunesr
approved these changes
Feb 11, 2026
SteP-n-s
approved these changes
Feb 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Update network and account list item active/selected state styling to match the mobile implementation as specified in MDP-669. This brings consistency between the extension and mobile app.
Components Updated:
What is the reason for the change?
The network menu and account list active states in the extension did not match the mobile style, causing an inconsistent user experience across platforms.
What is the improvement/solution?
Align the extension's list item styling with the mobile implementation for a consistent, unified design system across both network and account selection.
Changelog
CHANGELOG entry: Updated network and account list item active state styling to match mobile design
Related issues
Fixes: MDP-669
Manual testing steps
Network List Item:
Account List Item:
Storybook Testing:
yarn storybookComponents/Multichain/NetworkListItem→ ViewSelectedStoryComponents/MultichainAccounts/MultichainAccountCell→ ViewSelectedScreenshots/Recordings
Before
before720.mov
old account list item still used
After
after720.mov
old account list item
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Primarily visual/styling changes plus test updates; main risk is minor UI regression in selected-state presentation/conditional styling.
Overview
Aligns multichain network/account selection UI with mobile by removing the left “pill” selection indicator and switching selected-state styling to use
BackgroundColor.backgroundMuted.This updates
NetworkListItem,MultichainAccountCell(selection now suppressed whenstartAccessoryis present), andAccountListItem(drops theshowSelectionIndicatorprop entirely), with unit tests, snapshots, and an E2E selector check updated to assert selection via CSS class/background rather than indicator elements.Written by Cursor Bugbot for commit ca99aaa. This will update automatically on new commits. Configure here.