chore: update buttons to be monochromatic #33847
Merged
+196
−286
Conversation
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
georgewrmarshall
added
the
team-design-system
georgewrmarshall
changed the title
|
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. |
Comment on lines
+3
to
+4
| color: var(--color-icon-inverse); | ||
| background-color: var(--color-icon-default-hover); |
There was a problem hiding this comment.
Updating buttons to use icon colors and removing the dropshadows
| } | ||
|
|
||
| &:active { | ||
| color: var(--color-error-inverse); | ||
| background-color: var(--color-error-alternative); | ||
| background-color: var(--color-error-default-pressed); |
There was a problem hiding this comment.
Updating danger button to align with new tokens
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (1 files, +2 -3)
🎨 @MetaMask/design-system-engineers (9 files, +53 -71)
💎 @MetaMask/metamask-assets (1 files, +4 -6)
🫰 @MetaMask/snaps-devs (1 files, +10 -10)
🔄 @MetaMask/swaps-engineers (3 files, +4 -8)
🖥️ @MetaMask/wallet-ux (7 files, +12 -16)
|
| box-shadow: | ||
| var(--shadow-size-sm) | ||
| var(--color-shadow-primary);; | ||
| background-color: var(--color-background-muted-hover); |
There was a problem hiding this comment.
Updating secondary button to align with design
Comment on lines
+125
to
134
| <Box display={Display.Flex} gap={4}> | ||
| <Button danger> | ||
| Danger | ||
| </Button> | ||
| <Button variant={ButtonVariant.Secondary} danger> | ||
| Danger | ||
| </Button> | ||
| <Button {...args} variant={ButtonVariant.Link} danger> | ||
| Danger | ||
| </Button> |
There was a problem hiding this comment.
Updating story to show all danger variants
| @@ -604,7 +604,7 @@ export const NetworkListMenu = ({ onClose }: NetworkListMenuProps) => { | |||
| padding={4} | |||
| marginTop={2} | |||
| gap={4} | |||
| backgroundColor={BackgroundColor.backgroundMuted} | |||
| backgroundColor={BackgroundColor.backgroundSection} | |||
There was a problem hiding this comment.
revert this change
| @@ -51,7 +51,7 @@ export const SiteCellConnectionListItem = ({ | |||
| iconName={iconName} | |||
| size={AvatarIconSize.Md} | |||
| color={IconColor.iconAlternative} | |||
| backgroundColor={BackgroundColor.backgroundMuted} | |||
| backgroundColor={BackgroundColor.backgroundSection} | |||
| /> | |||
There was a problem hiding this comment.
Revert this change
| @@ -93,18 +93,18 @@ | |||
|
|
|||
| .btn-default, | |||
| .btn-primary { | |||
| color: var(--color-primary-inverse); | |||
| color: var(--color-icon-inverse); | |||
There was a problem hiding this comment.
Updating deprecated button to match new designs. As an aside we are close to eliminating this deprecated component altogether
Comment on lines
-168
to
-171
| &:hover { | ||
| box-shadow: var(--shadow-size-sm) var(--color-shadow-default); | ||
| } | ||
|
|
There was a problem hiding this comment.
Not using shadow on hover anymore
| @@ -12,6 +12,7 @@ $color-map: ( | |||
| 'icon-default': --color-icon-default, | |||
| 'icon-alternative': --color-icon-alternative, | |||
| 'icon-muted': --color-icon-muted, | |||
| 'icon-inverse': --color-icon-inverse, | |||
There was a problem hiding this comment.
adding new icon color tokens that were introduced in design tokens v8 upgrade #33764
Comment on lines
+121
to
+124
| iconDefault = 'icon-default', | ||
| iconAlternative = 'icon-alternative', | ||
| iconMuted = 'icon-muted', | ||
| iconInverse = 'icon-inverse', |
There was a problem hiding this comment.
Adding new icon colors to design system that were introduced in #33764
georgewrmarshall
force-pushed
the
fix/button-monochrome-updates
branch
from
d9b80a0 to
9772ac3
Compare
Builds ready [9772ac3]
UI Startup Metrics (1243 ± 66 ms)
Benchmark value 1075 exceeds gate value 1070 for chrome browserify home mean load Benchmark value 1068 exceeds gate value 1061 for chrome browserify home mean domContentLoaded Benchmark value 20 exceeds gate value 17 for chrome browserify home p95 setupStore Benchmark value 2230 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 263 exceeds gate value 235 for chrome webpack home mean firstReactRender Benchmark value 2636 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 60 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 411 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 1992 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 112 exceeds gate value 110 for firefox browserify home mean domInteractive Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 229 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 26 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 2073 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 1703 exceeds gate value 1660 for firefox webpack home p95 load Benchmark value 1703 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded Benchmark value 300 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 33 exceeds gate value 32 for firefox webpack home p95 getState Benchmark value 1681 exceeds gate value 1630 for firefox webpack home p95 loadScripts Sum of mean exceeds: 93ms | Sum of p95 exceeds: 707ms Sum of all benchmark exceeds: 800ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
brianacnguyen
requested changes
Jun 23, 2025
auto-merge was automatically disabled
June 24, 2025 15:11
Pull request was converted to draft
7 tasks
github-merge-queue bot
pushed a commit
that referenced
this pull request
Jun 24, 2025
…3854) ## **Description** This PR replaces the deprecated `ui/components/ui/button` components to the component library `Button` component across multiple files. Once this PR is merged we can delete `ui/components/ui/button` in another PR which will significantly help with future Button iterations as well as [updating the buttons to monochome](#33847) **Reason for the change:** The old button component has been deprecated in favor of the component library Button(and soon the monorepo component) which provides better TypeScript support, improved accessibility features, and consistent styling aligned with the MetaMask design system. **What is the improvement/solution:** - Replaced 11 instances of deprecated button imports with new component library imports - Updated button props from `type` to `variant` using `ButtonVariant` enum - Converted danger buttons to use the `danger` prop instead of `type="danger"` - Updated test snapshots to reflect new button class names and structure - Maintained all existing functionality while improving code consistency [](https://codespaces.new/MetaMask/metamask-extension/pull/33854?quickstart=1) ## **Related issues** Fixes: #18896 ## **Manual testing steps** 1. View various file updates in storybook 2. Confirm visual changes ## **Screenshots/Recordings** Before and after screenshots added in code comments for easier review ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). 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.
georgewrmarshall
force-pushed
the
fix/button-monochrome-updates
branch
from
9772ac3 to
4ef6aa2
Compare
Comment on lines
+8
to
+14
| // Focus styles from monorepo button | ||
| &:focus-visible { | ||
| outline: 2px solid var(--color-primary-default); | ||
| outline-offset: 2px; | ||
| box-shadow: none; | ||
| } | ||
|
|
There was a problem hiding this comment.
Adding focus state to component-library button cc @brianacnguyen
focus.component-library720.mov
Comment on lines
+20
to
+24
| &:focus-visible { | ||
| outline: 2px solid var(--color-primary-default); | ||
| outline-offset: 2px; | ||
| box-shadow: none; | ||
| } |
There was a problem hiding this comment.
Adding focus states to old button cc @brianacnguyen
focus.old.button720.mov
Builds ready [4ef6aa2]
UI Startup Metrics (1176 ± 56 ms)
Benchmark value 18 exceeds gate value 17 for chrome browserify home p95 setupStore Benchmark value 271 exceeds gate value 235 for chrome webpack home mean firstReactRender Benchmark value 2610 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 404 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 115 exceeds gate value 110 for firefox browserify home mean domInteractive Benchmark value 301 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 35 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 41 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 1946 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 277 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 33 exceeds gate value 32 for firefox webpack home p95 getState Sum of mean exceeds: 44ms | Sum of p95 exceeds: 446ms Sum of all benchmark exceeds: 490ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
brianacnguyen
approved these changes
Jun 25, 2025
jpuri
approved these changes
Jun 25, 2025
gambinish
approved these changes
Jun 25, 2025
OGPoyraz
approved these changes
Jun 25, 2025
Mrtenz
approved these changes
Jun 25, 2025
vinnyhoward
approved these changes
Jun 25, 2025
](https://codespaces.new/MetaMask/metamask-extension/pull/33854?quickstart=1){kind=link}
metamaskbot
added
the
release-12.23.0
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
This PR implements continued design updates to the Button component based on direction from product and design leadership. We previously merged updates to the button shape(here and here). This PR is to make the Button monochromatic.
Key changes:
Figma designs: https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-WIP--MMDS-Components?m=auto&node-id=1-304
Related issues
Fixes: #33850
Manual testing steps
yarn storybookScreenshots/Recordings
Before
Currently, the deprecated button is using monochromatic colors, but not the correct tokens. The component library button is still using primary/default(blurple).
before.app720.mov
storybook.before720.mov
After
In the PR, the deprecated button has been updated to use the correct icon color tokens, and the component library button now uses icon colors instead of the primary colors.
after720.mov
storybook.after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist