feat: DSYS-476 Migrate AvatarIcon to ADR-0003 and ADR-0004#996
Draft
cursor[bot] wants to merge 2 commits intomainfrom
Draft
feat: DSYS-476 Migrate AvatarIcon to ADR-0003 and ADR-0004#996cursor[bot] wants to merge 2 commits intomainfrom
cursor[bot] wants to merge 2 commits intomainfrom
Conversation
- Create AvatarIconSeverity const object and AvatarIconPropsShared type in design-system-shared - Export from shared package index - Update React package to import AvatarIconSeverity from shared - Update React Native package to import AvatarIconSeverity from shared - Remove AvatarIconSeverity enum from platform-specific types/index.ts files - Update constants, component, stories, tests, and figma files to import from correct sources - Update Toast.types.ts to import AvatarIconSeverity from shared package Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Contributor
📖 Storybook Preview |
This was referenced Apr 1, 2026
georgewrmarshall
added a commit
that referenced
this pull request
Apr 2, 2026
## Summary - Migrate `AvatarBase` size and shape contracts to shared union types from `@metamask/design-system-shared`. - Update React and React Native `AvatarBase` to consume shared `AvatarBaseSize`, `AvatarBaseShape`, and `AvatarBasePropsShared`. - Replace numeric casting assumptions with explicit size-to-pixel maps where components still require numeric inputs. ## Reviewer Context - `AvatarBaseSize` is intentionally aligned to t-shirt tokens (`xs`/`sm`/`md`/`lg`/`xl`) rather than numeric enum values. The goal is a semantic, platform-agnostic API while keeping px conversion localized to platform/component constants. - Other avatar families continue to use the new shared `AvatarBaseSize` const-union contract and remain behaviorally compatible in this PR. - Remaining component-level migrations are intentionally sequenced into follow-up PRs this change unlocks: - #996 - #1009 - #1015 - Overarching direction: migrate from enums toward shared const-union types and centralized shared type definitions to keep component APIs consistent across React and React Native. ### Screen recordings ### Before https://github.com/user-attachments/assets/eac5db23-27d4-4e00-a5de-24af24fe179b ### After React https://github.com/user-attachments/assets/85a71bc3-5325-4513-a0de-2ed566bbbe1c React Native https://github.com/user-attachments/assets/6396a807-fe0f-4330-986e-2d604283ad3c Extension Design System in storybook using preview package <img width="1512" height="907" alt="Screenshot 2026-04-01 at 2 56 39 PM" src="https://github.com/user-attachments/assets/ca258722-5610-407e-ad02-2b64b2e97a04" /> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Touches shared type contracts consumed by both React and React Native `AvatarBase`, so downstream consumers may break if they relied on the old enum shapes/values. Also replaces `Number(size)` assumptions with explicit px mapping for account avatars, which could surface sizing regressions if mappings diverge. > > **Overview** > **Migrates `AvatarBase` size/shape contracts to `@metamask/design-system-shared`.** Both React and React Native `AvatarBase` now import `AvatarBaseSize`/`AvatarBaseShape` and their prop types are refactored to extend a new shared `AvatarBasePropsShared` type. > > **Aligns public type exports to the shared package.** The `types/index.ts` in both platforms drops local `AvatarBase` enums and re-exports the shared size/shape tokens, and `design-system-shared` adds the new `types/AvatarBase` module (plus a `react` peerDependency because shared props reference `ReactNode`). > > **Removes numeric-casting of avatar sizes where numeric px is required.** `AvatarAccount` introduces `MAP_AVATARACCOUNT_SIZE_SIZENUMBER` and uses it (and updates tests) instead of `Number(size)`, and the `BadgeNetwork` test is updated to assert enforced props via `react-test-renderer`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 96aaa54. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
added a commit
that referenced
this pull request
Apr 6, 2026
## Summary - Migrate `AvatarBase` size and shape contracts to shared union types from `@metamask/design-system-shared`. - Update React and React Native `AvatarBase` to consume shared `AvatarBaseSize`, `AvatarBaseShape`, and `AvatarBasePropsShared`. - Replace numeric casting assumptions with explicit size-to-pixel maps where components still require numeric inputs. ## Reviewer Context - `AvatarBaseSize` is intentionally aligned to t-shirt tokens (`xs`/`sm`/`md`/`lg`/`xl`) rather than numeric enum values. The goal is a semantic, platform-agnostic API while keeping px conversion localized to platform/component constants. - Other avatar families continue to use the new shared `AvatarBaseSize` const-union contract and remain behaviorally compatible in this PR. - Remaining component-level migrations are intentionally sequenced into follow-up PRs this change unlocks: - #996 - #1009 - #1015 - Overarching direction: migrate from enums toward shared const-union types and centralized shared type definitions to keep component APIs consistent across React and React Native. ### Screen recordings ### Before https://github.com/user-attachments/assets/eac5db23-27d4-4e00-a5de-24af24fe179b ### After React https://github.com/user-attachments/assets/85a71bc3-5325-4513-a0de-2ed566bbbe1c React Native https://github.com/user-attachments/assets/6396a807-fe0f-4330-986e-2d604283ad3c Extension Design System in storybook using preview package <img width="1512" height="907" alt="Screenshot 2026-04-01 at 2 56 39 PM" src="https://github.com/user-attachments/assets/ca258722-5610-407e-ad02-2b64b2e97a04" /> <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Medium Risk** > Touches shared type contracts consumed by both React and React Native `AvatarBase`, so downstream consumers may break if they relied on the old enum shapes/values. Also replaces `Number(size)` assumptions with explicit px mapping for account avatars, which could surface sizing regressions if mappings diverge. > > **Overview** > **Migrates `AvatarBase` size/shape contracts to `@metamask/design-system-shared`.** Both React and React Native `AvatarBase` now import `AvatarBaseSize`/`AvatarBaseShape` and their prop types are refactored to extend a new shared `AvatarBasePropsShared` type. > > **Aligns public type exports to the shared package.** The `types/index.ts` in both platforms drops local `AvatarBase` enums and re-exports the shared size/shape tokens, and `design-system-shared` adds the new `types/AvatarBase` module (plus a `react` peerDependency because shared props reference `ReactNode`). > > **Removes numeric-casting of avatar sizes where numeric px is required.** `AvatarAccount` introduces `MAP_AVATARACCOUNT_SIZE_SIZENUMBER` and uses it (and updates tests) instead of `Number(size)`, and the `BadgeNetwork` test is updated to assert enforced props via `react-test-renderer`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 96aaa54. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
georgewrmarshall
added a commit
that referenced
this pull request
Apr 7, 2026
…ignment (#994) ## **Description** ### Why Cursor Automations are configured in the Cursor product UI and are **not** version-controlled in git. We need an in-repo **canonical spec** for the DSYS-468 / ADR-0003–0004 internal migration workflow (Jira pickup, which rules to follow, verification, PR expectations) so it can be reviewed in PRs and linked or copy-pasted into **Private** or **Team Visible** automations. ### What changed - **Added** `.cursor/automations/enum-shared-type-migration.md` — JQL (interactive vs scheduled unassigned backlog), Jira pickup steps, Cursor Cloud Automation notes (billing/identity, tools), implementation pointers to `CLAUDE.md` and Layer 2 rules (`component-enum-union-migration`, etc.), verification (`yarn build`, `yarn test`, `yarn lint`), and a **paste-ready** cloud prompt. - **Updated** `docs/ai-agents.md` — **Cursor Cloud Automations** subsection aligned with repo agent principles (*reference over duplication*, checklists, context efficiency, verification) and explicit note that **`.cursor/automations/`** is the VCS source of truth because the Automations UI has no native version control. - **Removed** unrelated migration tracking artifacts from this branch: `.cursor/rules/component-migration-tracking.md`, `.cursor/rules/enum-shared-type-migration.mdc`, and docs `component-migration-project.md`, `extension-migration-tracker.md`, `jira-ticket-creation.md`, `mobile-migration-tracker.md`. Automation is invoked via `@.cursor/automations/enum-shared-type-migration.md` only (no companion `.mdc` rule). - **Chore** — Prettier on touched markdown where required by hooks. ### Linking specs from Cursor Automations (for reviewers) There is **no official Cursor documentation** that guarantees a cloud agent will **fetch and follow** an arbitrary GitHub blob URL. **Recommended:** configure the automation with a **repository + branch** that contains this file, and instruct the agent to read **`.cursor/automations/enum-shared-type-migration.md` in the workspace**. A **GitHub link** (especially `raw.githubusercontent.com` or a **pinned commit**) is still useful for humans, pinning a frozen spec, or external tooling—but treat it as **supplementary** to the checked-out file. ## **Related issues** Fixes: (none — contributor workflow / tooling only) ## **Manual testing steps** 1. On this branch, open `.cursor/automations/enum-shared-type-migration.md` and confirm structure, JQL blocks, and links render as expected. 2. In Cursor Chat, `@`-mention `.cursor/automations/enum-shared-type-migration.md` and confirm the agent is directed to `docs/ai-agents.md` and the listed `@.cursor/rules/*.md` files for implementation (not `component-migration.md` for this epic). 3. Confirm no remaining references to deleted paths (e.g. `component-migration-tracking`, removed tracker docs) via repo search. 4. (Optional) Create or edit a **Private** test automation: paste the **cloud prompt** snippet from the automation doc and run against a branch that includes this file; confirm the agent can see `.cursor/automations/enum-shared-type-migration.md` on disk. ## **Example PRs** PRs that have been successfully created with this automation - #996 - #1009 - #1010 - #1015 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable (N/A — docs only) - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable (N/A) - [ ] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk: documentation-only changes that add guidance for Cursor Automations and do not affect runtime code paths. > > **Overview** > Adds a version-controlled Cursor Automation spec at `.cursor/automations/enum-shared-type-migration.md` that defines the DSYS-468 Jira pickup workflow (JQL for interactive vs scheduled runs), required tools/identity notes, which `.cursor/rules/` to follow for the migration, and a paste-ready automation prompt (plus post-merge Jira-closing guidance). > > Updates `docs/ai-agents.md` to explicitly document how Cursor Cloud Automations should follow the repo’s agent principles (*reference over duplication*, checklists, verification) and to treat `.cursor/automations/` as the canonical, reviewable source of truth for automation prompts. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 2594fa9. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: cursor[bot] <206951365+cursor[bot]@users.noreply.github.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
1 participant
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
Migrates the
AvatarIconcomponent to follow ADR-0003 (String Unions) and ADR-0004 (Centralized Types Architecture).AvatarIconSeverityconst object (replacing the enum) andAvatarIconPropsSharedtype in@metamask/design-system-sharedAvatarIconSeverityfrom the shared package instead of duplicating it in each platform'stypes/index.tsAvatarIconSeverityenum from both platform-specifictypes/index.tsfilesToast.types.tsin React Native which also referencedAvatarIconSeverityNote:
AvatarIconSizeremains platform-specific as it is an alias forAvatarBaseSize, which has different values per platform (string labels in React, pixel numbers in React Native).Related issues
Fixes: DSYS-476
Manual testing steps
yarn buildfrom repo root — should complete with no errorsyarn testfrom repo root — all tests should pass with 100% coverageyarn lintfrom repo root — no lint errorsPre-merge author checklist
Pre-merge reviewer checklist