fix: align ButtonIcon sizes to Md in header components#43523
Draft
georgewrmarshall wants to merge 10 commits into
Draft
fix: align ButtonIcon sizes to Md in header components#43523georgewrmarshall wants to merge 10 commits into
georgewrmarshall wants to merge 10 commits into
Conversation
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
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. |
mm-token-exchange-service
Bot
added
the
team-design-system
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (1 files, +1 -1)
👨🔧 @MetaMask/core-extension-ux (13 files, +123 -21)
🫰 @MetaMask/core-platform (1 files, +1 -1)
🎨 @MetaMask/design-system-engineers (2 files, +14 -14)
💎 @MetaMask/metamask-assets (5 files, +9 -9)
📜 @MetaMask/policy-reviewers (2 files, +7 -7)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 🔄 @MetaMask/swaps-engineers (4 files, +41 -7)
|
georgewrmarshall
added a commit
that referenced
this pull request
Jun 12, 2026
Contributor
Author
There was a problem hiding this comment.
Before / After
Captured using MetaMask Extension Storybook. Before = hosted main · After = this PR branch. Pink border highlights the component root.
Before
After
Contributor
Author
There was a problem hiding this comment.
Before / After
Captured using MetaMask Extension Storybook. Before = hosted main · After = this PR branch. Pink border highlights the component root.
Before
After
Contributor
Author
There was a problem hiding this comment.
Before / After
Captured using MetaMask Extension Storybook. Before = hosted main · After = this PR branch. Pink border highlights the component root.
Before
After
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Builds ready [2632b28] [reused from 062edfc]
⚡ Performance Benchmarks (Total: 🟢 14 pass · 🟡 6 warn · 🔴 0 fail)
Bundle size diffs
|
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Builds ready [534aefc]
⚡ Performance Benchmarks (Total: 🟢 15 pass · 🟡 9 warn · 🔴 1 fail)
Bundle size diffs
|
Contributor
Author
There was a problem hiding this comment.
After (new story)
New story added for visual regression — no hosted baseline exists. Pink border highlights the component root.
Contributor
Author
There was a problem hiding this comment.
After (new open-state story)
New
OpenStatestory added to capture the drawer header with close button visible. No hosted baseline exists for this variant. Pink border highlights the component root.
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
| iconName={IconName.ArrowLeft} | ||
| ariaLabel={t('back')} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} |
Contributor
Author
There was a problem hiding this comment.
Revert this
| color={IconColor.iconDefault} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('back')} |
| color={IconColor.iconAlternative} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('back')} |
| className="customize-nonce-modal__close" | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('close')} |
| marginRight={1} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('back')} |
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Builds ready [3af1cfe]
⚡ Performance Benchmarks (Total: 🟢 16 pass · 🟡 7 warn · 🔴 2 fail)
Bundle size diffs
|
| onClick={() => navigate(PREVIOUS_ROUTE)} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| /> |
| onClick={() => navigate(PREVIOUS_ROUTE)} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| /> |
| onClick={handleBack} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| /> |
| iconName={IconName.ArrowLeft} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('back')} |
| iconName={IconName.Setting} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('settings')} |
| ariaLabel={t('back')} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| onClick={onClose} |
| iconName={IconName.ArrowLeft} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| ariaLabel={t('back')} |
| ariaLabel={t('back')} | ||
| size={ButtonIconSize.Sm} | ||
| size={ButtonIconSize.Md} | ||
| data-testid="token-management-header-back-button" |
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
## **Description** - Update `tsx` from `4.21.0` to `4.22.4`, which updates the vulnerable `esbuild` from `0.27.7` to `0.28.0` - Resolution to pin `esbuild` one patch version higher, to `0.28.1` - **IMPORTANT:** This could cause `storybook` to break, as we're on a very old version of `storybook`, and we're forcing its `esbuild` from `0.18.20` to `0.28.1`. But a smoke test seemed to be okay, and its passing tests. ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: #43521 <!--## **Manual testing steps** ## **Screenshots/Recordings** ## **Pre-merge author checklist** ## **Pre-merge reviewer checklist**--> --------- Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
georgewrmarshall
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Builds ready [9bad218]
⚡ Performance Benchmarks (Total: 🟢 18 pass · 🟡 6 warn · 🔴 1 fail)
Bundle size diffs
|
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
2 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
Follow-up to #43516 which aligned the core
ButtonIconcomponent dimensions with the MetaMask Design System React spec. This PR updates all page-level header usages ofButtonIconthat were still usingButtonIconSize.Sminstead of the correctButtonIconSize.Md.Legacy — Extension & Mobile
component-library(before #43516):Design system (React & React Native — target values):
Files updated (
ButtonIconSize.Sm→ButtonIconSize.Mdin header startAccessory/endAccessory):ui/components/component-library/modal-header/deprecated/modal-header.tsx— back + closeui/components/component-library/header-base/header-base.stories.tsx— back + close (story examples)ui/components/multichain/pages/page/page.stories.tsx— back (story examples)ui/components/multichain/pages/gator-permissions/gator-permissions-page.tsx— backui/components/multichain/pages/gator-permissions/review-permissions/review-gator-permissions-page.tsx— backui/components/multichain/pages/gator-permissions/token-transfer/token-transfer-page.tsx— backui/components/app/assets/nfts/nft-details/nft-full-image.tsx— closeui/pages/batch-sell/batch-sell-page.tsx— backui/pages/bridge/index.tsx— back + settingsui/pages/bridge/transaction-details/transaction-details.tsx— backui/pages/settings/shared/settings-header.tsx— backui/pages/token-management/token-management.tsx— backNote:
ButtonIconSize.Smintentionally retained in non-header contexts (text fields, search inputs, banners) where the smaller size is appropriate.Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
before720.mov
After
after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist