MetaMask / MetaMask/metamask-extension
Replace deprecated ActionableMessage component with new BannerAlert component
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
### Description
Currently, the extension is using an outdated `ActionableMessage` component, which needs to be replaced with the new `BannerAlert` component.
This is a massive undertaking by itself and creating a single PR would be too large. Smaller PRs can be submitted against this issue to ensure easier review and gradual improvements.
[BannerAlert documentation in storybook](https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-banneralert--docs)
### Technical Details
- Replace instances of `ActionableMessage` component (`ui/components/ui/actionable-message/actionable-message.js`) with `BannerAlert` component (`ui/components/component-library/banner-alert/banner-alert.js`)
- Component APIs are slightly different so ensure all props have been migrated appropriately
### Acceptance Criteria
- Instances of `ActionableMessage` component are completely replaced with the new `BannerAlert` component
- The component APIs are updated to reflect the changes in the new `ActionableMessage` component and there is no functional changes or visual regression
- Each Pull Request (PR) should include **no more than 1 file**
- The code changes should pass Jest tests, linting, and Storybook without any errors.
- The PR must include before and after screenshots of the UI to ensure there are no visual regressions.
If the acceptance criteria is not met, PRs may be closed.
### Difficulty: Intermediate
Good first issue for: External contributors who are familiar with running the extension locally, have knowledge of React, component props, Jest tests, linting, and Storybook, and want to contribute to improving the cohesiveness of UI in the extension
Contributor guide
Research direction
Start with the named ActionableMessage and BannerAlert component files and the BannerAlert Storybook documentation, then locate one ActionableMessage usage in the extension. Compare the component APIs and identify the corresponding Jest tests, linting, and Storybook checks. Done means one file is migrated with no functional or visual regression, supported by before-and-after screenshots.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100