chore: update experimental settings to new design#40369
Merged
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. |
ameliejyc
commented
Feb 24, 2026
Comment on lines
-76
to
-85
| <div | ||
| class="toggle-button__status" | ||
| > | ||
| <span | ||
| class="toggle-button__label-off" | ||
| /> | ||
| <span | ||
| class="toggle-button__label-on" | ||
| /> | ||
| </div> |
Contributor
Author
There was a problem hiding this comment.
Removed redundant toggle labels when they are not provided to ToggleButton
ameliejyc
commented
Feb 24, 2026
Comment on lines
+113
to
+118
| {showLabels && ( | ||
| <div className="toggle-button__status"> | ||
| <span className="toggle-button__label-off">{offLabel}</span> | ||
| <span className="toggle-button__label-on">{onLabel}</span> | ||
| </div> | ||
| )} |
Contributor
Author
There was a problem hiding this comment.
ToggleButton labels are used optionally. This ensures these empty spans and div don't render when labels are not passed in.
ameliejyc
commented
Feb 24, 2026
Contributor
Author
There was a problem hiding this comment.
Renamed to experimental-tab.tsx
ameliejyc
commented
Feb 24, 2026
Contributor
Author
There was a problem hiding this comment.
No longer needed, hooks used inside component
ameliejyc
commented
Feb 24, 2026
Contributor
Author
There was a problem hiding this comment.
Renamed from experimental-tab.component.ts and brought up to date
Contributor
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (2 files, +0 -70)
👨🔧 @MetaMask/core-extension-ux (1 files, +0 -20)
|
n3ps
reviewed
Feb 24, 2026
| <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}> | ||
| {title} | ||
| </Text> | ||
| <div data-testid={toggleContainerDataTestId}> |
Contributor
Author
There was a problem hiding this comment.
It's for the e2e tests because the checkbox in the togglebutton is inaccessible. The ToggleButton will need a refactor at some point but not this PR.
n3ps
reviewed
Feb 24, 2026
| title: string; | ||
| description: React.ReactNode; | ||
| toggleValue: boolean; | ||
| toggleCallback: (value: boolean) => void; |
Contributor
There was a problem hiding this comment.
Thoughts on common prop names like?
onTogglevalue
|
Contributor
Builds ready [7da4b01]
⚡ Performance Benchmarks (1450 ± 103 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
ameliejyc
commented
Feb 24, 2026
Contributor
Author
There was a problem hiding this comment.
Let's use this component moving forwards for any setting item with a toggle @NidhiKJha ?
NidhiKJha
approved these changes
Feb 24, 2026
NidhiKJha
reviewed
Feb 24, 2026
| <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}> | ||
| {title} | ||
| </Text> | ||
| <div data-testid={containerDataTestId}> |
NidhiKJha
reviewed
Feb 24, 2026
Member
NidhiKJha
left a comment
There was a problem hiding this comment.
Left a small comment. Looks good otherwise
owencraston
approved these changes
Feb 24, 2026
Contributor
owencraston
left a comment
There was a problem hiding this comment.
Approving the design/content changes but did not review the code.
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.
5 participants
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
Updates Settings > Experimental page to bring it inline with Figma redesign (note this doesn't include the header and search bar). React component and js files have been brought up to date. No functional changes.
NOTE: the new
SettingsToggleItemcomponent has been extracted out and should be reusable across other Settings pages now.Changelog
CHANGELOG entry: Updated Experimental Settings styles and Snaps settings content
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/CEUX-914
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Primarily a UI refactor of the Experimental settings page plus minor action signature changes; risk is limited to settings toggle wiring/regressions and snapshot/test updates.
Overview
Updates Settings � Experimental to the new design-system layout by replacing the legacy class-based + Redux
connectimplementation with a functional component split into reusable toggle rows via a newSettingsToggleItem.Makes
ToggleButtononly render on/off labels when both labels are provided (updating snapshots accordingly), convertssetWatchEthereumAccountEnabledandsetAddSnapAccountEnabledto thunk action creators (with new action tests), adjusts the Experimental tab test to mock actions, and removes unused i18n strings (snapAccounts*) across locales.Written by Cursor Bugbot for commit 7da4b01. This will update automatically on new commits. Configure here.