feat(icons): add HeartStraight and HeartStraightFilled - #1503
Merged
Merged
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
georgewrmarshall
approved these changes
Sep 10, 2026
georgewrmarshall
enabled auto-merge (squash)
September 10, 2026 13:12
Contributor
📖 Storybook LinksCompare the preview for this pull request with the latest Storybooks from the 🔀 Pull Request Preview
🌳 Main Branch (Latest)
|
georgewrmarshall
pushed a commit
that referenced
this pull request
Sep 10, 2026
## Release 67.0.0 This release restores a heart glyph to the icon set as `IconName.HeartStraight` and `IconName.HeartStraightFilled`, and fixes React `ButtonIcon` shrinking in flex layouts. Shared also publishes the Telegram artwork restore that landed after its last package release. Includes [#1503](#1503) (HeartStraight icons) and [#1502](#1502) (`ButtonIcon` flex shrink). ### 📦 Package Versions - `@metamask/design-system-shared`: **0.37.0** - `@metamask/design-system-react`: **0.42.0** - `@metamask/design-system-react-native`: **0.46.0** ### 🔄 Shared Type Updates (0.37.0) #### Added - Added `HeartStraight` and `HeartStraightFilled` to `IconName` ([#1503](#1503)) #### Changed - Restored the Telegram `Icon` artwork to the official logo ([#1500](#1500)) ### 🌐 React Web Updates (0.42.0) #### Added - Added `HeartStraight` and `HeartStraightFilled` to `IconName` ([#1503](#1503)) #### Fixed - Fixed `ButtonIcon` shrinking when placed in a flex container ([#1502](#1502)) ### 📱 React Native Updates (0.46.0) #### Added - Added `HeartStraight` and `HeartStraightFilled` to `IconName` ([#1503](#1503)) ###⚠️ Breaking Changes None. ### ✅ Checklist - [x] Changelogs updated with human-readable descriptions - [x] Changelog validation passed (`yarn changelog:validate`) - [x] Version bumps follow semantic versioning - [x] design-system-shared: minor (`0.36.0 → 0.37.0`) — additive `IconName` members; Telegram SVG published for shared - [x] design-system-react: minor (`0.41.0 → 0.42.0`) — additive `IconName` members plus `ButtonIcon` fix - [x] design-system-react-native: minor (`0.45.0 → 0.46.0`) — additive `IconName` members - [x] Breaking changes documented with migration guidance - [x] Migration guides updated with before/after examples (if breaking changes) - [x] PR references included in changelog entries ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've reviewed the [Release Workflow](./.cursor/rules/release-workflow.md) cursor rule - [x] All tests pass (`yarn build && yarn test && yarn lint`) - [x] Changelog validation passes (`yarn changelog:validate`) ## **Pre-merge reviewer checklist** - [ ] I've reviewed the [Reviewing Release PRs](./docs/reviewing-release-prs.md) guide - [ ] Package versions follow semantic versioning - [ ] Changelog entries are consumer-facing (not commit message regurgitation) - [ ] Breaking changes are documented in MIGRATION.md with examples - [ ] All unreleased changes are accounted for in changelogs Made with [Cursor](https://cursor.com) --------- Co-authored-by: Cursor <cursoragent@cursor.com>
4 of 7 tasks
pull Bot
pushed a commit
to Eric-Johnson-1/metamask-extension
that referenced
this pull request
Sep 11, 2026
## **Description** Upgrades design system packages to align with the [v67.0.0 release](https://github.com/MetaMask/metamask-design-system/releases/tag/v67.0.0) ([MetaMask/metamask-design-system#1508](MetaMask/metamask-design-system#1508)). **Packages upgraded:** - `@metamask/design-system-react`: `^0.41.0` → `^0.42.0` - `@metamask/design-system-shared`: `^0.36.0` → `^0.37.0` **Breaking changes addressed:** None — this is a minor release with no breaking API changes. **Changes included in this release:** ### ButtonIcon: prevent shrinking in flex layouts Upstream `ButtonIcon` now includes `shrink-0` so icon buttons keep their size in flex containers ([MetaMask#1502](MetaMask/metamask-design-system#1502)). **Migration:** No application code changes required. Consumers using `ButtonIcon` from `@metamask/design-system-react` pick up the layout fix via the dependency bump. **Snapshot updates:** - Jest snapshots that serialize MMDS `ButtonIcon` class names now include `shrink-0`. ### Icon: HeartStraight additions Added `HeartStraight` and `HeartStraightFilled` to `IconName` ([MetaMask#1503](MetaMask/metamask-design-system#1503)). These names are available for future use; this PR does not switch any existing icons. ### Shared Telegram artwork `@metamask/design-system-shared` now publishes the Telegram `Icon` artwork restore that already shipped in `design-system-react` `0.41.0` ([MetaMask#1500](MetaMask/metamask-design-system#1500)). **Legacy component deprecations:** - No new deprecations added. ## **Changelog** CHANGELOG entry: Fixed icon buttons shrinking when placed in flex layouts. <!-- ## **Related issues** Fixes: --> ## **Manual testing steps** 1. Run the extension and unlock/onboard to the home screen. 2. Check screens that use MMDS `ButtonIcon` in flex rows (home header, password form, bridge asset picker, confirmation gas rows) and confirm icon buttons keep a square size and do not compress. 3. Confirm existing icons still render with the same names and sizes as before. 4. `HeartStraight` / `HeartStraightFilled` are not used in the extension yet; no visual change is expected for those glyphs. ## **Screenshots/Recordings** ### **Before** N/A – dependency-only update with no application code changes ### **After** N/A – class-name layout fix (`shrink-0` on MMDS `ButtonIcon`). Confirm icon buttons in flex headers during 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 - [ ] 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. Made with [Cursor](https://cursor.com) Co-authored-by: Cursor <cursoragent@cursor.com>
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
Adds the Phosphor
heart-straightglyph in regular and fill weights to the shared icon set, available asIconName.HeartStraightandIconName.HeartStraightFilled.Reason for change: The icon set no longer has a heart glyph — the previous
Heart/HeartFilledicons were part of the 111 unused icons removed in #1481. This adds one back, drawn from Phosphor so it matches the artwork style established by the brand migration (#1475, #1482, #1493).What changed:
heart-straight.svgandheart-straight-filled.svgto@metamask/design-system-shared(the single source of truth for icon assets)yarn generate:icons, which addedHeartStraightandHeartStraightFilledtoIconNameand generated the platform outputsHeartStraight.tsxandHeartStraightFilled.tsxplusIconsbarrel entries in@metamask/design-system-react@metamask/design-system-react-nativeassets and mapped them inassetByIconNameBoth glyphs keep the shared icon conventions:
viewBox="0 0 24 24",fill="currentColor", and Phosphor's 256-unit path scaled bytransform="scale(0.09375)". This is additive — no existingIconNamevalues change, so noMIGRATION.mdentry is needed.Related issues
Fixes: https://consensys.slack.com/archives/C0354T27M5M/p1789035991588969?thread_ts=1789031981.932039&cid=C0354T27M5M
Manual testing steps
yarn buildfrom the repo root.yarn storybookand open Components / Icon.Namestory, confirmHeartStraightandHeartStraightFilledrender as an outline and a solid heart, with no clipped edges atIconSize.XsthroughIconSize.Xl.IconColor.ErrorDefault) and confirm both glyphs inherit it viacurrentColor.yarn storybook:iosand repeat steps 3 and 4 in the React Native Icon story.yarn lintandyarn testpass.Screenshots/Recordings
Before
N/A — no heart glyph existed in the set.
After
Pre-merge author checklist
Icontests iterate overIconName, so both new icons are covered without new test filesPre-merge reviewer checklist
Note
Low Risk
Additive icon assets and generated registry entries only; no auth, data, or breaking API changes.
Overview
Restores a heart glyph to the design system after prior heart icons were removed, adding Phosphor heart-straight in outline and filled weights.
New SVG assets land in
@metamask/design-system-shared, with generated wiring so consumers can useIconName.HeartStraightandIconName.HeartStraightFilledon React (new icon components + barrel exports) and React Native (assetByIconNamemappings). The change is additive only—no existing icon names or behavior change.Reviewed by Cursor Bugbot for commit b5a26e8. Bugbot is set up for automated code reviews on this repo. Configure here.