chore: adding design tokens eslint plugin color-no-hex rule #24089
Merged
georgewrmarshall merged 2 commits intodevelopfrom Apr 25, 2024
Merged
chore: adding design tokens eslint plugin color-no-hex rule #24089georgewrmarshall merged 2 commits intodevelopfrom
color-no-hex rule #24089georgewrmarshall merged 2 commits intodevelopfrom
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. |
.eslintrc.js
Outdated
Comment on lines
21
to
24
Contributor
Author
There was a problem hiding this comment.
Adding plugin and color no hex rule to eslintrc.js file
.eslintrc.js
Outdated
Comment on lines
446
to
458
Contributor
Author
There was a problem hiding this comment.
ignoring all test files
Comment on lines
452
to
446
Contributor
Author
There was a problem hiding this comment.
There is a current issue with some false positives that need to be fixed issue here MetaMask/eslint-plugin-design-tokens#20
package.json
Outdated
Contributor
Author
There was a problem hiding this comment.
Adding eslint-plugin-design-tokens package
test/e2e/tests/metrics/mock-data.js
Outdated
Contributor
Author
There was a problem hiding this comment.
Ignoring this file
ui/components/multichain/notification-list-item/notification-list-item.stories.tsx
Outdated
Show resolved
Hide resolved
c863882 to
d8f2ce6
Compare
|
New dependencies detected. Learn more about Socket for GitHub ↗︎
|
d8f2ce6 to
93a0e05
Compare
color-no-hex rule color-no-hex rule
Collaborator
Builds ready [93a0e05]
Page Load Metrics (1446 ± 731 ms)
Bundle size diffs
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #24089 +/- ##
========================================
Coverage 67.46% 67.46%
========================================
Files 1258 1258
Lines 49259 49261 +2
Branches 12826 12826
========================================
+ Hits 33229 33231 +2
Misses 16030 16030 ☔ View full report in Codecov by Sentry. |
garrettbear
previously approved these changes
Apr 19, 2024
93a0e05 to
25bf40a
Compare
25bf40a to
d105e2c
Compare
garrettbear
previously approved these changes
Apr 23, 2024
Collaborator
Builds ready [d105e2c]
Page Load Metrics (994 ± 610 ms)
Bundle size diffs
|
darkwing
previously approved these changes
Apr 24, 2024
NidhiKJha
previously approved these changes
Apr 24, 2024
| @@ -1,3 +1,4 @@ | |||
| /* eslint-disable @metamask/design-tokens/color-no-hex*/ | |||
Contributor
Author
There was a problem hiding this comment.
Ignoring image asset svg component
f7543dd
...firmations/components/edit-gas-fee-popover/network-statistics/status-slider/status-slider.js
Outdated
Show resolved
Hide resolved
darkwing
approved these changes
Apr 24, 2024
| @@ -1,3 +1,4 @@ | |||
| /* eslint-disable @metamask/design-tokens/color-no-hex*/ | |||
| import React from 'react'; | |||
Contributor
Author
There was a problem hiding this comment.
Ignoring image asset svg component
| @@ -1,3 +1,4 @@ | |||
| /* eslint-disable @metamask/design-tokens/color-no-hex*/ | |||
Contributor
Author
There was a problem hiding this comment.
Ignoring image asset svg component
| @@ -1,3 +1,4 @@ | |||
| /* eslint-disable @metamask/design-tokens/color-no-hex*/ | |||
Contributor
Author
There was a problem hiding this comment.
Ignoring image asset svg component
| @@ -1,3 +1,4 @@ | |||
| /* eslint-disable @metamask/design-tokens/color-no-hex*/ | |||
Contributor
Author
There was a problem hiding this comment.
Ignoring image asset svg component
| @@ -1,3 +1,4 @@ | |||
| /* eslint-disable @metamask/design-tokens/color-no-hex*/ | |||
Contributor
Author
There was a problem hiding this comment.
Ignoring image asset svg component
dbrans
approved these changes
Apr 24, 2024
Contributor
dbrans
left a comment
There was a problem hiding this comment.
Thank you for adding this, George!
jpuri
approved these changes
Apr 24, 2024
Contributor
jpuri
left a comment
There was a problem hiding this comment.
Changes in files owned by confirmation ux team look good.
Collaborator
Builds ready [f7543dd]
Page Load Metrics (1305 ± 736 ms)
Bundle size diffs
|
garrettbear
approved these changes
Apr 24, 2024
albertolive
approved these changes
Apr 25, 2024
EtherWizard33
approved these changes
Apr 25, 2024
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.
11 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
This PR introduces the @metamask/eslint-plugin-design-tokens library to the MetaMask extension codebase, along with the implementation of the color-no-hex rule. This rule aims to prevent the use of static hex color values in our
.js,.tsand.tsxfiles encouraging instead the adoption of design tokens. The motivation behind this change is to ensure our styling remains consistent with the MetaMask design system, enhancing themability, accessibility, and overall alignment with our design principles. Additionally, this update is a crucial step towards enabling the seamless rollout of future brand evolution within MetaMask, ensuring that our UI can adapt to new design standards with minimal effort.Related issues
Fixes: #24111
Manual testing steps
To ensure the successful integration of the
eslint-plugin-design-tokensand the effectiveness of thecolor-no-hexrule:yarn install.yarn lint:checkto identify any instances of static hex color values.Screenshots/Recordings
Before
before720.mov
After
after1080.mov
Pre-merge author checklist
Pre-merge reviewer checklist