test: color-no-hex ramp by georgewrmarshall · Pull Request #27030 · MetaMask/metamask-mobile

georgewrmarshall · 2026-03-05T00:48:04Z

Description

This PR is the Ramp-only split of the color-no-hex batch work, extracted from the original umbrella PR #26651.

Scope:

Ramp files only (app/components/UI/Ramp/**)
temporary eslint rollout override for app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}
includes replacing straightforward mock color suppressions in DepositProgressBar test with mockTheme

Reference PR: #26651

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: color-no-hex ramp batch

  Scenario: validate ramp lint and tests
    Given this branch is checked out
    When running eslint for Ramp scope
    Then there are no lint errors

    When running jest for Ramp scope with snapshot updates
    Then tests pass

Screenshots/Recordings

Before

N/A (test/lint/config updates only)

After

N/A (test/lint/config updates only)

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
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

Low Risk
Low risk: changes are limited to ESLint override scope and test-only theme mocks/assertions, with no production logic changes aside from a local lint-disable comment on an SVG component.

Overview
Enables @metamask/design-tokens/color-no-hex enforcement for app/components/UI/Ramp/** via an ESLint override, as part of the incremental rollout.

Updates multiple Ramp tests to stop using hardcoded hex colors by reusing util/theme's mockTheme (including DepositProgressBar, DepositTextField, generateThemeParameters, PaymentMethodSelector, BankDetails, and useTransakRouting), and adds a targeted file-level lint disable in ShapesBackgroundAnimation where the SVG uses fixed brand colors without token equivalents.

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

github-actions · 2026-03-05T00:48:19Z

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.

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: Out-of-scope Predict snapshot change committed accidentally
- Reverted the unintended Predict snapshot change by restoring fontSize from 18 back to 20 to remove out-of-scope modifications.

Or push these changes by commenting:

@cursor push c40343e421

Preview (c40343e421)

diff --git a/app/components/UI/Predict/components/PredictGameDetailsContent/__snapshots__/PredictGameDetailsContent.test.tsx.snap b/app/components/UI/Predict/components/PredictGameDetailsContent/__snapshots__/PredictGameDetailsContent.test.tsx.snap
--- a/app/components/UI/Predict/components/PredictGameDetailsContent/__snapshots__/PredictGameDetailsContent.test.tsx.snap
+++ b/app/components/UI/Predict/components/PredictGameDetailsContent/__snapshots__/PredictGameDetailsContent.test.tsx.snap
@@ -115,7 +115,7 @@
             {
               "color": "#131416",
               "fontFamily": "Geist-Bold",
-              "fontSize": 18,
+              "fontSize": 20,
               "fontWeight": 700,
               "letterSpacing": 0,
               "lineHeight": 24,

...t/components/PredictGameDetailsContent/__snapshots__/PredictGameDetailsContent.test.tsx.snap

georgewrmarshall · 2026-03-05T03:02:14Z

app/components/UI/Ramp/Deposit/components/DepositProgressBar/DepositProgessBar.test.tsx

-      completedStep: { backgroundColor: COMPLETED_COLOR },
-      currentStep: { backgroundColor: CURRENT_COLOR },
-      todoStep: { backgroundColor: TODO_COLOR },
+      completedStep: { backgroundColor: mockCompletedColor },
+      currentStep: { backgroundColor: mockCurrentColor },
+      todoStep: { backgroundColor: mockTodoColor },


for some reason these fail without the mock prefix

yarn jest app/components/UI/Ramp/Deposit/components/DepositProgressBar/DepositProgessBar.test.tsx --updateSnapshot --no-coverage FAIL app/components/UI/Ramp/Deposit/components/DepositProgressBar/DepositProgessBar.test.tsx ● Test suite failed to run Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted. 13 | container: { flexDirection: 'row', paddingVertical: 12 }, 14 | step: { height: 5, flex: 1, borderRadius: 10 }, > 15 | completedStep: { backgroundColor: COMPLETED_COLOR }, | ^^^^^^^^^^^^^^^ 16 | currentStep: { backgroundColor: CURRENT_COLOR }, 17 | todoStep: { backgroundColor: TODO_COLOR }, 18 | stepGap: { marginRight: 10 },

georgewrmarshall · 2026-03-05T03:03:55Z

.eslintrc.js

      },
    },
+    {
+      files: ['app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}'],


Adding a Ramp-specific color-no-hex override keeps enforcement targeted to this migration batch without changing behavior in unrelated folders. This makes lint adoption incremental and easier to bisect if regressions appear.

georgewrmarshall · 2026-03-05T03:04:02Z

app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx

-  },
-  themeAppearance: 'light',
-};
+let mockCurrentTheme: Theme = mockTheme;


Using a mutable mockCurrentTheme lets this test validate keyboardAppearance behavior for both light and dark modes with one consistent style hook mock. That keeps coverage focused on theme-dependent behavior instead of fixture duplication.

georgewrmarshall · 2026-03-05T03:04:04Z

app/components/UI/Ramp/Deposit/utils/utils.test.ts

 });

 describe('generateThemeParameters', () => {
+  const mockDarkTheme = {


This test now anchors light-mode expectations to mockTheme and only swaps dark token colors where needed. It reduces hardcoded palette assumptions while still validating both output modes of generateThemeParameters.

georgewrmarshall · 2026-03-05T03:04:05Z

app/components/UI/Ramp/Aggregator/components/ShapesBackgroundAnimation/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @metamask/design-tokens/color-no-hex -- SVG illustration uses hardcoded brand colors without design token equivalents */


This file-level exception is scoped to the SVG illustration so we preserve exact brand artwork colors while still enforcing token usage across the rest of Ramp. The inline rationale helps prevent blanket disables from spreading.

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: New test name uses prohibited "should" prefix
- Renamed the new test to remove the 'should' prefix per guidelines.

Or push these changes by commenting:

@cursor push 53093bd574

Preview (53093bd574)

diff --git a/app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx b/app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx
--- a/app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx
+++ b/app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx
@@ -57,7 +57,7 @@
     );
   });
 
-  it('should use dark keyboard appearance in dark theme', () => {
+  it('uses dark keyboard appearance in dark theme', () => {
     mockCurrentTheme = {
       ...mockTheme,
       themeAppearance: AppThemeKey.dark,

app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx

.eslintrc.js

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: Rewards directory accidentally included in ESLint override
- Removed the Rewards path from the color-no-hex error override to prevent unintended linting of unmigrated Rewards tests.

Or push these changes by commenting:

@cursor push a7f9a53a16

Preview (a7f9a53a16)

diff --git a/.eslintrc.js b/.eslintrc.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -122,7 +122,6 @@
         'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}',
-        'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
       ],
       rules: {
         '@metamask/design-tokens/color-no-hex': 'error',

.eslintrc.js

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: Rewards eslint override accidentally removed instead of kept
- Re-added the Rewards glob to the ESLint override alongside Ramp to restore color-no-hex enforcement.

Or push these changes by commenting:

@cursor push 0ee9b31c1c

Preview (0ee9b31c1c)

diff --git a/.eslintrc.js b/.eslintrc.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -122,6 +122,7 @@
         'app/components/Snaps/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Predict/**/*.{js,jsx,ts,tsx}',
         'app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
       ],
       rules: {
         '@metamask/design-tokens/color-no-hex': 'error',

.eslintrc.js

github-actions · 2026-03-09T15:54:42Z

🔍 Smart E2E Test Selection

Selected E2E tags: None (no tests recommended)
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
All changes are limited to ESLint configuration, test files, and a non-functional comment addition (eslint-disable for hardcoded SVG colors) in ShapesBackgroundAnimation. There are no runtime logic changes, no modifications to core wallet flows, no UI behavior changes affecting Ramp screens, and no updates to controllers, Engine, navigation, or shared components. Therefore, no E2E flows are impacted.

Performance Test Selection:
No changes affect rendering logic, state management, network requests, or performance-sensitive flows. The only runtime file change is a comment addition with an ESLint rule disable, which has zero impact on app performance.

View GitHub Actions results

sonarqubecloud · 2026-03-09T16:20:15Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

metamaskbot added the team-design-system All issues relating to design system in Mobile label Mar 5, 2026

github-actions bot added size-S size-M and removed size-S labels Mar 5, 2026

georgewrmarshall changed the title ~~test: color-no-hex ramp codeowner batch~~ test: color-no-hex ramp Mar 5, 2026

cursor bot reviewed Mar 5, 2026

View reviewed changes

...t/components/PredictGameDetailsContent/__snapshots__/PredictGameDetailsContent.test.tsx.snap Outdated Show resolved Hide resolved

georgewrmarshall marked this pull request as ready for review March 5, 2026 02:40

georgewrmarshall requested a review from a team as a code owner March 5, 2026 02:40

georgewrmarshall enabled auto-merge March 5, 2026 02:40

georgewrmarshall force-pushed the chore/color-no-hex-ramp-batch-4 branch from 578405d to 3d754d6 Compare March 5, 2026 02:57

georgewrmarshall commented Mar 5, 2026

View reviewed changes

cursor bot reviewed Mar 5, 2026

View reviewed changes

app/components/UI/Ramp/Deposit/components/DepositTextField/DepositTextField.test.tsx Show resolved Hide resolved

georgewrmarshall self-assigned this Mar 5, 2026

georgewrmarshall force-pushed the chore/color-no-hex-ramp-batch-4 branch from 86cfab5 to 5a5d005 Compare March 6, 2026 01:07

georgewrmarshall commented Mar 6, 2026

View reviewed changes

.eslintrc.js Outdated Show resolved Hide resolved

cursor bot reviewed Mar 6, 2026

View reviewed changes

.eslintrc.js Show resolved Hide resolved

georgewrmarshall added 7 commits March 6, 2026 12:17

test: migrate color-no-hex for ramp codeowner batch

3ca4e33

test: align ramp deposit tests with theme fixtures

30b237e

chore: update snapshots

5971c81

test: fix DepositTextField test theme typing

7d7b84a

chore: revert snapshot

458f232

chore: test update

cdbaf3b

chore: eslint rc update

7f2bb7e

georgewrmarshall force-pushed the chore/color-no-hex-ramp-batch-4 branch from 715eaf4 to 7f2bb7e Compare March 6, 2026 20:18

cursor bot reviewed Mar 6, 2026

View reviewed changes

.eslintrc.js Show resolved Hide resolved

Merge branch 'main' into chore/color-no-hex-ramp-batch-4

ff93cb5

amitabh94 approved these changes Mar 9, 2026

View reviewed changes

georgewrmarshall added this pull request to the merge queue Mar 9, 2026

Merged via the queue into main with commit 1242530 Mar 9, 2026
62 checks passed

georgewrmarshall deleted the chore/color-no-hex-ramp-batch-4 branch March 9, 2026 17:37

github-actions bot locked and limited conversation to collaborators Mar 9, 2026

metamaskbot added the release-7.70.0 Issue or pull request that will be included in release 7.70.0 label Mar 9, 2026

		@@ -1,3 +1,4 @@
		/* eslint-disable @metamask/design-tokens/color-no-hex -- SVG illustration uses hardcoded brand colors without design token equivalents */

Uh oh!

Conversation

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

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Mar 5, 2026

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!

georgewrmarshall Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 5, 2026

Choose a reason for hiding this comment

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!

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!

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!

github-actions bot commented Mar 9, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud bot commented Mar 9, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

georgewrmarshall commented Mar 5, 2026 •

edited by cursor bot

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading