Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(snaps): Enable destructive footer buttons in Snap UI (#29966)
## **Description** Add/enable destructive (danger) button in Snaps UI custom footer. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29966?quickstart=1) ## **Related issues** Fixes: MetaMask/snaps#3015 ## **Manual testing steps** 1. Install a Snap with footer buttons that have `destructive` variant. 2. Confirm that the buttons look as expected. 3. Make a button that has both states, `destructive` and `disabled` and check if it's rendered correctly. 4. Try different variants with non-destructive buttons and confirm that there are no regressions. Example: ```typescript <Footer> <Button name="cancel" variant="destructive"> Cancel </Button> <Button name="confirm" variant="destructive" disabled={true}> Confirm </Button> </Footer> ``` ## **Screenshots/Recordings** ### **Before** ![Screenshot 2025-01-29 at 15 45 55](https://github.com/user-attachments/assets/ccf4a5d3-2b19-4b46-8f72-7eda8b3ae35d) ![Screenshot 2025-01-29 at 15 46 47](https://github.com/user-attachments/assets/3b0cf71d-fd86-4d0a-8f37-17e8a36c8b24) ![Screenshot 2025-01-29 at 15 48 12](https://github.com/user-attachments/assets/5929c1e2-6bb8-4d0e-b701-bd6ace106fc8) ![Screenshot 2025-01-29 at 15 53 07](https://github.com/user-attachments/assets/fb69a6e7-404d-4fcb-9914-ce39525b64eb) ### **After** ![Screenshot 2025-01-29 at 15 29 22](https://github.com/user-attachments/assets/60eac7d3-da78-46b7-84bc-80287935556b) ![Screenshot 2025-01-29 at 15 24 24](https://github.com/user-attachments/assets/0bc749a8-690c-412e-9534-f13f9fba95ee) ![Screenshot 2025-01-29 at 15 32 12](https://github.com/user-attachments/assets/22f0567a-146d-43d6-8389-9f46aa0d4fc3) ![Screenshot 2025-01-29 at 16 01 07](https://github.com/user-attachments/assets/e4285b01-1a02-4abc-8594-794e15931383) ## **Pre-merge author checklist** - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] 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.
- Loading branch information